tailwind-to-style 3.3.0 → 4.0.0

package/dist/utils/index.esm.js

@@ -5,16 +5,102 @@
  * @author Bigetion
  * @license MIT
  */
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
 const theme = {
   accentColor: _ref => {
-    let {
-      theme
-    } = _ref;
-    return {
-      ...theme("colors"),
+    let theme = _ref.theme;
+    return _objectSpread2(_objectSpread2({}, theme("colors")), {}, {
       auto: "auto",
       custom: "custom_value"
-    };
+    });
   },
   animation: {
     none: "none",
@@ -33,63 +119,43 @@ const theme = {
     custom: "custom_value"
   },
   backdropBlur: _ref2 => {
-    let {
-      theme
-    } = _ref2;
+    let theme = _ref2.theme;
     return theme("blur");
   },
   backdropBrightness: _ref3 => {
-    let {
-      theme
-    } = _ref3;
+    let theme = _ref3.theme;
     return theme("brightness");
   },
   backdropContrast: _ref4 => {
-    let {
-      theme
-    } = _ref4;
+    let theme = _ref4.theme;
     return theme("contrast");
   },
   backdropGrayscale: _ref5 => {
-    let {
-      theme
-    } = _ref5;
+    let theme = _ref5.theme;
     return theme("grayscale");
   },
   backdropHueRotate: _ref6 => {
-    let {
-      theme
-    } = _ref6;
+    let theme = _ref6.theme;
     return theme("hueRotate");
   },
   backdropInvert: _ref7 => {
-    let {
-      theme
-    } = _ref7;
+    let theme = _ref7.theme;
     return theme("invert");
   },
   backdropOpacity: _ref8 => {
-    let {
-      theme
-    } = _ref8;
+    let theme = _ref8.theme;
     return theme("opacity");
   },
   backdropSaturate: _ref9 => {
-    let {
-      theme
-    } = _ref9;
+    let theme = _ref9.theme;
     return theme("saturate");
   },
   backdropSepia: _ref0 => {
-    let {
-      theme
-    } = _ref0;
+    let theme = _ref0.theme;
     return theme("sepia");
   },
   backgroundColor: _ref1 => {
-    let {
-      theme
-    } = _ref1;
+    let theme = _ref1.theme;
     return theme("colors");
   },
   backgroundImage: {
@@ -104,9 +170,7 @@ const theme = {
     "gradient-to-tl": "linear-gradient(to top left, var(--gradient-color-stops))"
   },
   backgroundOpacity: _ref10 => {
-    let {
-      theme
-    } = _ref10;
+    let theme = _ref10.theme;
     return theme("opacity");
   },
   backgroundPosition: {
@@ -138,18 +202,13 @@ const theme = {
     custom: "custom_value"
   },
   borderColor: _ref11 => {
-    let {
-      theme
-    } = _ref11;
-    return {
-      ...theme("colors"),
+    let theme = _ref11.theme;
+    return _objectSpread2(_objectSpread2({}, theme("colors")), {}, {
       DEFAULT: "#e5e7eb"
-    };
+    });
   },
   borderOpacity: _ref12 => {
-    let {
-      theme
-    } = _ref12;
+    let theme = _ref12.theme;
     return theme("opacity");
   },
   borderRadius: {
@@ -167,12 +226,8 @@ const theme = {
     custom: "custom_value"
   },
   borderSpacing: _ref13 => {
-    let {
-      theme
-    } = _ref13;
-    return {
-      ...theme("spacing")
-    };
+    let theme = _ref13.theme;
+    return _objectSpread2({}, theme("spacing"));
   },
   borderWidth: {
     DEFAULT: "1px",
@@ -195,9 +250,7 @@ const theme = {
     custom: "custom_value"
   },
   boxShadowColor: _ref14 => {
-    let {
-      theme
-    } = _ref14;
+    let theme = _ref14.theme;
     return theme("colors");
   },
   brightness: {
@@ -215,9 +268,7 @@ const theme = {
     custom: "custom_value"
   },
   caretColor: _ref15 => {
-    let {
-      theme
-    } = _ref15;
+    let theme = _ref15.theme;
     return theme("colors");
   },
   colors: {
@@ -595,21 +646,15 @@ const theme = {
     "zoom-out": "zoom-out"
   },
   divideColor: _ref16 => {
-    let {
-      theme
-    } = _ref16;
+    let theme = _ref16.theme;
     return theme("borderColor");
   },
   divideOpacity: _ref17 => {
-    let {
-      theme
-    } = _ref17;
+    let theme = _ref17.theme;
     return theme("borderOpacity");
   },
   divideWidth: _ref18 => {
-    let {
-      theme
-    } = _ref18;
+    let theme = _ref18.theme;
     return theme("borderWidth");
   },
   dropShadow: {
@@ -622,13 +667,10 @@ const theme = {
     none: "0 0 #0000"
   },
   fill: _ref19 => {
-    let {
-      theme
-    } = _ref19;
-    return {
-      none: "none",
-      ...theme("colors")
-    };
+    let theme = _ref19.theme;
+    return _objectSpread2({
+      none: "none"
+    }, theme("colors"));
   },
   flex: {
     1: "1 1 0%",
@@ -637,12 +679,10 @@ const theme = {
     none: "none"
   },
   flexBasis: _ref20 => {
-    let {
-      theme
-    } = _ref20;
-    return {
-      auto: "auto",
-      ...theme("spacing"),
+    let theme = _ref20.theme;
+    return _objectSpread2(_objectSpread2({
+      auto: "auto"
+    }, theme("spacing")), {}, {
       "1/2": "50%",
       "1/3": "33.333333%",
       "2/3": "66.666667%",
@@ -670,7 +710,7 @@ const theme = {
       "10/12": "83.333333%",
       "11/12": "91.666667%",
       full: "100%"
-    };
+    });
   },
   flexGrow: {
     0: "0",
@@ -725,15 +765,11 @@ const theme = {
     custom: "custom_value"
   },
   gap: _ref21 => {
-    let {
-      theme
-    } = _ref21;
+    let theme = _ref21.theme;
     return theme("spacing");
   },
   gradientColorStops: _ref22 => {
-    let {
-      theme
-    } = _ref22;
+    let theme = _ref22.theme;
     return theme("colors");
   },
   gradientColorStopPositions: {
@@ -904,12 +940,10 @@ const theme = {
     12: "repeat(12, minmax(0, 1fr))"
   },
   height: _ref23 => {
-    let {
-      theme
-    } = _ref23;
-    return {
-      auto: "auto",
-      ...theme("spacing"),
+    let theme = _ref23.theme;
+    return _objectSpread2(_objectSpread2({
+      auto: "auto"
+    }, theme("spacing")), {}, {
       "1/2": "50%",
       "1/3": "33.333333%",
       "2/3": "66.666667%",
@@ -934,7 +968,7 @@ const theme = {
       max: "max-content",
       fit: "fit-content",
       custom: "custom_value"
-    };
+    });
   },
   hueRotate: {
     0: "0deg",
@@ -945,12 +979,10 @@ const theme = {
     180: "180deg"
   },
   inset: _ref24 => {
-    let {
-      theme
-    } = _ref24;
-    return {
-      auto: "auto",
-      ...theme("spacing"),
+    let theme = _ref24.theme;
+    return _objectSpread2(_objectSpread2({
+      auto: "auto"
+    }, theme("spacing")), {}, {
       "1/2": "50%",
       "1/3": "33.333333%",
       "2/3": "66.666667%",
@@ -958,7 +990,7 @@ const theme = {
       "2/4": "50%",
       "3/4": "75%",
       full: "100%"
-    };
+    });
   },
   insetShadow: {
     xs: "inset 0 1px 1px 0 rgb(0 0 0 / 0.05)",
@@ -1013,20 +1045,14 @@ const theme = {
     decimal: "decimal"
   },
   margin: _ref25 => {
-    let {
-      theme
-    } = _ref25;
-    return {
-      auto: "auto",
-      ...theme("spacing")
-    };
+    let theme = _ref25.theme;
+    return _objectSpread2({
+      auto: "auto"
+    }, theme("spacing"));
   },
   maxHeight: _ref26 => {
-    let {
-      theme
-    } = _ref26;
-    return {
-      ...theme("spacing"),
+    let theme = _ref26.theme;
+    return _objectSpread2(_objectSpread2({}, theme("spacing")), {}, {
       none: "none",
       full: "100%",
       screen: "100vh",
@@ -1036,14 +1062,11 @@ const theme = {
       min: "min-content",
       max: "max-content",
       fit: "fit-content"
-    };
+    });
   },
   maxWidth: _ref27 => {
-    let {
-      theme
-    } = _ref27;
-    return {
-      ...theme("spacing"),
+    let theme = _ref27.theme;
+    return _objectSpread2(_objectSpread2({}, theme("spacing")), {}, {
       none: "none",
       xs: "20rem",
       sm: "24rem",
@@ -1061,14 +1084,11 @@ const theme = {
       max: "max-content",
       fit: "fit-content",
       prose: "65ch"
-    };
+    });
   },
   minHeight: _ref28 => {
-    let {
-      theme
-    } = _ref28;
-    return {
-      ...theme("spacing"),
+    let theme = _ref28.theme;
+    return _objectSpread2(_objectSpread2({}, theme("spacing")), {}, {
       full: "100%",
       screen: "100vh",
       svh: "100svh",
@@ -1077,19 +1097,16 @@ const theme = {
       min: "min-content",
       max: "max-content",
       fit: "fit-content"
-    };
+    });
   },
   minWidth: _ref29 => {
-    let {
-      theme
-    } = _ref29;
-    return {
-      ...theme("spacing"),
+    let theme = _ref29.theme;
+    return _objectSpread2(_objectSpread2({}, theme("spacing")), {}, {
       full: "100%",
       min: "min-content",
       max: "max-content",
       fit: "fit-content"
-    };
+    });
   },
   objectPosition: {
     bottom: "bottom",
@@ -1145,9 +1162,7 @@ const theme = {
     custom: "custom_value"
   },
   outlineColor: _ref30 => {
-    let {
-      theme
-    } = _ref30;
+    let theme = _ref30.theme;
     return theme("colors");
   },
   outlineOffset: {
@@ -1159,9 +1174,7 @@ const theme = {
     custom: "custom_value"
   },
   outlineOpacity: _ref31 => {
-    let {
-      theme
-    } = _ref31;
+    let theme = _ref31.theme;
     return theme("opacity");
   },
   outlineWidth: {
@@ -1173,9 +1186,7 @@ const theme = {
     custom: "custom_value"
   },
   padding: _ref32 => {
-    let {
-      theme
-    } = _ref32;
+    let theme = _ref32.theme;
     return theme("spacing");
   },
   perspective: {
@@ -1188,18 +1199,13 @@ const theme = {
     custom: "custom_value"
   },
   ringColor: _ref33 => {
-    let {
-      theme
-    } = _ref33;
-    return {
-      DEFAULT: "#3b82f6",
-      ...theme("colors")
-    };
+    let theme = _ref33.theme;
+    return _objectSpread2({
+      DEFAULT: "#3b82f6"
+    }, theme("colors"));
   },
   ringOffsetColor: _ref34 => {
-    let {
-      theme
-    } = _ref34;
+    let theme = _ref34.theme;
     return theme("colors");
   },
   ringOffsetWidth: {
@@ -1211,13 +1217,10 @@ const theme = {
     custom: "custom_value"
   },
   ringOpacity: _ref35 => {
-    let {
-      theme
-    } = _ref35;
-    return {
-      DEFAULT: "0.5",
-      ...theme("opacity")
-    };
+    let theme = _ref35.theme;
+    return _objectSpread2({
+      DEFAULT: "0.5"
+    }, theme("opacity"));
   },
   ringWidth: {
     DEFAULT: "3px",
@@ -1262,17 +1265,11 @@ const theme = {
     custom: "custom_value"
   },
   scrollMargin: _ref36 => {
-    let {
-      theme
-    } = _ref36;
-    return {
-      ...theme("spacing")
-    };
+    let theme = _ref36.theme;
+    return _objectSpread2({}, theme("spacing"));
   },
   scrollPadding: _ref37 => {
-    let {
-      theme
-    } = _ref37;
+    let theme = _ref37.theme;
     return theme("spacing");
   },
   screens: {
@@ -1297,12 +1294,8 @@ const theme = {
     custom: "custom_value"
   },
   space: _ref38 => {
-    let {
-      theme
-    } = _ref38;
-    return {
-      ...theme("spacing")
-    };
+    let theme = _ref38.theme;
+    return _objectSpread2({}, theme("spacing"));
   },
   spacing: {
     px: "1px",
@@ -1348,13 +1341,10 @@ const theme = {
     custom: "custom_value"
   },
   stroke: _ref39 => {
-    let {
-      theme
-    } = _ref39;
-    return {
-      none: "none",
-      ...theme("colors")
-    };
+    let theme = _ref39.theme;
+    return _objectSpread2({
+      none: "none"
+    }, theme("colors"));
   },
   strokeWidth: {
     0: "0",
@@ -1363,15 +1353,11 @@ const theme = {
     custom: "custom_value"
   },
   textColor: _ref40 => {
-    let {
-      theme
-    } = _ref40;
+    let theme = _ref40.theme;
     return theme("colors");
   },
   textDecorationColor: _ref41 => {
-    let {
-      theme
-    } = _ref41;
+    let theme = _ref41.theme;
     return theme("colors");
   },
   textDecorationThickness: {
@@ -1385,38 +1371,25 @@ const theme = {
     custom: "custom_value"
   },
   textIndent: _ref42 => {
-    let {
-      theme
-    } = _ref42;
-    return {
-      ...theme("spacing")
-    };
+    let theme = _ref42.theme;
+    return _objectSpread2({}, theme("spacing"));
   },
   textOpacity: _ref43 => {
-    let {
-      theme
-    } = _ref43;
+    let theme = _ref43.theme;
     return theme("opacity");
   },
   textShadowBlur: _ref44 => {
-    let {
-      theme
-    } = _ref44;
+    let theme = _ref44.theme;
     return theme("blur");
   },
   textShadowColor: _ref45 => {
-    let {
-      theme
-    } = _ref45;
-    return {
-      ...theme("colors"),
+    let theme = _ref45.theme;
+    return _objectSpread2(_objectSpread2({}, theme("colors")), {}, {
       DEFAULT: "#e5e7eb"
-    };
+    });
   },
   textShadowOpacity: _ref46 => {
-    let {
-      theme
-    } = _ref46;
+    let theme = _ref46.theme;
     return theme("opacity");
   },
   textShadowX: {
@@ -1434,9 +1407,7 @@ const theme = {
     custom: "custom_value"
   },
   textShadowY: _ref47 => {
-    let {
-      theme
-    } = _ref47;
+    let theme = _ref47.theme;
     return theme("textShadowX");
   },
   textUnderlineOffset: {
@@ -1460,11 +1431,8 @@ const theme = {
     "top-left": "top left"
   },
   translate: _ref48 => {
-    let {
-      theme
-    } = _ref48;
-    return {
-      ...theme("spacing"),
+    let theme = _ref48.theme;
+    return _objectSpread2(_objectSpread2({}, theme("spacing")), {}, {
       "1/2": "50%",
       "1/3": "33.333333%",
       "2/3": "66.666667%",
@@ -1472,15 +1440,13 @@ const theme = {
       "2/4": "50%",
       "3/4": "75%",
       full: "100%"
-    };
+    });
   },
   size: _ref49 => {
-    let {
-      theme
-    } = _ref49;
-    return {
-      auto: "auto",
-      ...theme("spacing"),
+    let theme = _ref49.theme;
+    return _objectSpread2(_objectSpread2({
+      auto: "auto"
+    }, theme("spacing")), {}, {
       "1/2": "50%",
       "1/3": "33.333333%",
       "2/3": "66.666667%",
@@ -1511,15 +1477,13 @@ const theme = {
       min: "min-content",
       max: "max-content",
       fit: "fit-content"
-    };
+    });
   },
   width: _ref50 => {
-    let {
-      theme
-    } = _ref50;
-    return {
-      auto: "auto",
-      ...theme("spacing"),
+    let theme = _ref50.theme;
+    return _objectSpread2(_objectSpread2({
+      auto: "auto"
+    }, theme("spacing")), {}, {
       "1/2": "50%",
       "1/3": "33.333333%",
       "2/3": "66.666667%",
@@ -1554,7 +1518,7 @@ const theme = {
       min: "min-content",
       max: "max-content",
       fit: "fit-content"
-    };
+    });
   },
   willChange: {
     auto: "auto",
@@ -1690,20 +1654,13 @@ const configOptions = {
   vars
 };
 
-/**
- * User Configuration Management
- * Handles theme extensions and custom plugin registration
- */
-
-
 /**
  * User configuration state
  */
 let userConfig = {
   theme: {
     extend: {}
-  },
-  prefix: ""};
+  }};
 
 // Cache for extended theme to avoid redundant lookups
 const extendedThemeCache = new Map();
@@ -1725,25 +1682,15 @@ function getExtendedTheme(key) {
   return result;
 }
 
-/**
- * Get configured prefix
- * @returns {string} Prefix string
- */
-function getPrefix() {
-  return userConfig.prefix;
-}
-
 function isFunction(functionToCheck) {
   return functionToCheck && {}.toString.call(functionToCheck) === "[object Function]";
 }
 function getConfigOptions() {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const {
-    theme = {}
-  } = options;
-  const {
-    extend: themeExtend = {}
-  } = theme;
+  const _options$theme = options.theme,
+    theme = _options$theme === void 0 ? {} : _options$theme;
+  const _theme$extend = theme.extend,
+    themeExtend = _theme$extend === void 0 ? {} : _theme$extend;
   const newTheme = {};
   const themeKeys = Object.keys(configOptions.theme);
   themeKeys.forEach(key => {
@@ -1787,16 +1734,12 @@ function getConfigOptions() {
       });
     }
   });
-
-  // Get user prefix
-  const userPrefix = getPrefix();
-  const finalPrefix = userPrefix || options.prefix || "";
-  return {
-    prefix: finalPrefix,
-    ...configOptions,
-    ...options,
+  const finalPrefix = options.prefix || "";
+  return _objectSpread2(_objectSpread2(_objectSpread2({
+    prefix: finalPrefix
+  }, configOptions), options), {}, {
     theme: newTheme
-  };
+  });
 }
 function generateCssString() {
   let getCssString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : () => {};
@@ -1819,7 +1762,9 @@ function generateCssString() {
     }
     let str = "";
     Object.entries(nOptions).forEach(_ref => {
-      let [key, value] = _ref;
+      let _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
       str += getStr(key.replace("/", "\\/").replace(".", "\\."), value);
     });
     return str;
@@ -1827,14 +1772,18 @@ function generateCssString() {
   const getCssByColors = function (colors) {
     let getStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
     let str = "";
-    Object.entries(colors).forEach(_ref2 => {
-      let [key1, value1] = _ref2;
+    Object.entries(colors).forEach(_ref3 => {
+      let _ref4 = _slicedToArray(_ref3, 2),
+        key1 = _ref4[0],
+        value1 = _ref4[1];
       if (typeof value1 === "string") {
-        str += `${getStr(key1, value1, hexToRgb(value1))} `;
+        str += "".concat(getStr(key1, value1, hexToRgb(value1)), " ");
       } else if (typeof value1 === "object") {
-        Object.entries(value1).forEach(_ref3 => {
-          let [key2, value2] = _ref3;
-          str += `${getStr(`${key1}-${key2}`, value2, hexToRgb(value2))} `;
+        Object.entries(value1).forEach(_ref5 => {
+          let _ref6 = _slicedToArray(_ref5, 2),
+            key2 = _ref6[0],
+            value2 = _ref6[1];
+          str += "".concat(getStr("".concat(key1, "-").concat(key2), value2, hexToRgb(value2)), " ");
         });
       }
     });