tailwind-to-style 1.1.6 → 1.1.8

package/index.js

@@ -4255,6 +4255,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);
@@ -5678,28 +5682,62 @@ function jsonToStyle(json) {
     .join(" ");
 }
 
-function replaceAndRemoveCSSVariables(styleString) {
-  const customProperties = {};
-  const variableRegex = /--([\w-]+):\s*([^;]+);/g;
-  let match;
+function separateAndResolveCSS(arr) {
+  const cssProperties = [];
+  const cssVariables = [];
+  const variableMap = {};
+
+  arr.forEach((item) => {
+    const declarations = item
+      .split(";")
+      .map((decl) => decl.trim())
+      .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 + ";");
+      }
+    });
+  });
 
-  while ((match = variableRegex.exec(styleString)) !== null) {
-    const [, variableName, value] = match;
-    customProperties[variableName] = value.trim();
+  function resolveVariable(value) {
+    return value.replace(/var\((--[\w-]+)\)/g, (_, varName) => {
+      if (variableMap[varName]) {
+        return resolveVariable(variableMap[varName]);
+      }
+      return `var(${varName})`;
+    });
   }
 
-  let updatedStyleString = styleString.replace(
-    /var\(--([\w-]+)\)/g,
-    (_, variableName) => {
-      return customProperties[variableName] || `var(--${variableName})`;
-    }
-  );
+  const resolvedVariables = cssVariables.map((variable) => {
+    const [key, value] = variable.split(":").map((part) => part.trim());
+    const resolvedValue = resolveVariable(value.slice(0, -1));
+    return `${key}: ${resolvedValue};`;
+  });
 
-  updatedStyleString = updatedStyleString
-    .replace(/--[\w-]+:\s*[^;]+;/g, "")
-    .trim();
+  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);
+  });
+
+  const resolvedCSSProperties = cssProperties.map((property) =>
+    resolveVariable(property)
+  );
 
-  return updatedStyleString;
+  return resolvedCSSProperties;
 }
 
 const breakpoints = {
@@ -5745,8 +5783,8 @@ function tws(classNames, convertToJson) {
     return "";
   });
 
-  cssResult = replaceAndRemoveCSSVariables(cssResult.join(""));
-  cssResult = inlineStyleToJson(cssResult);
+  cssResult = separateAndResolveCSS(cssResult);
+  cssResult = inlineStyleToJson(cssResult.join(""));
 
   if (!convertToJson) {
     cssResult = jsonToStyle(cssResult);

package/package.json

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