@symbo.ls/scratch 2.10.257 → 2.10.259

package/dist/cjs/factory.js

@@ -860,6 +860,7 @@ __export(factory_exports, {
   CSS_VARS: () => CSS_VARS,
   FACTORY: () => FACTORY,
   activateConfig: () => activateConfig,
+  default: () => factory_default,
   getActiveConfig: () => getActiveConfig,
   setActiveConfig: () => setActiveConfig
 });
@@ -1091,5 +1092,7 @@ var getActiveConfig = (def) => {
   return FACTORY[def || FACTORY.active];
 };
 var setActiveConfig = (def) => {
-  return FACTORY.active = FACTORY[def];
+  FACTORY.active = FACTORY[def];
+  return FACTORY.active;
 };
+var factory_default = CONFIG;

package/dist/cjs/index.js

@@ -952,10 +952,13 @@ __export(src_exports, {
   setTheme: () => setTheme,
   setValue: () => setValue,
   setVariables: () => setVariables,
+  splitTransition: () => splitTransition,
   transformBackgroundImage: () => transformBackgroundImage,
   transformBorder: () => transformBorder,
+  transformDuration: () => transformDuration,
   transformShadow: () => transformShadow,
   transformTextStroke: () => transformTextStroke,
+  transformTransition: () => transformTransition,
   transfromGap: () => transfromGap
 });
 module.exports = __toCommonJS(src_exports);
@@ -1434,7 +1437,8 @@ var getActiveConfig = (def) => {
   return FACTORY[def || FACTORY.active];
 };
 var setActiveConfig = (def) => {
-  return FACTORY.active = FACTORY[def];
+  FACTORY.active = FACTORY[def];
+  return FACTORY.active;
 };
 
 // src/utils/sequence.js
@@ -1650,7 +1654,7 @@ var applySequenceVars = (props, mediaName, options = {}) => {
 var import_utils7 = __toESM(require_cjs3(), 1);
 var generateSprite = (icons) => {
   let sprite = '<svg aria-hidden="true" width="0" height="0" style="position:absolute">';
-  for (let key in icons) {
+  for (const key in icons) {
     sprite += icons[key];
   }
   sprite += "</svg>";
@@ -1660,14 +1664,14 @@ var parseRootAttributes = (htmlString) => {
   if (!(0, import_utils7.isString)(htmlString)) {
     return console.warn(`parseRootAttributes: ${htmlString} is not a string`);
   }
-  let match = htmlString.match(/<svg\s+(.*?)>/);
+  const match = htmlString.match(/<svg\s+(.*?)>/);
   if (!match || !match[1]) {
     return {};
   }
-  let attrString = match[1];
-  let attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
+  const attrString = match[1];
+  const attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
   return attrs.reduce((acc, attr) => {
-    let [key, value] = attr.split("=");
+    const [key, value] = attr.split("=");
     acc[key] = value.replace(/['"]/g, "");
     return acc;
   }, {});
@@ -1681,8 +1685,8 @@ var convertSvgToSymbol = (key, code) => {
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );
-  symbol = symbol.replace(/width="[^\"]*/, "");
-  symbol = symbol.replace(/height="[^\"]*/, "");
+  symbol = symbol.replace(/width="[^"]*/, "");
+  symbol = symbol.replace(/height="[^"]*/, "");
   symbol = symbol.replace("</svg", "</symbol");
   return symbol;
 };
@@ -2016,10 +2020,10 @@ var setMediaTheme = (val, key, suffix, prefers) => {
         theme[`.${param}`] = { [param]: theme[param] };
       }
     }
-    if (theme["background"] || theme["color"] || theme["backgroundColor"]) {
+    if (theme.background || theme.color || theme.backgroundColor) {
       theme[".inversed"] = {
-        color: theme["background"] || theme["backgroundColor"],
-        background: theme["color"]
+        color: theme.background || theme.backgroundColor,
+        background: theme.color
       };
     }
   }
@@ -2320,12 +2324,12 @@ var DEF_OPTIONS = {
   document: import_globals2.document
 };
 var setSVG = (val, key) => {
+  const CONFIG2 = getActiveConfig();
   if (!val) {
     if (CONFIG2.verbose)
       console.warn("setSVG: val is not defined", key);
     return;
   }
-  const CONFIG2 = getActiveConfig();
   if (CONFIG2.useSvgSprite) {
     return convertSvgToSymbol(key, val);
   }
@@ -2335,7 +2339,7 @@ var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG2 = getActiveConfig();
   const doc = options.document || import_globals2.document;
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.SVG;
-  for (let key in LIBRARY)
+  for (const key in LIBRARY)
     lib[key] = CONFIG2.SVG[key];
   const SVGsprite = generateSprite(lib);
   if (!doc) {
@@ -2357,7 +2361,7 @@ var appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG2 = getActiveConfig();
   const doc = options.document || import_globals2.document;
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.ICONS;
-  for (let key in LIBRARY)
+  for (const key in LIBRARY)
     lib[key] = CONFIG2.ICONS[key];
   const SVGsprite = generateSprite(lib);
   if (!doc) {
@@ -2373,7 +2377,7 @@ var appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
 var import_utils24 = __toESM(require_cjs3(), 1);
 var applyReset = (reset = {}) => {
   const CONFIG2 = getActiveConfig();
-  const { CSS_VARS: CSS_VARS2, RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG2;
+  const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG2;
   if (RESET2) {
     if (RESET2[":root"]) {
       const configReset = RESET2;
@@ -2466,6 +2470,7 @@ var transformTextStroke = (stroke) => {
       return v;
     else if (getColor(v))
       return getColor(v);
+    return v;
   }).join(" ");
 };
 var transformShadow = (shadows) => shadows.split("|").map((shadow) => {
@@ -2500,6 +2505,33 @@ var transformBackgroundImage = (backgroundImage, globalTheme) => {
   }).join(" ");
 };
 var transfromGap = (gap) => (0, import_utils25.isString)(gap) && gap.split(" ").map((v) => getSpacingByKey(v, "gap").gap).join(" ");
+var transformTransition = (transition) => {
+  const arr = transition.split(" ");
+  if (!arr.length)
+    return transition;
+  return arr.map((v) => {
+    if (v.slice(0, 2) === "--")
+      return `var(${v})`;
+    if (v.length < 3 || v.includes("ms")) {
+      const mapWithSequence = getTimingByKey(v);
+      return mapWithSequence.timing || v;
+    }
+    if (getTimingFunction(v))
+      return getTimingFunction(v);
+    return v;
+  }).join(" ");
+};
+var transformDuration = (duration, props, propertyName) => {
+  if (!(0, import_utils25.isString)(duration))
+    return;
+  return duration.split(",").map((v) => getTimingByKey(v).timing || v).join(",");
+};
+var splitTransition = (transition) => {
+  const arr = transition.split(",");
+  if (!arr.length)
+    return;
+  return arr.map(transformTransition).join(",");
+};
 
 // src/set.js
 var import_utils26 = __toESM(require_cjs3(), 1);
@@ -2562,7 +2594,7 @@ var set = (recivedConfig, options = SET_OPTIONS) => {
     ...config
   } = recivedConfig;
   if (options.newConfig) {
-    FACTORY["active"] = options.newConfig;
+    FACTORY.active = options.newConfig;
     CONFIG2 = getActiveConfig(options.newConfig);
   }
   if (verbose !== void 0)

package/dist/cjs/set.js

@@ -857,35 +857,8 @@ var require_cjs3 = __commonJS({
 var set_exports = {};
 __export(set_exports, {
   VALUE_TRANSFORMERS: () => VALUE_TRANSFORMERS,
-  appendIconsSprite: () => appendIconsSprite,
-  appendSVGSprite: () => appendSVGSprite,
-  applyDocument: () => applyDocument,
-  applyHeadings: () => applyHeadings,
-  applyReset: () => applyReset,
-  applySpacingSequence: () => applySpacingSequence,
-  applyTimingSequence: () => applyTimingSequence,
-  applyTypographySequence: () => applyTypographySequence,
-  getColor: () => getColor,
-  getFontFamily: () => getFontFamily,
-  getFontSizeByKey: () => getFontSizeByKey,
-  getMediaColor: () => getMediaColor,
-  getMediaTheme: () => getMediaTheme,
-  getSpacingBasedOnRatio: () => getSpacingBasedOnRatio,
-  getSpacingByKey: () => getSpacingByKey,
-  getTheme: () => getTheme,
-  getTimingByKey: () => getTimingByKey,
-  getTimingFunction: () => getTimingFunction,
-  runThroughMedia: () => runThroughMedia,
   set: () => set,
-  setColor: () => setColor,
   setEach: () => setEach,
-  setFont: () => setFont,
-  setFontFamily: () => setFontFamily,
-  setGradient: () => setGradient,
-  setIcon: () => setIcon,
-  setMediaTheme: () => setMediaTheme,
-  setSVG: () => setSVG,
-  setTheme: () => setTheme,
   setValue: () => setValue
 });
 module.exports = __toCommonJS(set_exports);
@@ -1228,12 +1201,6 @@ var import_utils3 = __toESM(require_cjs3());
 var import_utils2 = __toESM(require_cjs3());
 
 // ../utils/src/index.js
-var toCamelCase = (str) => {
-  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
-    return index === 0 ? word.toLowerCase() : word.toUpperCase();
-  }).replaceAll(/\s+/g, "");
-};
-var toDashCase = (val) => val.replace(/[A-Z]/g, (match, offset) => (offset > 0 ? "-" : "") + match.toLowerCase()).replace(".", "-");
 var arrayzeValue = (val) => {
   if ((0, import_utils3.isString)(val))
     return val.split(" ");
@@ -1342,67 +1309,6 @@ var generateSequence = (sequenceProps) => {
   }
   return sequenceProps;
 };
-var getSequenceValue = (value = "A", sequenceProps) => {
-  const CONFIG2 = getActiveConfig();
-  const { UNIT: UNIT2 } = CONFIG2;
-  const {
-    sequence,
-    unit = UNIT2.default,
-    useVariable
-  } = sequenceProps;
-  if ((0, import_utils4.isString)(value) && value.slice(0, 2) === "--")
-    return `var(${value})`;
-  const prefix = `--${toDashCase(sequenceProps.type.replace(".", "-"))}-`;
-  const startsWithDashOrLetterRegex = /^-?[a-zA-Z]/i;
-  const startsWithDashOrLetter = startsWithDashOrLetterRegex.test(value);
-  if (value === "none" || value === "auto" || value === "unset" || value === "inherit" || value === "fit-content" || value === "min-content" || value === "max-content" || value.includes("calc") || !startsWithDashOrLetter)
-    return value;
-  const letterVal = value.toUpperCase();
-  const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
-  let absValue = isNegative ? letterVal.slice(1) : letterVal;
-  let mediaName = "";
-  if (absValue.includes("-")) {
-    mediaName = "-" + absValue.split("-")[1].toLowerCase();
-    absValue = absValue.split("-")[0];
-  }
-  const varValue = (v) => `var(${prefix}${v}${mediaName})`;
-  if (absValue.includes("+")) {
-    const args = absValue.split("+");
-    const [first, second] = args;
-    const joint = `${varValue(first)} + ${varValue(second)}`;
-    return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
-  } else if (absValue.includes("-")) {
-    const args = absValue.split("-");
-    const [first, second] = args;
-    const joint = `${varValue(first)} - ${varValue(second)}`;
-    return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
-  }
-  if (!sequence[absValue] && absValue.length === 2) {
-    if (CONFIG2.verbose)
-      console.warn(absValue, "- value is not found because `subSequence` is set to false");
-    absValue = absValue.slice(0, 1);
-  }
-  if (useVariable || CONFIG2.useVariable) {
-    const varValue2 = `var(${prefix}${absValue}${mediaName})`;
-    return isNegative ? `calc(${varValue2} * -1)` : varValue2;
-  }
-  const sequenceItem = sequence ? sequence[absValue] : null;
-  if (!sequenceItem)
-    return console.warn("can't find", sequence, absValue);
-  if (unit === "ms" || unit === "s") {
-    return isNegative + sequenceItem.val + unit;
-  }
-  return isNegative + sequenceItem.scaling + unit;
-};
-var getSequenceValuePropertyPair = (value, propertyName, sequenceProps) => {
-  if (typeof value !== "string") {
-    console.warn(propertyName, value, "is not a string");
-    return {};
-  }
-  if (value === "-" || value === "")
-    return {};
-  return { [propertyName]: getSequenceValue(value, sequenceProps) };
-};
 var findHeadingLetter = (h1Matches, index) => numToLetterMap[h1Matches - index];
 var findHeadings = (propertyNames) => {
   const { h1Matches, sequence } = propertyNames;
@@ -1446,26 +1352,18 @@ var applySequenceVars = (props, mediaName, options = {}) => {
 
 // src/utils/sprite.js
 var import_utils7 = __toESM(require_cjs3(), 1);
-var generateSprite = (icons) => {
-  let sprite = '<svg aria-hidden="true" width="0" height="0" style="position:absolute">';
-  for (let key in icons) {
-    sprite += icons[key];
-  }
-  sprite += "</svg>";
-  return sprite;
-};
 var parseRootAttributes = (htmlString) => {
   if (!(0, import_utils7.isString)(htmlString)) {
     return console.warn(`parseRootAttributes: ${htmlString} is not a string`);
   }
-  let match = htmlString.match(/<svg\s+(.*?)>/);
+  const match = htmlString.match(/<svg\s+(.*?)>/);
   if (!match || !match[1]) {
     return {};
   }
-  let attrString = match[1];
-  let attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
+  const attrString = match[1];
+  const attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
   return attrs.reduce((acc, attr) => {
-    let [key, value] = attr.split("=");
+    const [key, value] = attr.split("=");
     acc[key] = value.replace(/['"]/g, "");
     return acc;
   }, {});
@@ -1479,8 +1377,8 @@ var convertSvgToSymbol = (key, code) => {
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );
-  symbol = symbol.replace(/width="[^\"]*/, "");
-  symbol = symbol.replace(/height="[^\"]*/, "");
+  symbol = symbol.replace(/width="[^"]*/, "");
+  symbol = symbol.replace(/height="[^"]*/, "");
   symbol = symbol.replace("</svg", "</symbol");
   return symbol;
 };
@@ -1538,41 +1436,6 @@ var getColor = (value, key) => {
   } else
     return CONFIG2.useVariable ? `var(${val.var})` : val.value;
 };
-var getMediaColor = (value, globalTheme) => {
-  const CONFIG2 = getActiveConfig();
-  if (!globalTheme)
-    globalTheme = CONFIG2.globalTheme;
-  if (!(0, import_utils8.isString)(value)) {
-    if (CONFIG2.verbose)
-      console.warn(value, "- type for color is not valid");
-    return;
-  }
-  if (value.slice(0, 2) === "--")
-    return `var(${value})`;
-  const [name] = (0, import_utils8.isArray)(value) ? value : value.split(" ");
-  const { COLOR: COLOR2, GRADIENT: GRADIENT2 } = CONFIG2;
-  const val = COLOR2[name] || GRADIENT2[name];
-  const isObj = (0, import_utils8.isObject)(val);
-  if (isObj && val.value)
-    return getColor(value, `@${globalTheme}`);
-  else if (isObj) {
-    if (globalTheme)
-      return getColor(value, `@${globalTheme}`);
-    else {
-      const obj = {};
-      for (const mediaName in val) {
-        const query = CONFIG2.MEDIA[mediaName.slice(1)];
-        const media = `@media screen and ${query}`;
-        obj[media] = getColor(value, mediaName);
-      }
-      return obj;
-    }
-  } else {
-    if (CONFIG2.verbose)
-      console.warn("Can't find color", value);
-    return value;
-  }
-};
 var setColor = (val, key, suffix) => {
   const CONFIG2 = getActiveConfig();
   if ((0, import_utils8.isString)(val) && val.slice(0, 2) === "--")
@@ -1781,10 +1644,10 @@ var setMediaTheme = (val, key, suffix, prefers) => {
         theme[`.${param}`] = { [param]: theme[param] };
       }
     }
-    if (theme["background"] || theme["color"] || theme["backgroundColor"]) {
+    if (theme.background || theme.color || theme.backgroundColor) {
       theme[".inversed"] = {
-        color: theme["background"] || theme["backgroundColor"],
-        background: theme["color"]
+        color: theme.background || theme.backgroundColor,
+        background: theme.color
       };
     }
   }
@@ -1853,11 +1716,6 @@ var setFont = (val, key) => {
   const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
   return { var: CSSvar, value: val, fontFace };
 };
-var getFontFamily = (key, factory) => {
-  const CONFIG2 = getActiveConfig();
-  const { FONT_FAMILY: FONT_FAMILY2 } = CONFIG2;
-  return getDefaultOrFirstKey(factory || FONT_FAMILY2, key);
-};
 var setFontFamily = (val, key) => {
   const CONFIG2 = getActiveConfig();
   const { FONT_FAMILY: FONT_FAMILY2, FONT_FAMILY_TYPES: FONT_FAMILY_TYPES2 } = CONFIG2;
@@ -1930,15 +1788,6 @@ var applyTypographySequence = () => {
   applySequenceVars(TYPOGRAPHY2);
   runThroughMedia(TYPOGRAPHY2);
 };
-var getFontSizeByKey = (value) => {
-  const CONFIG2 = getActiveConfig();
-  const { TYPOGRAPHY: TYPOGRAPHY2 } = CONFIG2;
-  return getSequenceValuePropertyPair(
-    value,
-    "fontSize",
-    TYPOGRAPHY2
-  );
-};
 
 // src/system/spacing.js
 var import_utils17 = __toESM(require_cjs3(), 1);
@@ -1973,76 +1822,6 @@ var applySpacingSequence = () => {
   applySequenceVars(SPACING2);
   runThroughMedia2(SPACING2);
 };
-var getSequence = (sequenceProps) => {
-  const CONFIG2 = getActiveConfig();
-  const { SPACING: SPACING2 } = CONFIG2;
-  if (!sequenceProps)
-    return SPACING2;
-  const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
-  return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
-};
-var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
-  const sequence = getSequence(sequenceProps);
-  const stack = arrayzeValue(value);
-  if (!stack)
-    return;
-  if ((0, import_utils17.isString)(value) && value.includes("calc")) {
-    return { [propertyName]: value };
-  }
-  if (stack.length > 1) {
-    let suffix = "";
-    if (propertyName === "borderWidth") {
-      propertyName = "border";
-      suffix = "Width";
-    }
-    const directions = {
-      2: ["Block", "Inline"],
-      3: ["BlockStart", "Inline", "BlockEnd"],
-      4: ["BlockStart", "InlineEnd", "BlockEnd", "InlineStart"]
-    };
-    const wrapSequenceValueByDirection = (direction, i) => getSequenceValuePropertyPair(
-      stack[i],
-      propertyName + direction + suffix,
-      sequence
-    );
-    return directions[stack.length].map((dir, key) => wrapSequenceValueByDirection(dir, key));
-  }
-  return getSequenceValuePropertyPair(
-    value,
-    propertyName,
-    sequence
-  );
-};
-var getSpacingBasedOnRatio = (props, propertyName, val) => {
-  const CONFIG2 = getActiveConfig();
-  const { SPACING: SPACING2 } = CONFIG2;
-  const { spacingRatio, unit } = props;
-  const value = val || props[propertyName];
-  if (spacingRatio) {
-    let sequenceProps = SPACING2[spacingRatio];
-    if (!sequenceProps) {
-      const { type, base, range, subSequence } = SPACING2;
-      sequenceProps = SPACING2[spacingRatio] = (0, import_utils17.merge)({
-        ratio: spacingRatio,
-        type: type + "-" + spacingRatio,
-        unit,
-        sequence: {},
-        scales: {},
-        templates: {},
-        vars: {}
-      }, {
-        base,
-        range,
-        subSequence,
-        ratio: SPACING2.ratio,
-        unit: SPACING2.unit
-      });
-    }
-    applySequenceVars(sequenceProps, null, { useDefault: false });
-    return getSpacingByKey(value, propertyName, sequenceProps);
-  }
-  return getSpacingByKey(value, propertyName);
-};
 
 // src/system/timing.js
 var applyTimingSequence = () => {
@@ -2051,20 +1830,6 @@ var applyTimingSequence = () => {
   generateSequence(TIMING2);
   applySequenceVars(TIMING2);
 };
-var getTimingFunction = (value) => {
-  const CONFIG2 = getActiveConfig();
-  const { TIMING: TIMING2 } = CONFIG2;
-  return TIMING2[value] || TIMING2[toCamelCase(value)] || value;
-};
-var getTimingByKey = (value, property = "timing") => {
-  const CONFIG2 = getActiveConfig();
-  const { TIMING: TIMING2 } = CONFIG2;
-  return getSequenceValuePropertyPair(
-    value,
-    property,
-    TIMING2
-  );
-};
 
 // src/system/document.js
 var import_utils21 = __toESM(require_cjs3(), 1);
@@ -2081,36 +1846,18 @@ var applyDocument = () => {
 
 // src/system/svg.js
 var import_globals2 = __toESM(require_cjs(), 1);
-var DEF_OPTIONS = {
-  document: import_globals2.document
-};
 var setSVG = (val, key) => {
+  const CONFIG2 = getActiveConfig();
   if (!val) {
     if (CONFIG2.verbose)
       console.warn("setSVG: val is not defined", key);
     return;
   }
-  const CONFIG2 = getActiveConfig();
   if (CONFIG2.useSvgSprite) {
     return convertSvgToSymbol(key, val);
   }
   return val;
 };
-var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
-  const CONFIG2 = getActiveConfig();
-  const doc = options.document || import_globals2.document;
-  const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.SVG;
-  for (let key in LIBRARY)
-    lib[key] = CONFIG2.SVG[key];
-  const SVGsprite = generateSprite(lib);
-  if (!doc) {
-    console.warn("To append SVG sprites it should be run in browser environment");
-    return SVGsprite;
-  }
-  const svgSpriteDOM = doc.createElement("template");
-  svgSpriteDOM.innerHTML = SVGsprite;
-  doc.body.appendChild(svgSpriteDOM.content);
-};
 var setIcon = (val, key) => {
   const CONFIG2 = getActiveConfig();
   if (CONFIG2.useIconSprite) {
@@ -2118,27 +1865,12 @@ var setIcon = (val, key) => {
   }
   return val;
 };
-var appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
-  const CONFIG2 = getActiveConfig();
-  const doc = options.document || import_globals2.document;
-  const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.ICONS;
-  for (let key in LIBRARY)
-    lib[key] = CONFIG2.ICONS[key];
-  const SVGsprite = generateSprite(lib);
-  if (!doc) {
-    console.warn("To append SVG Icon sprites it should be run in browser environment");
-    return SVGsprite;
-  }
-  const iconsSpriteDOM = doc.createElement("template");
-  iconsSpriteDOM.innerHTML = SVGsprite;
-  doc.body.appendChild(iconsSpriteDOM.content);
-};
 
 // src/system/reset.js
 var import_utils24 = __toESM(require_cjs3(), 1);
 var applyReset = (reset = {}) => {
   const CONFIG2 = getActiveConfig();
-  const { CSS_VARS: CSS_VARS2, RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG2;
+  const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG2;
   if (RESET2) {
     if (RESET2[":root"]) {
       const configReset = RESET2;
@@ -2254,7 +1986,7 @@ var set = (recivedConfig, options = SET_OPTIONS) => {
     ...config
   } = recivedConfig;
   if (options.newConfig) {
-    FACTORY["active"] = options.newConfig;
+    FACTORY.active = options.newConfig;
     CONFIG2 = getActiveConfig(options.newConfig);
   }
   if (verbose !== void 0)

package/dist/cjs/system/index.js

@@ -1444,7 +1444,7 @@ var applySequenceVars = (props, mediaName, options = {}) => {
 var import_utils7 = __toESM(require_cjs3(), 1);
 var generateSprite = (icons) => {
   let sprite = '<svg aria-hidden="true" width="0" height="0" style="position:absolute">';
-  for (let key in icons) {
+  for (const key in icons) {
     sprite += icons[key];
   }
   sprite += "</svg>";
@@ -1454,14 +1454,14 @@ var parseRootAttributes = (htmlString) => {
   if (!(0, import_utils7.isString)(htmlString)) {
     return console.warn(`parseRootAttributes: ${htmlString} is not a string`);
   }
-  let match = htmlString.match(/<svg\s+(.*?)>/);
+  const match = htmlString.match(/<svg\s+(.*?)>/);
   if (!match || !match[1]) {
     return {};
   }
-  let attrString = match[1];
-  let attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
+  const attrString = match[1];
+  const attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
   return attrs.reduce((acc, attr) => {
-    let [key, value] = attr.split("=");
+    const [key, value] = attr.split("=");
     acc[key] = value.replace(/['"]/g, "");
     return acc;
   }, {});
@@ -1475,8 +1475,8 @@ var convertSvgToSymbol = (key, code) => {
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );
-  symbol = symbol.replace(/width="[^\"]*/, "");
-  symbol = symbol.replace(/height="[^\"]*/, "");
+  symbol = symbol.replace(/width="[^"]*/, "");
+  symbol = symbol.replace(/height="[^"]*/, "");
   symbol = symbol.replace("</svg", "</symbol");
   return symbol;
 };
@@ -1777,10 +1777,10 @@ var setMediaTheme = (val, key, suffix, prefers) => {
         theme[`.${param}`] = { [param]: theme[param] };
       }
     }
-    if (theme["background"] || theme["color"] || theme["backgroundColor"]) {
+    if (theme.background || theme.color || theme.backgroundColor) {
       theme[".inversed"] = {
-        color: theme["background"] || theme["backgroundColor"],
-        background: theme["color"]
+        color: theme.background || theme.backgroundColor,
+        background: theme.color
       };
     }
   }
@@ -2081,12 +2081,12 @@ var DEF_OPTIONS = {
   document: import_globals2.document
 };
 var setSVG = (val, key) => {
+  const CONFIG2 = getActiveConfig();
   if (!val) {
     if (CONFIG2.verbose)
       console.warn("setSVG: val is not defined", key);
     return;
   }
-  const CONFIG2 = getActiveConfig();
   if (CONFIG2.useSvgSprite) {
     return convertSvgToSymbol(key, val);
   }
@@ -2096,7 +2096,7 @@ var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG2 = getActiveConfig();
   const doc = options.document || import_globals2.document;
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.SVG;
-  for (let key in LIBRARY)
+  for (const key in LIBRARY)
     lib[key] = CONFIG2.SVG[key];
   const SVGsprite = generateSprite(lib);
   if (!doc) {
@@ -2118,7 +2118,7 @@ var appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG2 = getActiveConfig();
   const doc = options.document || import_globals2.document;
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.ICONS;
-  for (let key in LIBRARY)
+  for (const key in LIBRARY)
     lib[key] = CONFIG2.ICONS[key];
   const SVGsprite = generateSprite(lib);
   if (!doc) {
@@ -2134,7 +2134,7 @@ var appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
 var import_utils24 = __toESM(require_cjs3(), 1);
 var applyReset = (reset = {}) => {
   const CONFIG2 = getActiveConfig();
-  const { CSS_VARS: CSS_VARS2, RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG2;
+  const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG2;
   if (RESET2) {
     if (RESET2[":root"]) {
       const configReset = RESET2;

package/dist/cjs/system/reset.js

@@ -1174,7 +1174,7 @@ var import_globals2 = __toESM(require_cjs(), 1);
 // src/system/reset.js
 var applyReset = (reset = {}) => {
   const CONFIG2 = getActiveConfig();
-  const { CSS_VARS: CSS_VARS2, RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG2;
+  const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY2, DOCUMENT: DOCUMENT2 } = CONFIG2;
   if (RESET2) {
     if (RESET2[":root"]) {
       const configReset = RESET2;

package/dist/cjs/system/svg.js

@@ -1105,7 +1105,7 @@ var import_utils6 = __toESM(require_cjs3(), 1);
 var import_utils7 = __toESM(require_cjs3(), 1);
 var generateSprite = (icons) => {
   let sprite = '<svg aria-hidden="true" width="0" height="0" style="position:absolute">';
-  for (let key in icons) {
+  for (const key in icons) {
     sprite += icons[key];
   }
   sprite += "</svg>";
@@ -1115,14 +1115,14 @@ var parseRootAttributes = (htmlString) => {
   if (!(0, import_utils7.isString)(htmlString)) {
     return console.warn(`parseRootAttributes: ${htmlString} is not a string`);
   }
-  let match = htmlString.match(/<svg\s+(.*?)>/);
+  const match = htmlString.match(/<svg\s+(.*?)>/);
   if (!match || !match[1]) {
     return {};
   }
-  let attrString = match[1];
-  let attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
+  const attrString = match[1];
+  const attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
   return attrs.reduce((acc, attr) => {
-    let [key, value] = attr.split("=");
+    const [key, value] = attr.split("=");
     acc[key] = value.replace(/['"]/g, "");
     return acc;
   }, {});
@@ -1136,8 +1136,8 @@ var convertSvgToSymbol = (key, code) => {
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );
-  symbol = symbol.replace(/width="[^\"]*/, "");
-  symbol = symbol.replace(/height="[^\"]*/, "");
+  symbol = symbol.replace(/width="[^"]*/, "");
+  symbol = symbol.replace(/height="[^"]*/, "");
   symbol = symbol.replace("</svg", "</symbol");
   return symbol;
 };
@@ -1147,12 +1147,12 @@ var DEF_OPTIONS = {
   document: import_globals2.document
 };
 var setSVG = (val, key) => {
+  const CONFIG2 = getActiveConfig();
   if (!val) {
     if (CONFIG2.verbose)
       console.warn("setSVG: val is not defined", key);
     return;
   }
-  const CONFIG2 = getActiveConfig();
   if (CONFIG2.useSvgSprite) {
     return convertSvgToSymbol(key, val);
   }
@@ -1162,7 +1162,7 @@ var appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG2 = getActiveConfig();
   const doc = options.document || import_globals2.document;
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.SVG;
-  for (let key in LIBRARY)
+  for (const key in LIBRARY)
     lib[key] = CONFIG2.SVG[key];
   const SVGsprite = generateSprite(lib);
   if (!doc) {
@@ -1184,7 +1184,7 @@ var appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG2 = getActiveConfig();
   const doc = options.document || import_globals2.document;
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG2.ICONS;
-  for (let key in LIBRARY)
+  for (const key in LIBRARY)
     lib[key] = CONFIG2.ICONS[key];
   const SVGsprite = generateSprite(lib);
   if (!doc) {

package/dist/cjs/system/theme.js

@@ -1348,10 +1348,10 @@ var setMediaTheme = (val, key, suffix, prefers) => {
         theme[`.${param}`] = { [param]: theme[param] };
       }
     }
-    if (theme["background"] || theme["color"] || theme["backgroundColor"]) {
+    if (theme.background || theme.color || theme.backgroundColor) {
       theme[".inversed"] = {
-        color: theme["background"] || theme["backgroundColor"],
-        background: theme["color"]
+        color: theme.background || theme.backgroundColor,
+        background: theme.color
       };
     }
   }

package/dist/cjs/transforms/index.js

@@ -856,10 +856,13 @@ var require_cjs3 = __commonJS({
 // src/transforms/index.js
 var transforms_exports = {};
 __export(transforms_exports, {
+  splitTransition: () => splitTransition,
   transformBackgroundImage: () => transformBackgroundImage,
   transformBorder: () => transformBorder,
+  transformDuration: () => transformDuration,
   transformShadow: () => transformShadow,
   transformTextStroke: () => transformTextStroke,
+  transformTransition: () => transformTransition,
   transfromGap: () => transfromGap
 });
 module.exports = __toCommonJS(transforms_exports);
@@ -1140,6 +1143,11 @@ var import_utils3 = __toESM(require_cjs3());
 var import_utils2 = __toESM(require_cjs3());
 
 // ../utils/src/index.js
+var toCamelCase = (str) => {
+  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
+    return index === 0 ? word.toLowerCase() : word.toUpperCase();
+  }).replaceAll(/\s+/g, "");
+};
 var toDashCase = (val) => val.replace(/[A-Z]/g, (match, offset) => (offset > 0 ? "-" : "") + match.toLowerCase()).replace(".", "-");
 var arrayzeValue = (val) => {
   if ((0, import_utils3.isString)(val))
@@ -1458,6 +1466,22 @@ var getSpacingByKey = (value, propertyName = "padding", sequenceProps) => {
   );
 };
 
+// src/system/timing.js
+var getTimingFunction = (value) => {
+  const CONFIG2 = getActiveConfig();
+  const { TIMING: TIMING2 } = CONFIG2;
+  return TIMING2[value] || TIMING2[toCamelCase(value)] || value;
+};
+var getTimingByKey = (value, property = "timing") => {
+  const CONFIG2 = getActiveConfig();
+  const { TIMING: TIMING2 } = CONFIG2;
+  return getSequenceValuePropertyPair(
+    value,
+    property,
+    TIMING2
+  );
+};
+
 // src/system/document.js
 var import_utils21 = __toESM(require_cjs3(), 1);
 
@@ -1504,6 +1528,7 @@ var transformTextStroke = (stroke) => {
       return v;
     else if (getColor(v))
       return getColor(v);
+    return v;
   }).join(" ");
 };
 var transformShadow = (shadows) => shadows.split("|").map((shadow) => {
@@ -1538,3 +1563,30 @@ var transformBackgroundImage = (backgroundImage, globalTheme) => {
   }).join(" ");
 };
 var transfromGap = (gap) => (0, import_utils25.isString)(gap) && gap.split(" ").map((v) => getSpacingByKey(v, "gap").gap).join(" ");
+var transformTransition = (transition) => {
+  const arr = transition.split(" ");
+  if (!arr.length)
+    return transition;
+  return arr.map((v) => {
+    if (v.slice(0, 2) === "--")
+      return `var(${v})`;
+    if (v.length < 3 || v.includes("ms")) {
+      const mapWithSequence = getTimingByKey(v);
+      return mapWithSequence.timing || v;
+    }
+    if (getTimingFunction(v))
+      return getTimingFunction(v);
+    return v;
+  }).join(" ");
+};
+var transformDuration = (duration, props, propertyName) => {
+  if (!(0, import_utils25.isString)(duration))
+    return;
+  return duration.split(",").map((v) => getTimingByKey(v).timing || v).join(",");
+};
+var splitTransition = (transition) => {
+  const arr = transition.split(",");
+  if (!arr.length)
+    return;
+  return arr.map(transformTransition).join(",");
+};

package/dist/cjs/utils/index.js

@@ -1522,7 +1522,7 @@ var applySequenceVars = (props, mediaName, options = {}) => {
 var import_utils7 = __toESM(require_cjs3(), 1);
 var generateSprite = (icons) => {
   let sprite = '<svg aria-hidden="true" width="0" height="0" style="position:absolute">';
-  for (let key in icons) {
+  for (const key in icons) {
     sprite += icons[key];
   }
   sprite += "</svg>";
@@ -1532,14 +1532,14 @@ var parseRootAttributes = (htmlString) => {
   if (!(0, import_utils7.isString)(htmlString)) {
     return console.warn(`parseRootAttributes: ${htmlString} is not a string`);
   }
-  let match = htmlString.match(/<svg\s+(.*?)>/);
+  const match = htmlString.match(/<svg\s+(.*?)>/);
   if (!match || !match[1]) {
     return {};
   }
-  let attrString = match[1];
-  let attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
+  const attrString = match[1];
+  const attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
   return attrs.reduce((acc, attr) => {
-    let [key, value] = attr.split("=");
+    const [key, value] = attr.split("=");
     acc[key] = value.replace(/['"]/g, "");
     return acc;
   }, {});
@@ -1553,8 +1553,8 @@ var convertSvgToSymbol = (key, code) => {
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );
-  symbol = symbol.replace(/width="[^\"]*/, "");
-  symbol = symbol.replace(/height="[^\"]*/, "");
+  symbol = symbol.replace(/width="[^"]*/, "");
+  symbol = symbol.replace(/height="[^"]*/, "");
   symbol = symbol.replace("</svg", "</symbol");
   return symbol;
 };

package/dist/cjs/utils/sprite.js

@@ -863,7 +863,7 @@ module.exports = __toCommonJS(sprite_exports);
 var import_utils = __toESM(require_cjs3(), 1);
 var generateSprite = (icons) => {
   let sprite = '<svg aria-hidden="true" width="0" height="0" style="position:absolute">';
-  for (let key in icons) {
+  for (const key in icons) {
     sprite += icons[key];
   }
   sprite += "</svg>";
@@ -873,14 +873,14 @@ var parseRootAttributes = (htmlString) => {
   if (!(0, import_utils.isString)(htmlString)) {
     return console.warn(`parseRootAttributes: ${htmlString} is not a string`);
   }
-  let match = htmlString.match(/<svg\s+(.*?)>/);
+  const match = htmlString.match(/<svg\s+(.*?)>/);
   if (!match || !match[1]) {
     return {};
   }
-  let attrString = match[1];
-  let attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
+  const attrString = match[1];
+  const attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
   return attrs.reduce((acc, attr) => {
-    let [key, value] = attr.split("=");
+    const [key, value] = attr.split("=");
     acc[key] = value.replace(/['"]/g, "");
     return acc;
   }, {});
@@ -894,8 +894,8 @@ var convertSvgToSymbol = (key, code) => {
     "<svg",
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   );
-  symbol = symbol.replace(/width="[^\"]*/, "");
-  symbol = symbol.replace(/height="[^\"]*/, "");
+  symbol = symbol.replace(/width="[^"]*/, "");
+  symbol = symbol.replace(/height="[^"]*/, "");
   symbol = symbol.replace("</svg", "</symbol");
   return symbol;
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/scratch",
   "description": "Φ / CSS framework and methodology.",
   "author": "symbo.ls",
-  "version": "2.10.257",
+  "version": "2.10.259",
   "files": [
     "src",
     "dist"
@@ -32,5 +32,5 @@
   "peerDependencies": {
     "@emotion/css": "^11.5.0"
   },
-  "gitHead": "3c16c123fa0b6cf00a16e2178bbbfd1049d4c0cc"
+  "gitHead": "c454826279438617c85a5f8d8e7b3a6938d94dea"
 }

package/src/factory.js

@@ -33,5 +33,8 @@ export const getActiveConfig = (def) => {
 }
 
 export const setActiveConfig = (def) => {
-  return FACTORY.active = FACTORY[def]
+  FACTORY.active = FACTORY[def]
+  return FACTORY.active
 }
+
+export default CONFIG

package/src/set.js

@@ -90,10 +90,11 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
     useIconSprite,
     globalTheme,
     useDocumentTheme,
-    ...config } = recivedConfig
-  
+    ...config
+  } = recivedConfig
+
   if (options.newConfig) {
-    FACTORY['active'] = options.newConfig
+    FACTORY.active = options.newConfig
     CONFIG = getActiveConfig(options.newConfig)
   }
 
@@ -119,5 +120,3 @@ export const set = (recivedConfig, options = SET_OPTIONS) => {
 
   return CONFIG
 }
-
-export * from './system'

package/src/system/color.js

@@ -37,7 +37,6 @@ export const getColor = (value, key) => {
     else if (CONFIG.verbose) console.warn(value, ' - does not have ', key)
   }
 
-
   // TODO: support variables
   // if (alpha) return `rgba(var(${val[shade || ''].var}), ${modifier})`
 

package/src/system/reset.js

@@ -6,7 +6,7 @@ import { getMediaTheme } from '.'
 
 export const applyReset = (reset = {}) => {
   const CONFIG = getActiveConfig()
-  const { CSS_VARS, RESET, TYPOGRAPHY, DOCUMENT } = CONFIG
+  const { RESET, TYPOGRAPHY, DOCUMENT } = CONFIG
   if (RESET) {
     if (RESET[':root']) {
       const configReset = RESET

package/src/system/svg.js

@@ -1,19 +1,19 @@
 'use strict'
 
 import { document } from '@domql/globals'
-import { generateSprite, convertSvgToSymbol } from "../utils"
+import { generateSprite, convertSvgToSymbol } from '../utils'
 import { getActiveConfig } from '../factory.js'
 
 const DEF_OPTIONS = {
-  document: document
+  document
 }
 
 export const setSVG = (val, key) => {
+  const CONFIG = getActiveConfig()
   if (!val) {
     if (CONFIG.verbose) console.warn('setSVG: val is not defined', key)
     return
   }
-  const CONFIG = getActiveConfig()
   if (CONFIG.useSvgSprite) {
     return convertSvgToSymbol(key, val)
   } return val
@@ -24,14 +24,14 @@ export const appendSVGSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const doc = options.document || document
 
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG.SVG
-  for (let key in LIBRARY) lib[key] = CONFIG.SVG[key]
-  
+  for (const key in LIBRARY) lib[key] = CONFIG.SVG[key]
+
   const SVGsprite = generateSprite(lib)
   if (!doc) {
     console.warn('To append SVG sprites it should be run in browser environment')
     return SVGsprite
   }
-  
+
   const svgSpriteDOM = doc.createElement('template')
   svgSpriteDOM.innerHTML = SVGsprite
   doc.body.appendChild(svgSpriteDOM.content)
@@ -47,10 +47,10 @@ export const setIcon = (val, key) => {
 export const appendIconsSprite = (LIBRARY, options = DEF_OPTIONS) => {
   const CONFIG = getActiveConfig()
   const doc = options.document || document
-  
+
   const lib = Object.keys(LIBRARY).length ? {} : CONFIG.ICONS
-  for (let key in LIBRARY) lib[key] = CONFIG.ICONS[key]
-  
+  for (const key in LIBRARY) lib[key] = CONFIG.ICONS[key]
+
   const SVGsprite = generateSprite(lib)
   if (!doc) {
     console.warn('To append SVG Icon sprites it should be run in browser environment')

package/src/system/theme.js

@@ -168,10 +168,10 @@ export const setMediaTheme = (val, key, suffix, prefers) => {
       }
     }
 
-    if (theme['background'] || theme['color'] || theme['backgroundColor']) {
+    if (theme.background || theme.color || theme.backgroundColor) {
       theme['.inversed'] = {
-        color: theme['background'] || theme['backgroundColor'],
-        background: theme['color']
+        color: theme.background || theme.backgroundColor,
+        background: theme.color
       }
     }
   }

package/src/transforms/index.js

@@ -1,8 +1,14 @@
 'use strict'
 
 import { isString } from '@domql/utils'
-import { getActiveConfig } from "../factory"
-import { getSpacingByKey, getColor, getMediaColor } from "../system"
+import { getActiveConfig } from '../factory'
+import {
+  getSpacingByKey,
+  getColor,
+  getMediaColor,
+  getTimingByKey,
+  getTimingFunction
+} from '../system'
 
 const isBorderStyle = str => [
   'none',
@@ -35,6 +41,7 @@ export const transformTextStroke = stroke => {
     if (v.slice(0, 2) === '--') return `var(${v})`
     if (v.includes('px')) return v
     else if (getColor(v)) return getColor(v)
+    return v
   }).join(' ')
 }
 
@@ -59,8 +66,7 @@ export const transformBackgroundImage = (backgroundImage, globalTheme) => {
       return {
         backgroundImage: getMediaColor(backgroundImage, globalTheme || CONFIG.globalTheme)
       }
-    }
-    else if (v.includes('/') || v.includes('http')) return `url(${v})`
+    } else if (v.includes('/') || v.includes('http')) return `url(${v})`
     return v
   }).join(' ')
 }
@@ -68,3 +74,30 @@ export const transformBackgroundImage = (backgroundImage, globalTheme) => {
 export const transfromGap = gap => isString(gap) && (
   gap.split(' ').map(v => getSpacingByKey(v, 'gap').gap).join(' ')
 )
+
+export const transformTransition = transition => {
+  const arr = transition.split(' ')
+
+  if (!arr.length) return transition
+
+  return arr.map(v => {
+    if (v.slice(0, 2) === '--') return `var(${v})`
+    if (v.length < 3 || v.includes('ms')) {
+      const mapWithSequence = getTimingByKey(v)
+      return mapWithSequence.timing || v
+    }
+    if (getTimingFunction(v)) return getTimingFunction(v)
+    return v
+  }).join(' ')
+}
+
+export const transformDuration = (duration, props, propertyName) => {
+  if (!isString(duration)) return
+  return duration.split(',').map(v => getTimingByKey(v).timing || v).join(',')
+}
+
+export const splitTransition = transition => {
+  const arr = transition.split(',')
+  if (!arr.length) return
+  return arr.map(transformTransition).join(',')
+}

package/src/utils/index.js

@@ -5,4 +5,4 @@ export * from './theme.js'
 export * from './font.js'
 export * from './sequence.js'
 export * from './var.js'
-export * from './sprite.js'
+export * from './sprite.js'

package/src/utils/sprite.js

@@ -6,11 +6,11 @@ export const generateSprite = (icons) => {
   let sprite =
     '<svg aria-hidden="true" width="0" height="0" style="position:absolute">'
 
-  for (let key in icons) {
+  for (const key in icons) {
     sprite += icons[key]
   }
 
-  sprite += "</svg>"
+  sprite += '</svg>'
 
   return sprite
 }
@@ -19,33 +19,33 @@ const parseRootAttributes = (htmlString) => {
   if (!isString(htmlString)) {
     return console.warn(`parseRootAttributes: ${htmlString} is not a string`)
   }
-  
-  let match = htmlString.match(/<svg\s+(.*?)>/);
+
+  const match = htmlString.match(/<svg\s+(.*?)>/)
   if (!match || !match[1]) {
-    return {};
+    return {}
   }
 
-  let attrString = match[1];
-  let attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm);
+  const attrString = match[1]
+  const attrs = attrString.match(/(\S+)=["']?((?:.(?!["']?\s+(?:\S+)=|\s*\/?[>"']))+.)["']?/gm)
   return attrs.reduce((acc, attr) => {
-    let [key, value] = attr.split("=");
-    acc[key] = value.replace(/['"]/g, "");
-    return acc;
-  }, {});
+    const [key, value] = attr.split('=')
+    acc[key] = value.replace(/['"]/g, '')
+    return acc
+  }, {})
 }
 
 export const convertSvgToSymbol = (key, code) => {
   const extractAttrs = parseRootAttributes(code)
   const { width, height } = extractAttrs
-  
+
   const viewBox = extractAttrs.viewBox || `0 0 ${width || 24} ${height || 24}`
   const xmlns = 'http://www.w3.org/2000/svg'
 
-  let symbol = code.replace("<svg", 
+  let symbol = code.replace('<svg',
     `<symbol id="${key}" xmlns="${xmlns}" viewBox="${viewBox}"`
   )
-  symbol = symbol.replace(/width="[^\"]*/, "")
-  symbol = symbol.replace(/height="[^\"]*/, "")
-  symbol = symbol.replace("</svg", "</symbol")
+  symbol = symbol.replace(/width="[^"]*/, '')
+  symbol = symbol.replace(/height="[^"]*/, '')
+  symbol = symbol.replace('</svg', '</symbol')
   return symbol
 }