tailwind-to-style 1.0.2 → 1.0.3

package/index.js

@@ -5683,6 +5683,14 @@ function replaceAndRemoveCSSVariables(styleString) {
   return updatedStyleString;
 }
 
+const breakpoints = {
+  sm: "@media (min-width: 640px)",
+  md: "@media (min-width: 768px)",
+  lg: "@media (min-width: 1024px)",
+  xl: "@media (min-width: 1280px)",
+  "2xl": "@media (min-width: 1536px)",
+};
+
 function tws(classNames, convertToJson) {
   const cssString = generateTailwindCssString().replace(/\s\s+/g, " ");
 
@@ -5705,4 +5713,43 @@ function tws(classNames, convertToJson) {
   return cssResult;
 }
 
-module.exports = tws;
+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)}
+                }
+              `;
+        }
+      }
+
+      return `${baseCSS} ${extendedCSS}`;
+    })
+    .join(" ");
+}
+
+exports.tws = tws;
+exports.twsx = twsx;

package/package.json

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