tailwind-to-style 1.0.5 → 1.0.7

package/index.js

@@ -36,7 +36,6 @@ const theme = {
     "gradient-to-l": "linear-gradient(to left, var(--gradient-color-stops))",
     "gradient-to-tl":
       "linear-gradient(to top left, var(--gradient-color-stops))",
-    custom: "custom_value",
   },
   backgroundOpacity: ({ theme }) => theme("opacity"),
   backgroundPosition: {
@@ -5754,42 +5753,38 @@ function tws(classNames, convertToJson) {
   return cssResult;
 }
 
-function twsx(selectorsConfig) {
-  return Object.entries(selectorsConfig)
-    .map(([selector, [baseStyles, extensions = {}]]) => {
-      let baseCSS = `${selector} { ${tws(baseStyles)} }`;
-      let extendedCSS = "";
-
-      for (const [key, value] of Object.entries(extensions)) {
-        if (breakpoints[key]) {
-          const mediaQuery = breakpoints[key];
-          extendedCSS += `
-                ${mediaQuery} {
-                  ${selector} {
-                    ${tws(value)}
-                  }
-                }
-              `;
-        } else if (key.startsWith("@media")) {
-          extendedCSS += `
-                ${key} {
-                  ${selector} {
-                    ${tws(value)}
-                  }
-                }
-              `;
-        } else {
-          extendedCSS += `
-                ${selector}${key} {
-                  ${tws(value)}
-                }
-              `;
+function twsx(obj, parentSelector) {
+  let cssString = "";
+
+  for (const key in obj) {
+    const newSelector = parentSelector
+      ? key.startsWith(".") || key.startsWith(":")
+        ? `${parentSelector}${key}`
+        : `${parentSelector} ${key}`
+      : key;
+
+    if (Array.isArray(obj[key])) {
+      const [baseStyle, nestedStyles] = obj[key];
+      cssString += `${newSelector} { ${tws(baseStyle)} } `;
+
+      if (typeof nestedStyles === "object") {
+        cssString += twsx(nestedStyles, newSelector);
+      }
+    } else if (typeof obj[key] === "object" && key !== "breakpoint") {
+      cssString += twsx(obj[key], newSelector);
+    } else if (key === "breakpoint") {
+      const mediaQueries = obj[key];
+      for (const mediaKey in mediaQueries) {
+        if (breakpoints[mediaKey]) {
+          cssString += `${breakpoints[mediaKey]} { ${parentSelector} { ${tws(
+            mediaQueries[mediaKey]
+          )} } } `;
         }
       }
+    }
+  }
 
-      return `${baseCSS} ${extendedCSS}`;
-    })
-    .join(" ");
+  return cssString;
 }
 
 exports.tws = tws;

package/package.json

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