fix: rgb and hsl colors opacity support (fix #335) (#336)

Co-authored-by: Matt Thornton <mattthornton@workfront.com>
Co-authored-by: Sascha Tandel <s.tandel@kenoxa.de>

.changeset/smart-taxis-visit.md

@@ -0,0 +1,6 @@
+---
+'@twind/preset-tailwind': patch
+'twind': patch
+---
+
+feat: support rgb and hsl colors opacity conversion

package.json

@@ -57,7 +57,7 @@
       "path": "packages/twind/dist/twind.esnext.js",
       "import": "{ twind, cssom }",
       "brotli": true,
-      "limit": "4.5kb"
+      "limit": "4.6kb"
     },
     {
       "name": "@twind/cdn",

packages/preset-tailwind/src/rules.test.json

@@ -1086,16 +1086,16 @@
     ]
   ],
   "bg-[rgb(123,123,123)] bg-[rgba(123,123,123,var(--tw-bg-opacity,1))]": [
-    "bg-[rgba(123,123,123,var(--tw-bg-opacity,1))] bg-[rgb(123,123,123)]",
+    "bg-[rgb(123,123,123)] bg-[rgba(123,123,123,var(--tw-bg-opacity,1))]",
     [
-      ".bg-\\[rgba\\(123\\,123\\,123\\,var\\(--tw-bg-opacity\\,1\\)\\)\\]{--tw-bg-opacity:1;background-color:rgba(123,123,123,var(--tw-bg-opacity,1))}",
-      ".bg-\\[rgb\\(123\\,123\\,123\\)\\]{background-color:rgb(123,123,123)}"
+      ".bg-\\[rgb\\(123\\,123\\,123\\)\\]{--tw-bg-opacity:1;background-color:rgba(123,123,123,var(--tw-bg-opacity))}",
+      ".bg-\\[rgba\\(123\\,123\\,123\\,var\\(--tw-bg-opacity\\,1\\)\\)\\]{--tw-bg-opacity:1;background-color:rgba(123,123,123,var(--tw-bg-opacity,1))}"
     ]
   ],
   "bg-[hsl(0,100%,50%)] bg-[hsla(0,100%,50%,0.3)]": [
     "bg-[hsl(0,100%,50%)] bg-[hsla(0,100%,50%,0.3)]",
     [
-      ".bg-\\[hsl\\(0\\,100\\%\\,50\\%\\)\\]{background-color:hsl(0,100%,50%)}",
+      ".bg-\\[hsl\\(0\\,100\\%\\,50\\%\\)\\]{--tw-bg-opacity:1;background-color:hsla(0,100%,50%,var(--tw-bg-opacity))}",
       ".bg-\\[hsla\\(0\\,100\\%\\,50\\%\\,0\\.3\\)\\]{background-color:hsla(0,100%,50%,0.3)}"
     ]
   ],
@@ -1124,6 +1124,20 @@
       ".to-\\[hsla\\(0\\,100\\%\\,50\\%\\,0\\.3\\)\\]{--tw-gradient-to:hsla(0,100%,50%,0.3)}"
     ]
   ],
+  "from-[rgb(123,123,123)]/80 to-[rgb(123,123,123)]/[.35]": [
+    "from-[rgb(123,123,123)]/80 to-[rgb(123,123,123)]/[.35]",
+    [
+      ".from-\\[rgb\\(123\\,123\\,123\\)\\]\\/80{--tw-gradient-from:rgba(123,123,123,0.8);--tw-gradient-to:#0000;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}",
+      ".to-\\[rgb\\(123\\,123\\,123\\)\\]\\/\\[\\.35\\]{--tw-gradient-to:rgba(123,123,123,.35)}"
+    ]
+  ],
+  "from-[hsl(0,100%,50%)]/10 to-[hsl(0,100%,50%)]/30": [
+    "from-[hsl(0,100%,50%)]/10 to-[hsl(0,100%,50%)]/30",
+    [
+      ".from-\\[hsl\\(0\\,100\\%\\,50\\%\\)\\]\\/10{--tw-gradient-from:hsla(0,100%,50%,0.1);--tw-gradient-to:#0000;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}",
+      ".to-\\[hsl\\(0\\,100\\%\\,50\\%\\)\\]\\/30{--tw-gradient-to:hsla(0,100%,50%,0.3)}"
+    ]
+  ],
   "w-[3.23rem]": ".w-\\[3\\.23rem\\]{width:3.23rem}",
   "w-[calc(100%+1rem)]": ".w-\\[calc\\(100\\%\\+1rem\\)\\]{width:calc(100% + 1rem)}",
   "space-x-[20cm]": ".space-x-\\[20cm\\]>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(20cm * calc(1 - var(--tw-space-x-reverse)));margin-right:calc(20cm * var(--tw-space-x-reverse))}",

packages/twind/package.json

@@ -43,7 +43,7 @@
       "path": "dist/twind.esnext.js",
       "import": "{ twind, cssom }",
       "brotli": true,
-      "limit": "4.5kb"
+      "limit": "4.6kb"
     }
   ],
   "dependencies": {

packages/twind/src/colors.ts

@@ -25,11 +25,11 @@ export function toColorValue(color: ColorValue, options: ColorFunctionOptions =
     ]})`
   }
 
-  // TODO: some other format like rgba(), hsla(), ...
   if (opacity == '1') return color
   if (opacity == '0') return '#0000'
 
-  return color
+  // convert rgb and hsl to alpha variant
+  return color.replace(/^(rgb|hsl)(\([^)]+)\)$/, `$1a$2,${opacity})`)
 }
 
 /**