Merge pull request #69 from mr150/feat/new-utils

Feat/new utils
mr150 · Sep 23, 2024 · 2762c36 · 2762c36
2 parents 3827d63 + 9377ba6
commit 2762c36
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 11 deletions.
diff --git a/docs/homepage.md b/docs/homepage.md
@@ -168,6 +168,14 @@ Addons may contains any tools, settings and styles. Addons now at the **preview*
 
 <section class="Mb4gg">
 
+## Articles ##
+- Atomic CSS Deep Dive: [EN](https://dev.to/mr150/atomic-css-deep-dive-1hee), [RU](https://habr.com/ru/articles/833712/)
+- [mlut - a new word in the Utility-First CSS approach](https://dev.to/mr150/mlut-a-new-word-in-the-utility-first-css-approach-gbl)
+
+</section>
+
+<section class="Mb4gg">
+
 ## What next? ##
 - first class CSS functions in utilities values
 - states and at-rules grouping 

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@mlut/core",
-	"version": "2.0.1",
+	"version": "2.1.0",
 	"description": "Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity",
 	"author": "mr150",
 	"type": "module",

diff --git a/packages/core/src/jit/JitEngine.ts b/packages/core/src/jit/JitEngine.ts
@@ -28,6 +28,7 @@ export class JitEngine {
 		escapedQuotes: /\\['"`]/g,
 		utilName: /^-?[A-Z]{1}[a-zA-Z]*/,
 		uppercaseLetter: /[A-Z]/,
+		contextUtil: /-Ctx([\d\-#]|$)/,
 	};
 	private readonly configRegexps = {
 		userSettings: /@use ['"][^'"]*(tools|mlut|core)['"](\s*as\s+[\w]+)?\s+with\s*\(([^;]+)\);/s,
@@ -123,7 +124,10 @@ export class JitEngine {
 			if (utility) {
 				const utilName = utility.match(this.utilsRegexps.utilName)?.[0] as string;
 
-				if (this.utils.has(utilName) || utilName[0] === '-') {
+				if (
+					this.utils.has(utilName) ||
+					(utilName[0] === '-' && !this.utilsRegexps.contextUtil.test(utilName))
+				) {
 					acc.add(cssClass);
 				}
 			}

diff --git a/packages/core/src/sass/tools/settings/base/_utils.scss b/packages/core/src/sass/tools/settings/base/_utils.scss
@@ -474,6 +474,8 @@ $utils-cfg: (
 			'rdo': ':read-only',
 			'rdw': ':read-write',
 			't': ':target',
+			'ui': ':user-invalid',
+			'uv': ':user-valid',
 			'v': ':visited',
 			'vl': ':valid',
 		),

diff --git a/packages/core/src/sass/tools/settings/common/_utils.scss b/packages/core/src/sass/tools/settings/common/_utils.scss
@@ -1591,6 +1591,18 @@ $utils-db: (
 					'nn': none,
 				),
 			),
+			'Coi': (
+				'properties': counter-increment,
+				'conversion': 'num-length',
+			),
+			'Cor': (
+				'properties': counter-reset,
+				'conversion': 'num-length',
+			),
+			'Cos': (
+				'properties': counter-set,
+				'conversion': 'num-length',
+			),
 
 			// SVG
 			'Fi': (

diff --git a/packages/mlut/README.md b/packages/mlut/README.md
@@ -25,6 +25,7 @@ Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexit
 	- [Installation](#installation)
 	- [Usage](#usage)
 - [Documentation](#documentation)
+- [Articles](#articles)
 - [What next](#what-next)
 - [Acknowledgement](#acknowledgement)
 - [License](#license)
@@ -272,6 +273,10 @@ mlut has a plugins for Rollup, Vite and Webpack. See details [here](https://mr15
 ## Documentation ##
 Available [here](https://mr150.github.io/mlut/) or can be run locally. Documentation is included in this repo and is generated using [KSS-node](https://github.com/kss-node/kss-node) from the comments in the sources
 
+## Articles ##
+- Atomic CSS Deep Dive: [EN](https://dev.to/mr150/atomic-css-deep-dive-1hee), [RU](https://habr.com/ru/articles/833712/)
+- [mlut - a new word in the Utility-First CSS approach](https://dev.to/mr150/mlut-a-new-word-in-the-utility-first-css-approach-gbl)
+
 ## What next? ##
 - first class CSS functions in utilities values
 - states and at-rules grouping 

diff --git a/packages/mlut/package.json b/packages/mlut/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "mlut",
-	"version": "7.1.0",
+	"version": "7.1.1",
 	"description": "Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity",
 	"author": "mr150",
 	"type": "module",
@@ -50,7 +50,7 @@
 		"typescript": "^4.8.0"
 	},
 	"dependencies": {
-		"@mlut/core": "^2.0.0",
+		"@mlut/core": "^2.1.0",
 		"arg": "^5.0.2",
 		"csso": "^5.0.5",
 		"fast-glob": "^3.3.2",

diff --git a/packages/plugins/package.json b/packages/plugins/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@mlut/plugins",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"description": "mlut plugins for Rollup, Vite and Webpack",
 	"author": "mr150",
 	"type": "module",
@@ -51,7 +51,7 @@
 		"typescript": "^4.8.0"
 	},
 	"dependencies": {
-		"@mlut/core": "^2.0.0",
+		"@mlut/core": "^2.1.0",
 		"fs-extra": "^11.2.0",
 		"unplugin": "^1.10.1"
 	}

diff --git a/test/jit/JitEngine.test.ts b/test/jit/JitEngine.test.ts
@@ -38,6 +38,7 @@ describe('JitEngine', () => {
 D-n
 md_D
 md_Gc-s1 Pb6u Ps Lol5    md_Mxh130vh Ps
+-Ctx -Ctx0 -Ctx-one
 
 @:pfrm_-Try0 ^one_Bgc-$bgColor?#c06_h Ct-'id:';attr(id)_b
 ">
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,6 +38,7 @@ describe('JitEngine', () => { @@
     D-n
     md_D
     md_Gc-s1 Pb6u Ps Lol5    md_Mxh130vh Ps
+    -Ctx -Ctx0 -Ctx-one
     @:pfrm_-Try0 ^one_Bgc-$bgColor?#c06_h Ct-'id:';attr(id)_b
     ">
@@ Expand Down @@