tailwind-to-style 1.0.3 → 1.0.5

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

@@ -4,11 +4,13 @@ const theme = {
   accentColor: ({ theme }) => ({
     ...theme("colors"),
     auto: "auto",
+    custom: "custom_value",
   }),
   aspectRatio: {
     auto: "auto",
     square: "1 / 1",
     video: "16 / 9",
+    custom: "custom_value",
   },
   backdropBlur: ({ theme }) => theme("blur"),
   backdropBrightness: ({ theme }) => theme("brightness"),
@@ -34,6 +36,7 @@ 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: {
@@ -62,6 +65,7 @@ const theme = {
     xl: "24px",
     "2xl": "40px",
     "3xl": "64px",
+    custom: "custom_value",
   },
   borderColor: ({ theme }) => ({
     ...theme("colors"),
@@ -78,6 +82,7 @@ const theme = {
     "2xl": "1rem",
     "3xl": "1.5rem",
     full: "9999px",
+    custom: "custom_value",
   },
   borderSpacing: ({ theme }) => ({
     ...theme("spacing"),
@@ -88,6 +93,7 @@ const theme = {
     2: "2px",
     4: "4px",
     8: "8px",
+    custom: "custom_value",
   },
   boxShadow: {
     sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -98,6 +104,7 @@ const theme = {
     "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
     inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
     none: "none",
+    custom: "custom_value",
   },
   boxShadowColor: ({ theme }) => theme("colors"),
   brightness: {
@@ -112,6 +119,7 @@ const theme = {
     125: "1.25",
     150: "1.5",
     200: "2",
+    custom: "custom_value",
   },
   caretColor: ({ theme }) => theme("colors"),
   colors: {
@@ -383,6 +391,7 @@ const theme = {
       800: "#9f1239",
       900: "#881337",
     },
+    custom: "custom_value",
   },
   columns: {
     auto: "auto",
@@ -411,6 +420,7 @@ const theme = {
     "5xl": "64rem",
     "6xl": "72rem",
     "7xl": "80rem",
+    custom: "custom_value",
   },
   container: {},
   content: {
@@ -424,6 +434,7 @@ const theme = {
     125: "1.25",
     150: "1.5",
     200: "2",
+    custom: "custom_value",
   },
   cursor: {
     auto: "auto",
@@ -535,6 +546,7 @@ const theme = {
     "7xl": "4.5rem",
     "8xl": "6rem",
     "9xl": "8rem",
+    custom: "custom_value",
   },
   fontWeight: {
     thin: "100",
@@ -546,6 +558,7 @@ const theme = {
     bold: "700",
     extrabold: "800",
     black: "900",
+    custom: "custom_value",
   },
   gap: ({ theme }) => theme("spacing"),
   gradientColorStops: ({ theme }) => theme("colors"),
@@ -742,6 +755,7 @@ const theme = {
     min: "min-content",
     max: "max-content",
     fit: "fit-content",
+    custom: "custom_value",
   }),
   hueRotate: {
     0: "0deg",
@@ -773,6 +787,7 @@ const theme = {
     wide: "0.025em",
     wider: "0.05em",
     widest: "0.1em",
+    custom: "custom_value",
   },
   lineClamp: {
     1: "1",
@@ -781,6 +796,7 @@ const theme = {
     4: "4",
     5: "5",
     6: "6",
+    custom: "custom_value",
   },
   lineHeight: {
     none: "1",
@@ -797,6 +813,7 @@ const theme = {
     8: "2rem",
     9: "2.25rem",
     10: "2.5rem",
+    custom: "custom_value",
   },
   listStyleType: {
     none: "none",
@@ -890,6 +907,7 @@ const theme = {
     90: "0.9",
     95: "0.95",
     100: "1",
+    custom: "custom_value",
   },
   order: {
     first: "-9999",
@@ -907,6 +925,7 @@ const theme = {
     10: "10",
     11: "11",
     12: "12",
+    custom: "custom_value",
   },
   outlineColor: ({ theme }) => theme("colors"),
   outlineOffset: {
@@ -915,6 +934,7 @@ const theme = {
     2: "2px",
     4: "4px",
     8: "8px",
+    custom: "custom_value",
   },
   outlineOpacity: ({ theme }) => theme("opacity"),
   outlineWidth: {
@@ -923,6 +943,7 @@ const theme = {
     2: "2px",
     4: "4px",
     8: "8px",
+    custom: "custom_value",
   },
   padding: ({ theme }) => theme("spacing"),
   ringColor: ({ theme }) => ({
@@ -936,6 +957,7 @@ const theme = {
     2: "2px",
     4: "4px",
     8: "8px",
+    custom: "custom_value",
   },
   ringOpacity: ({ theme }) => ({
     DEFAULT: "0.5",
@@ -948,6 +970,7 @@ const theme = {
     2: "2px",
     4: "4px",
     8: "8px",
+    custom: "custom_value",
   },
   rotate: {
     0: "0deg",
@@ -959,6 +982,7 @@ const theme = {
     45: "45deg",
     90: "90deg",
     180: "180deg",
+    custom: "custom_value",
   },
   saturate: {
     0: "0",
@@ -966,6 +990,7 @@ const theme = {
     100: "1",
     150: "1.5",
     200: "2",
+    custom: "custom_value",
   },
   scale: {
     0: "0",
@@ -978,6 +1003,7 @@ const theme = {
     110: "1.1",
     125: "1.25",
     150: "1.5",
+    custom: "custom_value",
   },
   scrollMargin: ({ theme }) => ({
     ...theme("spacing"),
@@ -994,6 +1020,7 @@ const theme = {
     3: "3deg",
     6: "6deg",
     12: "12deg",
+    custom: "custom_value",
   },
   space: ({ theme }) => ({
     ...theme("spacing"),
@@ -1034,6 +1061,7 @@ const theme = {
     72: "18rem",
     80: "20rem",
     96: "24rem",
+    custom: "custom_value",
   },
   stroke: ({ theme }) => ({
     none: "none",
@@ -1043,6 +1071,7 @@ const theme = {
     0: "0",
     1: "1",
     2: "2",
+    custom: "custom_value",
   },
   textColor: ({ theme }) => theme("colors"),
   textDecorationColor: ({ theme }) => theme("colors"),
@@ -1054,6 +1083,7 @@ const theme = {
     2: "2px",
     4: "4px",
     8: "8px",
+    custom: "custom_value",
   },
   textIndent: ({ theme }) => ({
     ...theme("spacing"),
@@ -1077,6 +1107,7 @@ const theme = {
     8: "8px",
     9: "9px",
     10: "10px",
+    custom: "custom_value",
   },
   textShadowY: ({ theme }) => theme("textShadowX"),
   textUnderlineOffset: {
@@ -1086,6 +1117,7 @@ const theme = {
     2: "2px",
     4: "4px",
     8: "8px",
+    custom: "custom_value",
   },
   transformOrigin: {
     center: "center",
@@ -1199,6 +1231,7 @@ const theme = {
     90: "90",
     100: "100",
     auto: "auto",
+    custom: "custom_value",
   },
 };
 
@@ -5615,18 +5648,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 +5682,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 +5697,7 @@ function replaceAndRemoveCSSVariables(styleString) {
   let match;
 
   while ((match = variableRegex.exec(styleString)) !== null) {
-    const [_, variableName, value] = match;
+    const [, variableName, value] = match;
     customProperties[variableName] = value.trim();
   }
 
@@ -5694,12 +5726,21 @@ const breakpoints = {
 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];
+    } else if (className.includes("[")) {
+      const customValue = className.match(/\[([^\]]+)\]/)[1];
+      const baseKey = className.split("[")[0];
+      if (cssObject[`${baseKey}custom`]) {
+        return cssObject[`${baseKey}custom`].replace(
+          /custom_value/g,
+          customValue
+        );
+      }
     }
     return "";
   });

package/package.json

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