Skip to content

Commit 400cbb0

Browse files
mr150mr150
authored
Merge pull request #107 from mlutcss/feat/mask-utils
Feat/mask utils
2 parents f24f143 + ac3ecc6 commit 400cbb0

File tree

9 files changed

+163
-47
lines changed

9 files changed

+163
-47
lines changed

‎docs/homepage.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ Addons may contains any tools, settings and styles. Addons now at the **preview*
182182
<section class="Mb4gg">
183183

184184
## What next? ##
185-
- masks and multiple gradients
185+
- multiple gradients
186186
- first-class pseudoselectors with arguments like `has()`
187187
- performance optimization
188188
- plugins for editors and IDEs with hints and autocompletion

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@mlut/core",
3-
"version": "2.4.0",
3+
"version": "2.5.0",
44
"description": "Tailwind CSS alternative for custom websites and creative coding",
55
"author": "mr150",
66
"type": "module",

‎packages/core/src/sass/tools/functions/high/utils/_value-converters.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,11 @@
7171

7272
@if list.length($fraction) > 1 {
7373
$dividend: list.nth($fraction, 1);
74+
$is-css-function: string.index($value, '(') and string.slice($value, -1) == ')';
75+
76+
@if $is-css-function {
77+
@return $value;
78+
}
7479

7580
@if map.get($data, 'negative') {
7681
$dividend: '-' + $dividend;

‎packages/core/src/sass/tools/settings/base/_utils.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,7 @@
321321
// Usage:
322322
// ```scss
323323
// @debug ml.uv('-Gdrl-b;r,black,#ff0'); // repeating-linear-gradient(to bottom right, black, #ff0)
324-
// @debug ml.uv('-Gdl-50d,blue;3r,cc;80p'); // linear-gradient(-50deg, blue 3rem, currentColor 80%)
324+
// @debug ml.uv('-Msgl-50d,blue;3r,cc;80p'); // linear-gradient(-50deg, blue 3rem, currentColor 80%)
325325
// @debug ml.uv('-Gdc45d,#000;0.5g,yellow'); // conic-gradient(from 45deg, #000 0.5grad, yellow)
326326
// ```
327327
//

‎packages/core/src/sass/tools/settings/common/_utils.scss‎

Lines changed: 148 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,20 @@ $-sizing-kw: (
112112
);
113113

114114
$-bd-kw-links: ('border', 'line-style', 'line-width');
115+
$-radial-grad-kw: (
116+
'position',
117+
'radial-shape',
118+
'ray-size',
119+
'color-space',
120+
'hue-interpolation',
121+
'gradients',
122+
);
123+
$-conic-grad-kw: (
124+
'position',
125+
'color-space',
126+
'hue-interpolation',
127+
'gradients',
128+
);
115129

116130
//stylelint-disable
117131
$utils-db: (
@@ -748,15 +762,7 @@ $utils-db: (
748762
'Bgr': (
749763
'properties': background-repeat,
750764
'multi-list-separator': ml.$tULs1,
751-
'keywords': (
752-
'': no-repeat,
753-
'nr': no-repeat,
754-
'rx': repeat-x,
755-
'ry': repeat-y,
756-
'r': repeat,
757-
's': space,
758-
'rn': round,
759-
)
765+
'keywords': 'repeat-style',
760766
),
761767
'Bgp': (
762768
'properties': background-position,
@@ -766,10 +772,7 @@ $utils-db: (
766772
'Bgs': (
767773
'properties': background-size,
768774
'multi-list-separator': ml.$tULs1,
769-
'keywords': (
770-
'ct': contain,
771-
'cv': cover,
772-
),
775+
'keywords': 'bg-size',
773776
),
774777
'Bga': (
775778
'properties': background-attachment,
@@ -821,55 +824,31 @@ $utils-db: (
821824
'css-function': 'radial-gradient',
822825
'conversion': 'gradient',
823826
'multi-list-separator': ml.$tULs1,
824-
'keywords': (
825-
'position',
826-
'radial-shape',
827-
'ray-size',
828-
'color-space',
829-
'hue-interpolation',
830-
'gradients',
831-
),
827+
'keywords': $-radial-grad-kw,
832828
),
833829
'-Gdrr': (
834830
'properties': background-image,
835831
'transformer': 'gradient',
836832
'conversion': 'gradient',
837833
'css-function': 'repeating-radial-gradient',
838834
'multi-list-separator': ml.$tULs1,
839-
'keywords': (
840-
'position',
841-
'radial-shape',
842-
'ray-size',
843-
'color-space',
844-
'hue-interpolation',
845-
'gradients',
846-
),
835+
'keywords': $-radial-grad-kw,
847836
),
848837
'-Gdc': (
849838
'properties': background-image,
850839
'transformer': 'gradient',
851840
'css-function': 'conic-gradient',
852841
'conversion': 'gradient',
853842
'multi-list-separator': ml.$tULs1,
854-
'keywords': (
855-
'position',
856-
'color-space',
857-
'hue-interpolation',
858-
'gradients',
859-
),
843+
'keywords': $-conic-grad-kw,
860844
),
861845
'-Gdrc': (
862846
'properties': background-image,
863847
'transformer': 'gradient',
864848
'css-function': 'repeating-conic-gradient',
865849
'conversion': 'gradient',
866850
'multi-list-separator': ml.$tULs1,
867-
'keywords': (
868-
'position',
869-
'color-space',
870-
'hue-interpolation',
871-
'gradients',
872-
),
851+
'keywords': $-conic-grad-kw,
873852
),
874853

875854
// TRANSFORM
@@ -1267,6 +1246,115 @@ $utils-db: (
12671246
'conversion': 'num-percent',
12681247
),
12691248

1249+
// MASK
1250+
'Ms': (
1251+
'properties': mask,
1252+
'multi-list-separator': ml.$tULs1,
1253+
),
1254+
'Msi': (
1255+
'properties': mask-image,
1256+
'multi-list-separator': ml.$tULs1,
1257+
),
1258+
'Mscl': (
1259+
'properties': mask-clip,
1260+
'multi-list-separator': ml.$tULs1,
1261+
'keywords': ('box-ext', 'mask-clip'),
1262+
),
1263+
'Mso': (
1264+
'properties': mask-origin,
1265+
'multi-list-separator': ml.$tULs1,
1266+
'keywords': 'box-ext',
1267+
),
1268+
'Msc': (
1269+
'properties': mask-composite,
1270+
'multi-list-separator': ml.$tULs1,
1271+
'keywords': (
1272+
'a': add,
1273+
's': subtract,
1274+
'i': intersect,
1275+
'e': exclude,
1276+
),
1277+
),
1278+
'Msm': (
1279+
'properties': mask-mode,
1280+
'multi-list-separator': ml.$tULs1,
1281+
'keywords': (
1282+
'a': alpha,
1283+
'l': luminance,
1284+
'ms': match-source,
1285+
),
1286+
),
1287+
'Msp': (
1288+
'properties': mask-position,
1289+
'multi-list-separator': ml.$tULs1,
1290+
'keywords': 'position',
1291+
),
1292+
'Msr': (
1293+
'properties': mask-repeat,
1294+
'multi-list-separator': ml.$tULs1,
1295+
'keywords': 'repeat-style',
1296+
),
1297+
'Mss': (
1298+
'properties': mask-size,
1299+
'multi-list-separator': ml.$tULs1,
1300+
'keywords': 'bg-size',
1301+
),
1302+
'Mst': (
1303+
'properties': mask-type,
1304+
'keywords': (
1305+
'a': alpha,
1306+
'l': luminance,
1307+
),
1308+
),
1309+
'-Msgl': (
1310+
'properties': mask-image,
1311+
'transformer': 'gradient',
1312+
'css-function': 'linear-gradient',
1313+
'conversion': 'gradient',
1314+
'multi-list-separator': ml.$tULs1,
1315+
'keywords': ('position', 'gradients'),
1316+
),
1317+
'-Msgrpl': (
1318+
'properties': mask-image,
1319+
'transformer': 'gradient',
1320+
'conversion': 'gradient',
1321+
'css-function': 'repeating-linear-gradient',
1322+
'multi-list-separator': ml.$tULs1,
1323+
'keywords': ('position', 'gradients'),
1324+
),
1325+
'-Msgr': (
1326+
'properties': mask-image,
1327+
'transformer': 'gradient',
1328+
'css-function': 'radial-gradient',
1329+
'conversion': 'gradient',
1330+
'multi-list-separator': ml.$tULs1,
1331+
'keywords': $-radial-grad-kw,
1332+
),
1333+
'-Msgrpr': (
1334+
'properties': mask-image,
1335+
'transformer': 'gradient',
1336+
'conversion': 'gradient',
1337+
'css-function': 'repeating-radial-gradient',
1338+
'multi-list-separator': ml.$tULs1,
1339+
'keywords': $-radial-grad-kw,
1340+
),
1341+
'-Msgc': (
1342+
'properties': mask-image,
1343+
'transformer': 'gradient',
1344+
'css-function': 'conic-gradient',
1345+
'conversion': 'gradient',
1346+
'multi-list-separator': ml.$tULs1,
1347+
'keywords': $-conic-grad-kw,
1348+
),
1349+
'-Msgrpc': (
1350+
'properties': mask-image,
1351+
'transformer': 'gradient',
1352+
'css-function': 'repeating-conic-gradient',
1353+
'conversion': 'gradient',
1354+
'multi-list-separator': ml.$tULs1,
1355+
'keywords': $-conic-grad-kw,
1356+
),
1357+
12701358
// BORDER
12711359
'Bd': (
12721360
'properties': border,
@@ -1812,8 +1900,14 @@ $utils-db: (
18121900
'bb': border-box,
18131901
'cb': content-box,
18141902
'pb': padding-box,
1903+
'fb': fill-box,
1904+
'sb': stroke-box,
1905+
'vb': view-box,
18151906
't': text,
18161907
),
1908+
'mask-clip': (
1909+
'nc': no-clip,
1910+
),
18171911
'blend-mode': (
18181912
'n': normal,
18191913
'm': multiply,
@@ -1910,6 +2004,19 @@ $utils-db: (
19102004
'ic': increasing,
19112005
'dc': decreasing,
19122006
),
2007+
'repeat-style': (
2008+
'': no-repeat,
2009+
'nr': no-repeat,
2010+
'rx': repeat-x,
2011+
'ry': repeat-y,
2012+
'r': repeat,
2013+
's': space,
2014+
'rn': round,
2015+
),
2016+
'bg-size': (
2017+
'ct': contain,
2018+
'cv': cover,
2019+
),
19132020
'sizing': $-sizing-kw,
19142021
),
19152022
),

‎packages/mlut/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ Available [here](https://docs.mlut.style/) or can be run locally. Documentation
283283
- I hired a junior dev for my open source project. This is what happened: [RU](https://habr.com/ru/articles/962468/)
284284

285285
## What next? ##
286-
- masks and multiple gradients
286+
- multiple gradients
287287
- first-class pseudoselectors with arguments like `has()`
288288
- performance optimization
289289
- plugins for editors and IDEs with hints and autocompletion

‎packages/mlut/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "mlut",
33
"version": "7.1.1",
4-
"description": "Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity",
4+
"description": "Tailwind CSS alternative for custom websites and creative coding",
55
"author": "mr150",
66
"type": "module",
77
"license": "MIT",

‎test/sass/tools/functions/utils/_convert-util-value.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,10 @@ ml.$utils-cfg: map.set(
200200
('t,#007,cc', '-Gdrl'):
201201
repeating-linear-gradient(to top, #007, currentColor),
202202
),
203+
'correct CSS functions usage': (
204+
('url(img/circle.png)', 'Bgi'): url(img/circle.png),
205+
('url("img/triangle.png")', 'Bgi'): url("img/triangle.png"),
206+
),
203207
);
204208

205209
@each $test, $data in $-tests {

0 commit comments

Comments
 (0)