@symbo.ls/scratch 2.11.212 → 2.11.216

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/defaultConfig/index.js +4 -0
  3. package/dist/cjs/defaultConfig/shadow.js +26 -0
  4. package/dist/cjs/factory.js +30 -26
  5. package/dist/cjs/index.js +169 -75
  6. package/dist/cjs/set.js +209 -49
  7. package/dist/cjs/system/color.js +37 -28
  8. package/dist/cjs/system/document.js +30 -26
  9. package/dist/cjs/system/font.js +30 -26
  10. package/dist/cjs/system/index.js +155 -55
  11. package/dist/cjs/system/reset.js +30 -26
  12. package/dist/cjs/system/shadow.js +1944 -0
  13. package/dist/cjs/system/spacing.js +44 -38
  14. package/dist/cjs/system/svg.js +30 -26
  15. package/dist/cjs/system/theme.js +30 -26
  16. package/dist/cjs/system/timing.js +44 -38
  17. package/dist/cjs/system/typography.js +44 -38
  18. package/dist/cjs/transforms/index.js +104 -64
  19. package/dist/cjs/utils/color.js +26 -26
  20. package/dist/cjs/utils/index.js +44 -38
  21. package/dist/cjs/utils/sequence.js +40 -34
  22. package/dist/cjs/utils/sprite.js +30 -26
  23. package/dist/cjs/utils/var.js +34 -30
  24. package/package.json +2 -2
  25. package/src/defaultConfig/color.js +1 -2
  26. package/src/defaultConfig/index.js +1 -0
  27. package/src/defaultConfig/shadow.js +8 -0
  28. package/src/set.js +3 -1
  29. package/src/system/color.js +7 -1
  30. package/src/system/index.js +1 -0
  31. package/src/system/shadow.js +99 -0
  32. package/src/transforms/index.js +6 -11
  33. package/src/utils/sequence.js +12 -8
  34. package/src/utils/var.js +4 -4
package/dist/cjs/system/timing.js CHANGED
@@ -30,9 +30,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
30
30
  ));
31
31
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
32
32
 
33
- // ../../../domql/packages/utils/dist/cjs/key.js
33
+ // ../../node_modules/@domql/utils/dist/cjs/key.js
34
34
  var require_key = __commonJS({
35
- "../../../domql/packages/utils/dist/cjs/key.js"(exports, module2) {
35
+ "../../node_modules/@domql/utils/dist/cjs/key.js"(exports, module2) {
36
36
  "use strict";
37
37
  var __defProp2 = Object.defineProperty;
38
38
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -69,9 +69,9 @@ var require_key = __commonJS({
69
69
  }
70
70
  });
71
71
 
72
- // ../../../domql/packages/utils/dist/cjs/env.js
72
+ // ../../node_modules/@domql/utils/dist/cjs/env.js
73
73
  var require_env = __commonJS({
74
- "../../../domql/packages/utils/dist/cjs/env.js"(exports, module2) {
74
+ "../../node_modules/@domql/utils/dist/cjs/env.js"(exports, module2) {
75
75
  "use strict";
76
76
  var __defProp2 = Object.defineProperty;
77
77
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -107,9 +107,9 @@ var require_env = __commonJS({
107
107
  }
108
108
  });
109
109
 
110
- // ../../../domql/packages/utils/dist/cjs/globals.js
110
+ // ../../node_modules/@domql/utils/dist/cjs/globals.js
111
111
  var require_globals = __commonJS({
112
- "../../../domql/packages/utils/dist/cjs/globals.js"(exports, module2) {
112
+ "../../node_modules/@domql/utils/dist/cjs/globals.js"(exports, module2) {
113
113
  "use strict";
114
114
  var __defProp2 = Object.defineProperty;
115
115
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -143,9 +143,9 @@ var require_globals = __commonJS({
143
143
  }
144
144
  });
145
145
 
146
- // ../../../domql/packages/utils/dist/cjs/node.js
146
+ // ../../node_modules/@domql/utils/dist/cjs/node.js
147
147
  var require_node = __commonJS({
148
- "../../../domql/packages/utils/dist/cjs/node.js"(exports, module2) {
148
+ "../../node_modules/@domql/utils/dist/cjs/node.js"(exports, module2) {
149
149
  "use strict";
150
150
  var __defProp2 = Object.defineProperty;
151
151
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -180,9 +180,9 @@ var require_node = __commonJS({
180
180
  }
181
181
  });
182
182
 
183
- // ../../../domql/packages/utils/dist/cjs/types.js
183
+ // ../../node_modules/@domql/utils/dist/cjs/types.js
184
184
  var require_types = __commonJS({
185
- "../../../domql/packages/utils/dist/cjs/types.js"(exports, module2) {
185
+ "../../node_modules/@domql/utils/dist/cjs/types.js"(exports, module2) {
186
186
  "use strict";
187
187
  var __defProp2 = Object.defineProperty;
188
188
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -267,9 +267,9 @@ var require_types = __commonJS({
267
267
  }
268
268
  });
269
269
 
270
- // ../../../domql/packages/utils/dist/cjs/array.js
270
+ // ../../node_modules/@domql/utils/dist/cjs/array.js
271
271
  var require_array = __commonJS({
272
- "../../../domql/packages/utils/dist/cjs/array.js"(exports, module2) {
272
+ "../../node_modules/@domql/utils/dist/cjs/array.js"(exports, module2) {
273
273
  "use strict";
274
274
  var __defProp2 = Object.defineProperty;
275
275
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -366,9 +366,9 @@ var require_array = __commonJS({
366
366
  }
367
367
  });
368
368
 
369
- // ../../../domql/packages/utils/dist/cjs/string.js
369
+ // ../../node_modules/@domql/utils/dist/cjs/string.js
370
370
  var require_string = __commonJS({
371
- "../../../domql/packages/utils/dist/cjs/string.js"(exports, module2) {
371
+ "../../node_modules/@domql/utils/dist/cjs/string.js"(exports, module2) {
372
372
  "use strict";
373
373
  var __defProp2 = Object.defineProperty;
374
374
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -426,9 +426,9 @@ var require_string = __commonJS({
426
426
  }
427
427
  });
428
428
 
429
- // ../../../domql/packages/utils/dist/cjs/object.js
429
+ // ../../node_modules/@domql/utils/dist/cjs/object.js
430
430
  var require_object = __commonJS({
431
- "../../../domql/packages/utils/dist/cjs/object.js"(exports, module2) {
431
+ "../../node_modules/@domql/utils/dist/cjs/object.js"(exports, module2) {
432
432
  "use strict";
433
433
  var __defProp2 = Object.defineProperty;
434
434
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -878,9 +878,9 @@ var require_object = __commonJS({
878
878
  }
879
879
  });
880
880
 
881
- // ../../../domql/packages/utils/dist/cjs/function.js
881
+ // ../../node_modules/@domql/utils/dist/cjs/function.js
882
882
  var require_function = __commonJS({
883
- "../../../domql/packages/utils/dist/cjs/function.js"(exports, module2) {
883
+ "../../node_modules/@domql/utils/dist/cjs/function.js"(exports, module2) {
884
884
  "use strict";
885
885
  var __defProp2 = Object.defineProperty;
886
886
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -953,9 +953,9 @@ var require_function = __commonJS({
953
953
  }
954
954
  });
955
955
 
956
- // ../../../domql/packages/utils/dist/cjs/log.js
956
+ // ../../node_modules/@domql/utils/dist/cjs/log.js
957
957
  var require_log = __commonJS({
958
- "../../../domql/packages/utils/dist/cjs/log.js"(exports, module2) {
958
+ "../../node_modules/@domql/utils/dist/cjs/log.js"(exports, module2) {
959
959
  "use strict";
960
960
  var __defProp2 = Object.defineProperty;
961
961
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -994,9 +994,9 @@ var require_log = __commonJS({
994
994
  }
995
995
  });
996
996
 
997
- // ../../../domql/packages/utils/dist/cjs/cookie.js
997
+ // ../../node_modules/@domql/utils/dist/cjs/cookie.js
998
998
  var require_cookie = __commonJS({
999
- "../../../domql/packages/utils/dist/cjs/cookie.js"(exports, module2) {
999
+ "../../node_modules/@domql/utils/dist/cjs/cookie.js"(exports, module2) {
1000
1000
  "use strict";
1001
1001
  var __defProp2 = Object.defineProperty;
1002
1002
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1050,9 +1050,9 @@ var require_cookie = __commonJS({
1050
1050
  }
1051
1051
  });
1052
1052
 
1053
- // ../../../domql/packages/utils/dist/cjs/tags.js
1053
+ // ../../node_modules/@domql/utils/dist/cjs/tags.js
1054
1054
  var require_tags = __commonJS({
1055
- "../../../domql/packages/utils/dist/cjs/tags.js"(exports, module2) {
1055
+ "../../node_modules/@domql/utils/dist/cjs/tags.js"(exports, module2) {
1056
1056
  "use strict";
1057
1057
  var __defProp2 = Object.defineProperty;
1058
1058
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1215,9 +1215,9 @@ var require_tags = __commonJS({
1215
1215
  }
1216
1216
  });
1217
1217
 
1218
- // ../../../domql/packages/utils/dist/cjs/index.js
1218
+ // ../../node_modules/@domql/utils/dist/cjs/index.js
1219
1219
  var require_cjs = __commonJS({
1220
- "../../../domql/packages/utils/dist/cjs/index.js"(exports, module2) {
1220
+ "../../node_modules/@domql/utils/dist/cjs/index.js"(exports, module2) {
1221
1221
  "use strict";
1222
1222
  var __defProp2 = Object.defineProperty;
1223
1223
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1330,6 +1330,7 @@ __export(defaultConfig_exports, {
1330
1330
  MEDIA: () => MEDIA,
1331
1331
  RESET: () => RESET,
1332
1332
  SEQUENCE: () => SEQUENCE,
1333
+ SHADOW: () => SHADOW,
1333
1334
  SPACING: () => SPACING,
1334
1335
  SVG: () => SVG,
1335
1336
  SVG_DATA: () => SVG_DATA,
@@ -1452,6 +1453,9 @@ var GRADIENT = {};
1452
1453
  // src/defaultConfig/theme.js
1453
1454
  var THEME = {};
1454
1455
 
1456
+ // src/defaultConfig/shadow.js
1457
+ var SHADOW = {};
1458
+
1455
1459
  // src/defaultConfig/icons.js
1456
1460
  var ICONS = {};
1457
1461
 
@@ -1655,19 +1659,21 @@ var getSequenceValue = (value = "A", sequenceProps) => {
1655
1659
  const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
1656
1660
  let absValue = isNegative ? letterVal.slice(1) : letterVal;
1657
1661
  let mediaName = "";
1658
- if (absValue.includes("-")) {
1659
- mediaName = "-" + absValue.split("-")[1].toLowerCase();
1660
- absValue = absValue.split("-")[0];
1662
+ if (absValue.includes("_")) {
1663
+ mediaName = "_" + absValue.split("_")[1].toLowerCase();
1664
+ absValue = absValue.split("_")[0];
1661
1665
  }
1662
- const varValue = (v) => `var(${prefix}${v}${mediaName})`;
1666
+ const varValue = (v) => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v;
1663
1667
  if (absValue.includes("+")) {
1664
- const args = absValue.split("+");
1665
- const [first, second] = args;
1668
+ const [first, second] = absValue.split("+");
1666
1669
  const joint = `${varValue(first)} + ${varValue(second)}`;
1667
1670
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1671
+ } else if (absValue.includes("*")) {
1672
+ const [first, second] = absValue.split("*");
1673
+ const joint = `${varValue(first)} * ${varValue(second)}`;
1674
+ return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1668
1675
  } else if (absValue.includes("-")) {
1669
- const args = absValue.split("-");
1670
- const [first, second] = args;
1676
+ const [first, second] = absValue.split("-");
1671
1677
  const joint = `${varValue(first)} - ${varValue(second)}`;
1672
1678
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1673
1679
  }
@@ -1717,14 +1723,14 @@ var applySequenceVars = (props, mediaName, options = {}) => {
1717
1723
  let underMediaQuery = CSS_VARS2[`@media ${query}`];
1718
1724
  if (!underMediaQuery)
1719
1725
  underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
1720
- underMediaQuery[item.variable] = `var(${item.variable + "-" + mediaName})`;
1721
- CSS_VARS2[item.variable + "-" + mediaName] = value;
1726
+ underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
1727
+ CSS_VARS2[item.variable + "_" + mediaName] = value;
1722
1728
  } else {
1723
1729
  if (options.useDefault === false) {
1724
1730
  CSS_VARS2[item.variable] = value;
1725
1731
  } else {
1726
- CSS_VARS2[item.variable + "-default"] = value;
1727
- CSS_VARS2[item.variable] = `var(${item.variable + "-default"})`;
1732
+ CSS_VARS2[item.variable + "_default"] = value;
1733
+ CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
1728
1734
  }
1729
1735
  }
1730
1736
  }
package/dist/cjs/system/typography.js CHANGED
@@ -30,9 +30,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
30
30
  ));
31
31
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
32
32
 
33
- // ../../../domql/packages/utils/dist/cjs/key.js
33
+ // ../../node_modules/@domql/utils/dist/cjs/key.js
34
34
  var require_key = __commonJS({
35
- "../../../domql/packages/utils/dist/cjs/key.js"(exports, module2) {
35
+ "../../node_modules/@domql/utils/dist/cjs/key.js"(exports, module2) {
36
36
  "use strict";
37
37
  var __defProp2 = Object.defineProperty;
38
38
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -69,9 +69,9 @@ var require_key = __commonJS({
69
69
  }
70
70
  });
71
71
 
72
- // ../../../domql/packages/utils/dist/cjs/env.js
72
+ // ../../node_modules/@domql/utils/dist/cjs/env.js
73
73
  var require_env = __commonJS({
74
- "../../../domql/packages/utils/dist/cjs/env.js"(exports, module2) {
74
+ "../../node_modules/@domql/utils/dist/cjs/env.js"(exports, module2) {
75
75
  "use strict";
76
76
  var __defProp2 = Object.defineProperty;
77
77
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -107,9 +107,9 @@ var require_env = __commonJS({
107
107
  }
108
108
  });
109
109
 
110
- // ../../../domql/packages/utils/dist/cjs/globals.js
110
+ // ../../node_modules/@domql/utils/dist/cjs/globals.js
111
111
  var require_globals = __commonJS({
112
- "../../../domql/packages/utils/dist/cjs/globals.js"(exports, module2) {
112
+ "../../node_modules/@domql/utils/dist/cjs/globals.js"(exports, module2) {
113
113
  "use strict";
114
114
  var __defProp2 = Object.defineProperty;
115
115
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -143,9 +143,9 @@ var require_globals = __commonJS({
143
143
  }
144
144
  });
145
145
 
146
- // ../../../domql/packages/utils/dist/cjs/node.js
146
+ // ../../node_modules/@domql/utils/dist/cjs/node.js
147
147
  var require_node = __commonJS({
148
- "../../../domql/packages/utils/dist/cjs/node.js"(exports, module2) {
148
+ "../../node_modules/@domql/utils/dist/cjs/node.js"(exports, module2) {
149
149
  "use strict";
150
150
  var __defProp2 = Object.defineProperty;
151
151
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -180,9 +180,9 @@ var require_node = __commonJS({
180
180
  }
181
181
  });
182
182
 
183
- // ../../../domql/packages/utils/dist/cjs/types.js
183
+ // ../../node_modules/@domql/utils/dist/cjs/types.js
184
184
  var require_types = __commonJS({
185
- "../../../domql/packages/utils/dist/cjs/types.js"(exports, module2) {
185
+ "../../node_modules/@domql/utils/dist/cjs/types.js"(exports, module2) {
186
186
  "use strict";
187
187
  var __defProp2 = Object.defineProperty;
188
188
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -267,9 +267,9 @@ var require_types = __commonJS({
267
267
  }
268
268
  });
269
269
 
270
- // ../../../domql/packages/utils/dist/cjs/array.js
270
+ // ../../node_modules/@domql/utils/dist/cjs/array.js
271
271
  var require_array = __commonJS({
272
- "../../../domql/packages/utils/dist/cjs/array.js"(exports, module2) {
272
+ "../../node_modules/@domql/utils/dist/cjs/array.js"(exports, module2) {
273
273
  "use strict";
274
274
  var __defProp2 = Object.defineProperty;
275
275
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -366,9 +366,9 @@ var require_array = __commonJS({
366
366
  }
367
367
  });
368
368
 
369
- // ../../../domql/packages/utils/dist/cjs/string.js
369
+ // ../../node_modules/@domql/utils/dist/cjs/string.js
370
370
  var require_string = __commonJS({
371
- "../../../domql/packages/utils/dist/cjs/string.js"(exports, module2) {
371
+ "../../node_modules/@domql/utils/dist/cjs/string.js"(exports, module2) {
372
372
  "use strict";
373
373
  var __defProp2 = Object.defineProperty;
374
374
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -426,9 +426,9 @@ var require_string = __commonJS({
426
426
  }
427
427
  });
428
428
 
429
- // ../../../domql/packages/utils/dist/cjs/object.js
429
+ // ../../node_modules/@domql/utils/dist/cjs/object.js
430
430
  var require_object = __commonJS({
431
- "../../../domql/packages/utils/dist/cjs/object.js"(exports, module2) {
431
+ "../../node_modules/@domql/utils/dist/cjs/object.js"(exports, module2) {
432
432
  "use strict";
433
433
  var __defProp2 = Object.defineProperty;
434
434
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -878,9 +878,9 @@ var require_object = __commonJS({
878
878
  }
879
879
  });
880
880
 
881
- // ../../../domql/packages/utils/dist/cjs/function.js
881
+ // ../../node_modules/@domql/utils/dist/cjs/function.js
882
882
  var require_function = __commonJS({
883
- "../../../domql/packages/utils/dist/cjs/function.js"(exports, module2) {
883
+ "../../node_modules/@domql/utils/dist/cjs/function.js"(exports, module2) {
884
884
  "use strict";
885
885
  var __defProp2 = Object.defineProperty;
886
886
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -953,9 +953,9 @@ var require_function = __commonJS({
953
953
  }
954
954
  });
955
955
 
956
- // ../../../domql/packages/utils/dist/cjs/log.js
956
+ // ../../node_modules/@domql/utils/dist/cjs/log.js
957
957
  var require_log = __commonJS({
958
- "../../../domql/packages/utils/dist/cjs/log.js"(exports, module2) {
958
+ "../../node_modules/@domql/utils/dist/cjs/log.js"(exports, module2) {
959
959
  "use strict";
960
960
  var __defProp2 = Object.defineProperty;
961
961
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -994,9 +994,9 @@ var require_log = __commonJS({
994
994
  }
995
995
  });
996
996
 
997
- // ../../../domql/packages/utils/dist/cjs/cookie.js
997
+ // ../../node_modules/@domql/utils/dist/cjs/cookie.js
998
998
  var require_cookie = __commonJS({
999
- "../../../domql/packages/utils/dist/cjs/cookie.js"(exports, module2) {
999
+ "../../node_modules/@domql/utils/dist/cjs/cookie.js"(exports, module2) {
1000
1000
  "use strict";
1001
1001
  var __defProp2 = Object.defineProperty;
1002
1002
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1050,9 +1050,9 @@ var require_cookie = __commonJS({
1050
1050
  }
1051
1051
  });
1052
1052
 
1053
- // ../../../domql/packages/utils/dist/cjs/tags.js
1053
+ // ../../node_modules/@domql/utils/dist/cjs/tags.js
1054
1054
  var require_tags = __commonJS({
1055
- "../../../domql/packages/utils/dist/cjs/tags.js"(exports, module2) {
1055
+ "../../node_modules/@domql/utils/dist/cjs/tags.js"(exports, module2) {
1056
1056
  "use strict";
1057
1057
  var __defProp2 = Object.defineProperty;
1058
1058
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1215,9 +1215,9 @@ var require_tags = __commonJS({
1215
1215
  }
1216
1216
  });
1217
1217
 
1218
- // ../../../domql/packages/utils/dist/cjs/index.js
1218
+ // ../../node_modules/@domql/utils/dist/cjs/index.js
1219
1219
  var require_cjs = __commonJS({
1220
- "../../../domql/packages/utils/dist/cjs/index.js"(exports, module2) {
1220
+ "../../node_modules/@domql/utils/dist/cjs/index.js"(exports, module2) {
1221
1221
  "use strict";
1222
1222
  var __defProp2 = Object.defineProperty;
1223
1223
  var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -1318,6 +1318,7 @@ __export(defaultConfig_exports, {
1318
1318
  MEDIA: () => MEDIA,
1319
1319
  RESET: () => RESET,
1320
1320
  SEQUENCE: () => SEQUENCE,
1321
+ SHADOW: () => SHADOW,
1321
1322
  SPACING: () => SPACING,
1322
1323
  SVG: () => SVG,
1323
1324
  SVG_DATA: () => SVG_DATA,
@@ -1440,6 +1441,9 @@ var GRADIENT = {};
1440
1441
  // src/defaultConfig/theme.js
1441
1442
  var THEME = {};
1442
1443
 
1444
+ // src/defaultConfig/shadow.js
1445
+ var SHADOW = {};
1446
+
1443
1447
  // src/defaultConfig/icons.js
1444
1448
  var ICONS = {};
1445
1449
 
@@ -1654,19 +1658,21 @@ var getSequenceValue = (value = "A", sequenceProps) => {
1654
1658
  const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
1655
1659
  let absValue = isNegative ? letterVal.slice(1) : letterVal;
1656
1660
  let mediaName = "";
1657
- if (absValue.includes("-")) {
1658
- mediaName = "-" + absValue.split("-")[1].toLowerCase();
1659
- absValue = absValue.split("-")[0];
1661
+ if (absValue.includes("_")) {
1662
+ mediaName = "_" + absValue.split("_")[1].toLowerCase();
1663
+ absValue = absValue.split("_")[0];
1660
1664
  }
1661
- const varValue = (v) => `var(${prefix}${v}${mediaName})`;
1665
+ const varValue = (v) => startsWithDashOrLetterRegex.test(v) ? `var(${prefix}${v}${mediaName})` : v;
1662
1666
  if (absValue.includes("+")) {
1663
- const args = absValue.split("+");
1664
- const [first, second] = args;
1667
+ const [first, second] = absValue.split("+");
1665
1668
  const joint = `${varValue(first)} + ${varValue(second)}`;
1666
1669
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1670
+ } else if (absValue.includes("*")) {
1671
+ const [first, second] = absValue.split("*");
1672
+ const joint = `${varValue(first)} * ${varValue(second)}`;
1673
+ return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1667
1674
  } else if (absValue.includes("-")) {
1668
- const args = absValue.split("-");
1669
- const [first, second] = args;
1675
+ const [first, second] = absValue.split("-");
1670
1676
  const joint = `${varValue(first)} - ${varValue(second)}`;
1671
1677
  return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
1672
1678
  }
@@ -1724,14 +1730,14 @@ var applySequenceVars = (props, mediaName, options = {}) => {
1724
1730
  let underMediaQuery = CSS_VARS2[`@media ${query}`];
1725
1731
  if (!underMediaQuery)
1726
1732
  underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
1727
- underMediaQuery[item.variable] = `var(${item.variable + "-" + mediaName})`;
1728
- CSS_VARS2[item.variable + "-" + mediaName] = value;
1733
+ underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
1734
+ CSS_VARS2[item.variable + "_" + mediaName] = value;
1729
1735
  } else {
1730
1736
  if (options.useDefault === false) {
1731
1737
  CSS_VARS2[item.variable] = value;
1732
1738
  } else {
1733
- CSS_VARS2[item.variable + "-default"] = value;
1734
- CSS_VARS2[item.variable] = `var(${item.variable + "-default"})`;
1739
+ CSS_VARS2[item.variable + "_default"] = value;
1740
+ CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
1735
1741
  }
1736
1742
  }
1737
1743
  }