feat: Add <alpha-value> placeholder support for custom colors

closes #349
tw-in-js · Oct 3, 2022 · 0a63948 · 0a63948
1 parent 7a851e6
commit 0a63948
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 1 deletion.
diff --git a/.changeset/small-comics-march.md b/.changeset/small-comics-march.md
@@ -0,0 +1,6 @@
+---
+'@twind/preset-tailwind': patch
+'twind': patch
+---
+
+Add `<alpha-value>` placeholder support for custom colors (closes #349)
diff --git a/packages/preset-tailwind/src/rules.test.json b/packages/preset-tailwind/src/rules.test.json
@@ -1998,5 +1998,8 @@
     ".via-\\[rgba\\(255\\,225\\,0\\,0\\.7\\)_4\\%\\]{--tw-gradient-to:#0000;--tw-gradient-stops:var(--tw-gradient-from),rgba(255,225,0,0.7) 4%,var(--tw-gradient-to)}",
     ".to-\\[rgba\\(255\\,225\\,0\\,0\\.3\\)\\]{--tw-gradient-to:rgba(255,225,0,0.3)}"
   ],
-  "bg-[linear-gradient(to_right,#ff0000_50%,#cccc00_85%)]": ".bg-\\[linear-gradient\\(to_right\\,\\#ff0000_50\\%\\,\\#cccc00_85\\%\\)\\]{background-image:linear-gradient(to right,#ff0000 50%,#cccc00 85%)}"
+  "bg-[linear-gradient(to_right,#ff0000_50%,#cccc00_85%)]": ".bg-\\[linear-gradient\\(to_right\\,\\#ff0000_50\\%\\,\\#cccc00_85\\%\\)\\]{background-image:linear-gradient(to right,#ff0000 50%,#cccc00 85%)}",
+  "bg-primary": ".bg-primary{--tw-bg-opacity:1;background-color:rgb(var(--color-primary) / var(--tw-bg-opacity))}",
+  "bg-primary/50": ".bg-primary\\/50{--tw-bg-opacity:0.5;background-color:rgb(var(--color-primary) / var(--tw-bg-opacity))}",
+  "bg-[rgb(var(--color-primary)/<alpha-value>)]/50": ".bg-\\[rgb\\(var\\(--color-primary\\)\\/\\<alpha-value\\>\\)\\]\\/50{--tw-bg-opacity:0.5;background-color:rgb(var(--color-primary)/var(--tw-bg-opacity))}"
 }
diff --git a/packages/preset-tailwind/src/rules.test.ts b/packages/preset-tailwind/src/rules.test.ts
@@ -26,6 +26,7 @@ const tw = twind(
         colors: {
           gainsboro: 'gainsboro',
           'gray-light': '#d3dce6',
+          primary: 'rgb(var(--color-primary) / <alpha-value>)',
         },
         backgroundImage: {
           'hero-pattern': "url('/img/hero-pattern.svg')",

diff --git a/packages/twind/src/colors.ts b/packages/twind/src/colors.ts
@@ -12,6 +12,10 @@ export function toColorValue(color: ColorValue, options: ColorFunctionOptions =
   const { opacityValue = '1', opacityVariable } = options
   const opacity = opacityVariable ? `var(${opacityVariable})` : opacityValue
 
+  if (color.includes('<alpha-value>')) {
+    return color.replace('<alpha-value>', opacity)
+  }
+
   // rgb hex: #0123 and #001122
   if (color[0] == '#' && (color.length == 4 || color.length == 7)) {
     const size = (color.length - 1) / 3