tailwind-to-style 1.0.2 → 1.0.4

package/README.md

@@ -24,7 +24,7 @@ yarn add tailwind-to-style
 ## Usage
 
 ```javascript
-import tws from "tailwind-to-style";
+import { tws } from "tailwind-to-style";
 
 // Convert classes to inline CSS
 const styleInline = tws(`bg-white mx-auto`);
@@ -41,7 +41,7 @@ Here is an example of how to use `tailwind-to-style` in a React application:
 
 ```javascript
 import React from 'react';
-import tws from 'tailwind-to-style';
+import { tws } from 'tailwind-to-style';
 
 const App = () => {
   return (

package/index.js

@@ -5615,18 +5615,18 @@ function generateTailwindCssString(options = {}) {
   return cssString;
 }
 
-function generateCssClasses(cssString) {
-  const cssClasses = {};
-  // eslint-disable-next-line
-  const regex = /([a-zA-Z0-9\-]+)\s*{\s*([^}]+)\s*}/g;
+function convertCssToObject(cssString) {
+  const cssObject = {};
+  const regex = /([a-zA-Z0-9\-\\.]+)\s*{\s*([^}]+)\s*}/g;
   let match;
-  while ((match = regex.exec(cssString)) !== null) {
-    const className = match[1].trim();
-    const cssRules = match[2].trim();
 
-    cssClasses[className] = cssRules;
+  while ((match = regex.exec(cssString)) !== null) {
+    const className = match[1].replace(/\\/g, "");
+    const cssRules = match[2].trim().replace(/\s+/g, " ");
+    cssObject[className] = cssRules;
   }
-  return cssClasses;
+
+  return cssObject;
 }
 
 function inlineStyleToJson(styleString) {
@@ -5649,7 +5649,6 @@ function inlineStyleToJson(styleString) {
 function jsonToStyle(json) {
   return Object.entries(json)
     .map(([key, value]) => {
-      // Convert camelCase to kebab-case for CSS properties
       const kebabCaseKey = key.replace(
         /[A-Z]/g,
         (letter) => `-${letter.toLowerCase()}`
@@ -5665,7 +5664,7 @@ function replaceAndRemoveCSSVariables(styleString) {
   let match;
 
   while ((match = variableRegex.exec(styleString)) !== null) {
-    const [_, variableName, value] = match;
+    const [, variableName, value] = match;
     customProperties[variableName] = value.trim();
   }
 
@@ -5683,15 +5682,23 @@ 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, " ");
 
-  const cssClasses = generateCssClasses(cssString);
+  const cssObject = convertCssToObject(cssString);
 
   const classes = classNames.split(" ");
   let cssResult = classes.map((className) => {
-    if (cssClasses[className]) {
-      return cssClasses[className];
+    if (cssObject[className]) {
+      return cssObject[className];
     }
     return "";
   });
@@ -5705,4 +5712,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.4",
   "description": "Convert tailwind classes to inline style",
   "main": "index.js",
   "scripts": {