tailwind-to-style 1.1.7 → 1.1.9

package/index.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 const theme = {
   accentColor: ({ theme }) => ({
@@ -1375,7 +1375,8 @@ function generator$2l(configOptions = {}) {
         `
       );
       return cssString;
-    });
+    }
+  );
 
   return responsiveCssString;
 }
@@ -2153,7 +2154,8 @@ function generator$1Y(configOptions = {}) {
         return str;
       });
       return cssString;
-    });
+    }
+  );
 
   return responsiveCssString;
 }
@@ -2262,7 +2264,8 @@ function generator$1U(configOptions = {}) {
         `
       );
       return cssString;
-    });
+    }
+  );
 
   return responsiveCssString;
 }
@@ -4255,6 +4258,10 @@ function generator$I(configOptions = {}) {
       const key = keyTmp.toLowerCase() !== "default" ? `-${keyTmp}` : "";
       return `
           ${prefix}${key} {
+            --ring-inset: var(--empty,/*!*/ /*!*/);
+            --ring-offset-width: 0px;
+            --ring-offset-color: #fff;
+            --ring-color: rgba(59, 130, 246, 0.5);
             --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
             --ring-shadow: var(--ring-inset) 0 0 0 calc(${value} + var(--ring-offset-width)) var(--ring-color);
             box-shadow: var(--ring-offset-shadow), var(--ring-shadow);
@@ -4825,7 +4832,8 @@ function generator$p(configOptions = {}) {
         `
       );
       return cssString;
-    });
+    }
+  );
 
   return responsiveCssString;
 }
@@ -5666,23 +5674,8 @@ function inlineStyleToJson(styleString) {
   return styleObject;
 }
 
-function jsonToStyle(json) {
-  return Object.entries(json)
-    .map(([key, value]) => {
-      const kebabCaseKey = key.replace(
-        /[A-Z]/g,
-        (letter) => `-${letter.toLowerCase()}`
-      );
-      return `${kebabCaseKey}: ${value};`;
-    })
-    .join(" ");
-}
-
 function separateAndResolveCSS(arr) {
-  const cssProperties = [];
-  const cssVariables = [];
-  const variableMap = {};
-
+  const cssProperties = {};
   arr.forEach((item) => {
     const declarations = item
       .split(";")
@@ -5690,50 +5683,38 @@ function separateAndResolveCSS(arr) {
       .filter((decl) => decl);
 
     declarations.forEach((declaration) => {
-      if (declaration.startsWith("--")) {
-        const [key, value] = declaration.split(":").map((part) => part.trim());
-        variableMap[key] = value;
-        cssVariables.push(declaration + ";");
-      } else {
-        cssProperties.push(declaration + ";");
-      }
+      const [key, value] = declaration.split(":").map((part) => part.trim());
+      cssProperties[key] = value;
     });
   });
 
-  function resolveVariable(value) {
-    return value.replace(/var\((--[\w-]+)\)/g, (_, varName) => {
-      if (variableMap[varName]) {
-        return resolveVariable(variableMap[varName]);
+  const resolvedProperties = { ...cssProperties };
+
+  const resolveValue = (value, variables) => {
+    return value.replace(
+      /var\((--[a-zA-Z0-9-]+)(?:,\s*([^\)]+))?\)/g,
+      (match, variable, fallback) => {
+        return variables[variable] || fallback || match;
       }
-      return `var(${varName})`;
-    });
-  }
+    );
+  };
 
-  const resolvedVariables = cssVariables.map((variable) => {
-    const [key, value] = variable.split(":").map((part) => part.trim());
-    const resolvedValue = resolveVariable(value.slice(0, -1));
-    return `${key}: ${resolvedValue};`;
+  Object.keys(resolvedProperties).forEach((key) => {
+    resolvedProperties[key] = resolveValue(
+      resolvedProperties[key],
+      resolvedProperties
+    );
   });
 
-  const uniqueVariables = [
-    ...new Map(
-      resolvedVariables.reverse().map((variable) => {
-        const key = variable.split(":")[0].trim();
-        return [key, variable];
-      })
-    ).values(),
-  ].reverse();
-
-  uniqueVariables.forEach((variable) => {
-    const [key, value] = variable.split(":").map((part) => part.trim());
-    variableMap[key] = value.slice(0, -1);
+  Object.keys(resolvedProperties).forEach((key) => {
+    if (key.startsWith("--")) {
+      delete resolvedProperties[key];
+    }
   });
 
-  const resolvedCSSProperties = cssProperties.map((property) =>
-    resolveVariable(property)
-  );
-
-  return resolvedCSSProperties;
+  return Object.entries(resolvedProperties)
+    .map(([key, value]) => `${key}: ${value};`)
+    .join(" ");
 }
 
 const breakpoints = {
@@ -5780,10 +5761,9 @@ function tws(classNames, convertToJson) {
   });
 
   cssResult = separateAndResolveCSS(cssResult);
-  cssResult = inlineStyleToJson(cssResult.join(""));
 
-  if (!convertToJson) {
-    cssResult = jsonToStyle(cssResult);
+  if (convertToJson) {
+    cssResult = inlineStyleToJson(cssResult);
   }
 
   return cssResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-to-style",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "description": "Convert tailwind classes to inline style",
   "main": "index.js",
   "scripts": {