tailwind-to-style 1.0.4 → 1.0.5

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",
   },
 };
 
@@ -5699,6 +5732,15 @@ function tws(classNames, convertToJson) {
   let cssResult = classes.map((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.4",
+  "version": "1.0.5",
   "description": "Convert tailwind classes to inline style",
   "main": "index.js",
   "scripts": {