-
Simple text
+
+
mlut web
+
CDN version is very useful for atomic CSS framework
+
```
You can also use Sass config with the special `style` tag
```html
diff --git a/package-lock.json b/package-lock.json
index fdf506ba..7e37eed7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1724,29 +1724,6 @@
}
}
},
- "node_modules/@rollup/plugin-inject": {
- "version": "5.0.5",
- "resolved": "https://registry.npmjs.org/@rollup/plugin-inject/-/plugin-inject-5.0.5.tgz",
- "integrity": "sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "@rollup/pluginutils": "^5.0.1",
- "estree-walker": "^2.0.2",
- "magic-string": "^0.30.3"
- },
- "engines": {
- "node": ">=14.0.0"
- },
- "peerDependencies": {
- "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
- },
- "peerDependenciesMeta": {
- "rollup": {
- "optional": true
- }
- }
- },
"node_modules/@rollup/plugin-node-resolve": {
"version": "15.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.1.tgz",
@@ -11306,16 +11283,6 @@
"es5-ext": "~0.10.2"
}
},
- "node_modules/magic-string": {
- "version": "0.30.21",
- "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
- "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "@jridgewell/sourcemap-codec": "^1.5.5"
- }
- },
"node_modules/make-error": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
@@ -14665,19 +14632,6 @@
"node": ">=8.3"
}
},
- "node_modules/rollup-plugin-polyfill-node": {
- "version": "0.13.0",
- "resolved": "https://registry.npmjs.org/rollup-plugin-polyfill-node/-/rollup-plugin-polyfill-node-0.13.0.tgz",
- "integrity": "sha512-FYEvpCaD5jGtyBuBFcQImEGmTxDTPbiHjJdrYIp+mFIwgXiXabxvKUK7ZT9P31ozu2Tqm9llYQMRWsfvTMTAOw==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "@rollup/plugin-inject": "^5.0.4"
- },
- "peerDependencies": {
- "rollup": "^1.20.0 || ^2.0.0 || ^3.0.0 || ^4.0.0"
- }
- },
"node_modules/rollup-plugin-serve": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/rollup-plugin-serve/-/rollup-plugin-serve-1.1.1.tgz",
@@ -19249,7 +19203,7 @@
},
"packages/web": {
"name": "@mlut/web",
- "version": "1.0.0",
+ "version": "2.0.0",
"license": "MIT",
"devDependencies": {
"@mlut/core": "^2.5.1",
@@ -19259,7 +19213,6 @@
"@rollup/plugin-typescript": "^12.3.0",
"path-browserify-esm": "^1.0.6",
"rollup": "^4.59.0",
- "rollup-plugin-polyfill-node": "^0.13.0",
"sass": "^1.93.0",
"typescript": "^5.8.0"
}
diff --git a/packages/mlut/README.md b/packages/mlut/README.md
index 5e2f2c08..b35b35a5 100644
--- a/packages/mlut/README.md
+++ b/packages/mlut/README.md
@@ -179,7 +179,7 @@ npm i mlut -D
#### CDN ####
```html
-
+
```
### Usage ###
@@ -188,9 +188,10 @@ npm i mlut -D
Add the mlut script to your page and just use classes in the markup:
```html
-
-
-
Simple text
+
+
mlut web
+
CDN version is very useful for atomic CSS framework
+
```
You can also use Sass config with the special `style` tag
```html
diff --git a/packages/web/README.md b/packages/web/README.md
index ec627316..986abbb5 100644
--- a/packages/web/README.md
+++ b/packages/web/README.md
@@ -8,7 +8,7 @@ The [mlut](https://github.com/mlutcss/mlut) package that can be used on a web pa
Add the script to your page:
```html
-
+
```
And just use classes in the markup:
diff --git a/packages/web/package.json b/packages/web/package.json
index 6075f40d..e4226e10 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -1,12 +1,12 @@
{
"name": "@mlut/web",
- "version": "1.0.0",
+ "version": "2.0.0",
"description": "mlut package that can be used on a web page",
"author": "mr150",
"type": "module",
"license": "MIT",
"homepage": "https://mlut.style/",
- "main": "./dist/script.js",
+ "main": "./dist/index.js",
"keywords": [
"mlut",
"atomic css",
@@ -26,11 +26,11 @@
},
"exports": {
".": {
- "default": "./dist/index.js"
+ "default": "./dist/core.js"
}
},
"scripts": {
- "build:main": "rm -rf dist && rollup -c",
+ "build:core": "rm -rf dist && rollup -c",
"build:script": "rm -rf dist && export SCRIPT_BUILD=true && rollup -c",
"build": "rm -rf dist && rollup -c && export SCRIPT_BUILD=true && rollup -c"
},
@@ -45,7 +45,6 @@
"@rollup/plugin-typescript": "^12.3.0",
"path-browserify-esm": "^1.0.6",
"rollup": "^4.59.0",
- "rollup-plugin-polyfill-node": "^0.13.0",
"sass": "^1.93.0",
"typescript": "^5.8.0"
}
diff --git a/packages/web/rollup.config.js b/packages/web/rollup.config.js
index 630b93ba..112cd8a6 100644
--- a/packages/web/rollup.config.js
+++ b/packages/web/rollup.config.js
@@ -6,7 +6,7 @@ import alias from '@rollup/plugin-alias';
const __dirname = new URL('.', import.meta.url).pathname;
const isScriptBuild = !!process.env.SCRIPT_BUILD;
-const inputPath = isScriptBuild ? 'src/script.ts' : 'src/index.ts';
+const inputPath = isScriptBuild ? 'src/index.ts' : 'src/core.ts';
const plugins = [
nodeResolve(),
diff --git a/packages/web/src/core.ts b/packages/web/src/core.ts
new file mode 100644
index 00000000..19db3206
--- /dev/null
+++ b/packages/web/src/core.ts
@@ -0,0 +1 @@
+export * from '@mlut/core';
diff --git a/packages/web/src/index.ts b/packages/web/src/index.ts
index 19db3206..2ccf2967 100644
--- a/packages/web/src/index.ts
+++ b/packages/web/src/index.ts
@@ -1 +1,66 @@
-export * from '@mlut/core';
+import { jitEngine } from '@mlut/core';
+
+const pageName = 'index.html';
+const configName = 'style.scss';
+const defaultConfig = '@use "@mlut/core/tools";';
+const headElm = document.head;
+const styleElm = document.createElement('style');
+const configElm = headElm.querySelector('style[type="text/scss"]');
+const isConfigExist = configElm != null;
+headElm.appendChild(styleElm);
+
+function debounce
(fn: (...args: T[]) => unknown, timeout: number) {
+ let timer: number | undefined;
+
+ return (...args: T[]) => {
+ clearTimeout(timer);
+ timer = window.setTimeout(fn, timeout, ...args);
+ };
+}
+
+function replaceHtmlChars(str: string) {
+ return str
+ .replaceAll('&', '&')
+ .replaceAll('<', '<')
+ .replaceAll('>', '>');
+}
+
+const writeCss = debounce(async () => {
+ const markup = `"${document.documentElement.className}"\n${document.body.outerHTML}`;
+ jitEngine.putContent(pageName, replaceHtmlChars(markup));
+ styleElm.innerHTML = await jitEngine.generateCss();
+}, 250);
+
+await jitEngine.init(
+ isConfigExist ?
+ [configName, configElm.innerHTML] : undefined
+);
+
+const mainObserver = new MutationObserver((mutations) => {
+ const isRelevant = mutations.some(
+ (item) => (item.type === 'attributes' && item.attributeName !== 'style') ||
+ (item.type === 'childList' && item.target.nodeName !== "STYLE")
+ );
+
+ if (!isRelevant) {
+ return;
+ }
+
+ writeCss();
+});
+
+mainObserver.observe(document.documentElement, {
+ attributes: true,
+ childList: true,
+ subtree: true,
+});
+
+if (isConfigExist) {
+ new MutationObserver((async () => {
+ await jitEngine.updateSassConfig(configElm.innerHTML.trim() || defaultConfig);
+ writeCss();
+ })).observe(configElm, {
+ characterData: true,
+ subtree: true,
+ });
+}
diff --git a/packages/web/src/script.ts b/packages/web/src/script.ts
deleted file mode 100644
index 2ccf2967..00000000
--- a/packages/web/src/script.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { jitEngine } from '@mlut/core';
-
-const pageName = 'index.html';
-const configName = 'style.scss';
-const defaultConfig = '@use "@mlut/core/tools";';
-const headElm = document.head;
-const styleElm = document.createElement('style');
-const configElm = headElm.querySelector('style[type="text/scss"]');
-const isConfigExist = configElm != null;
-headElm.appendChild(styleElm);
-
-function debounce(fn: (...args: T[]) => unknown, timeout: number) {
- let timer: number | undefined;
-
- return (...args: T[]) => {
- clearTimeout(timer);
- timer = window.setTimeout(fn, timeout, ...args);
- };
-}
-
-function replaceHtmlChars(str: string) {
- return str
- .replaceAll('&', '&')
- .replaceAll('<', '<')
- .replaceAll('>', '>');
-}
-
-const writeCss = debounce(async () => {
- const markup = `"${document.documentElement.className}"\n${document.body.outerHTML}`;
- jitEngine.putContent(pageName, replaceHtmlChars(markup));
- styleElm.innerHTML = await jitEngine.generateCss();
-}, 250);
-
-await jitEngine.init(
- isConfigExist ?
- [configName, configElm.innerHTML] : undefined
-);
-
-const mainObserver = new MutationObserver((mutations) => {
- const isRelevant = mutations.some(
- (item) => (item.type === 'attributes' && item.attributeName !== 'style') ||
- (item.type === 'childList' && item.target.nodeName !== "STYLE")
- );
-
- if (!isRelevant) {
- return;
- }
-
- writeCss();
-});
-
-mainObserver.observe(document.documentElement, {
- attributes: true,
- childList: true,
- subtree: true,
-});
-
-if (isConfigExist) {
- new MutationObserver((async () => {
- await jitEngine.updateSassConfig(configElm.innerHTML.trim() || defaultConfig);
- writeCss();
- })).observe(configElm, {
- characterData: true,
- subtree: true,
- });
-}
diff --git a/test/web/core.html b/test/web/core.html
index 0045ac3c..6a1a5aaa 100644
--- a/test/web/core.html
+++ b/test/web/core.html
@@ -18,7 +18,7 @@ mlut tests
diff --git a/test/web/index.html b/test/web/index.html
index 0dc2f815..7f6c60c3 100644
--- a/test/web/index.html
+++ b/test/web/index.html
@@ -3,13 +3,15 @@
Web package test
-
+
- mlut web test
- CDN version is very useful for atomic CSS framework. Bazarim
+
+
mlut web test
+
CDN version is very useful for atomic CSS framework. Infa sotka
+