From 26d452a91b19c13624f050118176dde8768d9eaa Mon Sep 17 00:00:00 2001 From: mr150 Date: Wed, 4 Feb 2026 00:46:15 +0300 Subject: [PATCH 1/4] fix(core-sass): fix the `url` CSS function usage --- .../sass/tools/functions/high/utils/_value-converters.scss | 5 +++++ test/sass/tools/functions/utils/_convert-util-value.scss | 4 ++++ 2 files changed, 9 insertions(+) diff --git a/packages/core/src/sass/tools/functions/high/utils/_value-converters.scss b/packages/core/src/sass/tools/functions/high/utils/_value-converters.scss index ba790e2e..6b688be8 100644 --- a/packages/core/src/sass/tools/functions/high/utils/_value-converters.scss +++ b/packages/core/src/sass/tools/functions/high/utils/_value-converters.scss @@ -71,6 +71,11 @@ @if list.length($fraction) > 1 { $dividend: list.nth($fraction, 1); + $is-css-function: string.index($value, '(') and string.slice($value, -1) == ')'; + + @if $is-css-function { + @return $value; + } @if map.get($data, 'negative') { $dividend: '-' + $dividend; diff --git a/test/sass/tools/functions/utils/_convert-util-value.scss b/test/sass/tools/functions/utils/_convert-util-value.scss index 2cc26bcd..abc4acf3 100644 --- a/test/sass/tools/functions/utils/_convert-util-value.scss +++ b/test/sass/tools/functions/utils/_convert-util-value.scss @@ -200,6 +200,10 @@ ml.$utils-cfg: map.set( ('t,#007,cc', '-Gdrl'): repeating-linear-gradient(to top, #007, currentColor), ), + 'correct CSS functions usage': ( + ('url(img/circle.png)', 'Bgi'): url(img/circle.png), + ('url("img/triangle.png")', 'Bgi'): url("img/triangle.png"), + ), ); @each $test, $data in $-tests { From 4b0907fedc82ccf289d1c222a0679b54c06604f9 Mon Sep 17 00:00:00 2001 From: mr150 Date: Wed, 4 Feb 2026 20:18:09 +0300 Subject: [PATCH 2/4] feat(core-sass): add utils for masks --- .../src/sass/tools/settings/base/_utils.scss | 2 +- .../sass/tools/settings/common/_utils.scss | 189 ++++++++++++++---- 2 files changed, 149 insertions(+), 42 deletions(-) diff --git a/packages/core/src/sass/tools/settings/base/_utils.scss b/packages/core/src/sass/tools/settings/base/_utils.scss index 967574c6..4e2ddc57 100644 --- a/packages/core/src/sass/tools/settings/base/_utils.scss +++ b/packages/core/src/sass/tools/settings/base/_utils.scss @@ -321,7 +321,7 @@ // Usage: // ```scss // @debug ml.uv('-Gdrl-b;r,black,#ff0'); // repeating-linear-gradient(to bottom right, black, #ff0) -// @debug ml.uv('-Gdl-50d,blue;3r,cc;80p'); // linear-gradient(-50deg, blue 3rem, currentColor 80%) +// @debug ml.uv('-Msgrpl-50d,blue;3r,cc;80p'); // linear-gradient(-50deg, blue 3rem, currentColor 80%) // @debug ml.uv('-Gdc45d,#000;0.5g,yellow'); // conic-gradient(from 45deg, #000 0.5grad, yellow) // ``` // diff --git a/packages/core/src/sass/tools/settings/common/_utils.scss b/packages/core/src/sass/tools/settings/common/_utils.scss index 06988267..ef4d82db 100644 --- a/packages/core/src/sass/tools/settings/common/_utils.scss +++ b/packages/core/src/sass/tools/settings/common/_utils.scss @@ -112,6 +112,20 @@ $-sizing-kw: ( ); $-bd-kw-links: ('border', 'line-style', 'line-width'); +$-radial-grad-kw: ( + 'position', + 'radial-shape', + 'ray-size', + 'color-space', + 'hue-interpolation', + 'gradients', +); +$-conic-grad-kw: ( + 'position', + 'color-space', + 'hue-interpolation', + 'gradients', +); //stylelint-disable $utils-db: ( @@ -748,15 +762,7 @@ $utils-db: ( 'Bgr': ( 'properties': background-repeat, 'multi-list-separator': ml.$tULs1, - 'keywords': ( - '': no-repeat, - 'nr': no-repeat, - 'rx': repeat-x, - 'ry': repeat-y, - 'r': repeat, - 's': space, - 'rn': round, - ) + 'keywords': 'repeat-style', ), 'Bgp': ( 'properties': background-position, @@ -766,10 +772,7 @@ $utils-db: ( 'Bgs': ( 'properties': background-size, 'multi-list-separator': ml.$tULs1, - 'keywords': ( - 'ct': contain, - 'cv': cover, - ), + 'keywords': 'bg-size', ), 'Bga': ( 'properties': background-attachment, @@ -821,14 +824,7 @@ $utils-db: ( 'css-function': 'radial-gradient', 'conversion': 'gradient', 'multi-list-separator': ml.$tULs1, - 'keywords': ( - 'position', - 'radial-shape', - 'ray-size', - 'color-space', - 'hue-interpolation', - 'gradients', - ), + 'keywords': $-radial-grad-kw, ), '-Gdrr': ( 'properties': background-image, @@ -836,14 +832,7 @@ $utils-db: ( 'conversion': 'gradient', 'css-function': 'repeating-radial-gradient', 'multi-list-separator': ml.$tULs1, - 'keywords': ( - 'position', - 'radial-shape', - 'ray-size', - 'color-space', - 'hue-interpolation', - 'gradients', - ), + 'keywords': $-radial-grad-kw, ), '-Gdc': ( 'properties': background-image, @@ -851,12 +840,7 @@ $utils-db: ( 'css-function': 'conic-gradient', 'conversion': 'gradient', 'multi-list-separator': ml.$tULs1, - 'keywords': ( - 'position', - 'color-space', - 'hue-interpolation', - 'gradients', - ), + 'keywords': $-conic-grad-kw, ), '-Gdrc': ( 'properties': background-image, @@ -864,12 +848,7 @@ $utils-db: ( 'css-function': 'repeating-conic-gradient', 'conversion': 'gradient', 'multi-list-separator': ml.$tULs1, - 'keywords': ( - 'position', - 'color-space', - 'hue-interpolation', - 'gradients', - ), + 'keywords': $-conic-grad-kw, ), // TRANSFORM @@ -1267,6 +1246,115 @@ $utils-db: ( 'conversion': 'num-percent', ), + // MASK + 'Ms': ( + 'properties': mask, + 'multi-list-separator': ml.$tULs1, + ), + 'Msi': ( + 'properties': mask-image, + 'multi-list-separator': ml.$tULs1, + ), + 'Mscl': ( + 'properties': mask-clip, + 'multi-list-separator': ml.$tULs1, + 'keywords': ('box-ext', 'mask-clip'), + ), + 'Mso': ( + 'properties': mask-origin, + 'multi-list-separator': ml.$tULs1, + 'keywords': 'box-ext', + ), + 'Msc': ( + 'properties': mask-composite, + 'multi-list-separator': ml.$tULs1, + 'keywords': ( + 'a': add, + 's': subtract, + 'i': intersect, + 'e': exclude, + ), + ), + 'Msm': ( + 'properties': mask-mode, + 'multi-list-separator': ml.$tULs1, + 'keywords': ( + 'a': alpha, + 'l': luminance, + 'ms': match-source, + ), + ), + 'Msp': ( + 'properties': mask-position, + 'multi-list-separator': ml.$tULs1, + 'keywords': 'position', + ), + 'Msr': ( + 'properties': mask-repeat, + 'multi-list-separator': ml.$tULs1, + 'keywords': 'repeat-style', + ), + 'Mss': ( + 'properties': mask-size, + 'multi-list-separator': ml.$tULs1, + 'keywords': 'bg-size', + ), + 'Mst': ( + 'properties': mask-type, + 'keywords': ( + 'a': alpha, + 'l': luminance, + ), + ), + '-Msgl': ( + 'properties': mask-image, + 'transformer': 'gradient', + 'css-function': 'linear-gradient', + 'conversion': 'gradient', + 'multi-list-separator': ml.$tULs1, + 'keywords': ('position', 'gradients'), + ), + '-Msgrpl': ( + 'properties': mask-image, + 'transformer': 'gradient', + 'conversion': 'gradient', + 'css-function': 'repeating-linear-gradient', + 'multi-list-separator': ml.$tULs1, + 'keywords': ('position', 'gradients'), + ), + '-Msgr': ( + 'properties': mask-image, + 'transformer': 'gradient', + 'css-function': 'radial-gradient', + 'conversion': 'gradient', + 'multi-list-separator': ml.$tULs1, + 'keywords': $-radial-grad-kw, + ), + '-Msgrpr': ( + 'properties': mask-image, + 'transformer': 'gradient', + 'conversion': 'gradient', + 'css-function': 'repeating-radial-gradient', + 'multi-list-separator': ml.$tULs1, + 'keywords': $-radial-grad-kw, + ), + '-Msgc': ( + 'properties': mask-image, + 'transformer': 'gradient', + 'css-function': 'conic-gradient', + 'conversion': 'gradient', + 'multi-list-separator': ml.$tULs1, + 'keywords': $-conic-grad-kw, + ), + '-Msgrpc': ( + 'properties': mask-image, + 'transformer': 'gradient', + 'css-function': 'repeating-conic-gradient', + 'conversion': 'gradient', + 'multi-list-separator': ml.$tULs1, + 'keywords': $-conic-grad-kw, + ), + // BORDER 'Bd': ( 'properties': border, @@ -1812,8 +1900,14 @@ $utils-db: ( 'bb': border-box, 'cb': content-box, 'pb': padding-box, + 'fb': fill-box, + 'sb': stroke-box, + 'vb': view-box, 't': text, ), + 'mask-clip': ( + 'nc': no-clip, + ), 'blend-mode': ( 'n': normal, 'm': multiply, @@ -1910,6 +2004,19 @@ $utils-db: ( 'ic': increasing, 'dc': decreasing, ), + 'repeat-style': ( + '': no-repeat, + 'nr': no-repeat, + 'rx': repeat-x, + 'ry': repeat-y, + 'r': repeat, + 's': space, + 'rn': round, + ), + 'bg-size': ( + 'ct': contain, + 'cv': cover, + ), 'sizing': $-sizing-kw, ), ), From a9e25a741147eb2b5ac0d0841e197c9cf9c6cef4 Mon Sep 17 00:00:00 2001 From: mr150 Date: Wed, 4 Feb 2026 20:20:30 +0300 Subject: [PATCH 3/4] docs: update docs and readme --- docs/homepage.md | 2 +- packages/core/src/sass/tools/settings/base/_utils.scss | 2 +- packages/mlut/README.md | 2 +- packages/mlut/package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/homepage.md b/docs/homepage.md index ecee54e8..20b415e9 100644 --- a/docs/homepage.md +++ b/docs/homepage.md @@ -182,7 +182,7 @@ Addons may contains any tools, settings and styles. Addons now at the **preview*
## What next? ## -- masks and multiple gradients +- multiple gradients - first-class pseudoselectors with arguments like `has()` - performance optimization - plugins for editors and IDEs with hints and autocompletion diff --git a/packages/core/src/sass/tools/settings/base/_utils.scss b/packages/core/src/sass/tools/settings/base/_utils.scss index 4e2ddc57..94d10863 100644 --- a/packages/core/src/sass/tools/settings/base/_utils.scss +++ b/packages/core/src/sass/tools/settings/base/_utils.scss @@ -321,7 +321,7 @@ // Usage: // ```scss // @debug ml.uv('-Gdrl-b;r,black,#ff0'); // repeating-linear-gradient(to bottom right, black, #ff0) -// @debug ml.uv('-Msgrpl-50d,blue;3r,cc;80p'); // linear-gradient(-50deg, blue 3rem, currentColor 80%) +// @debug ml.uv('-Msgl-50d,blue;3r,cc;80p'); // linear-gradient(-50deg, blue 3rem, currentColor 80%) // @debug ml.uv('-Gdc45d,#000;0.5g,yellow'); // conic-gradient(from 45deg, #000 0.5grad, yellow) // ``` // diff --git a/packages/mlut/README.md b/packages/mlut/README.md index f83a97cb..5fe3dd25 100644 --- a/packages/mlut/README.md +++ b/packages/mlut/README.md @@ -283,7 +283,7 @@ Available [here](https://docs.mlut.style/) or can be run locally. Documentation - I hired a junior dev for my open source project. This is what happened: [RU](https://habr.com/ru/articles/962468/) ## What next? ## -- masks and multiple gradients +- multiple gradients - first-class pseudoselectors with arguments like `has()` - performance optimization - plugins for editors and IDEs with hints and autocompletion diff --git a/packages/mlut/package.json b/packages/mlut/package.json index 9e8f9299..fd9d9e73 100644 --- a/packages/mlut/package.json +++ b/packages/mlut/package.json @@ -1,7 +1,7 @@ { "name": "mlut", "version": "7.1.1", - "description": "Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity", + "description": "Tailwind CSS alternative for custom websites and creative coding", "author": "mr150", "type": "module", "license": "MIT", From ac3ecc68c437ab96e2a3cb7392b760641567f949 Mon Sep 17 00:00:00 2001 From: mr150 Date: Wed, 4 Feb 2026 20:27:59 +0300 Subject: [PATCH 4/4] chore(core): release v2.5.0 --- package-lock.json | 2 +- packages/core/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 727dd7e9..f93ec005 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18855,7 +18855,7 @@ }, "packages/core": { "name": "@mlut/core", - "version": "2.4.0", + "version": "2.5.0", "license": "MIT", "devDependencies": { "@octokit/plugin-retry": "^8.0.1", diff --git a/packages/core/package.json b/packages/core/package.json index 09be0af9..10ed0a68 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@mlut/core", - "version": "2.4.0", + "version": "2.5.0", "description": "Tailwind CSS alternative for custom websites and creative coding", "author": "mr150", "type": "module",