Allow for custom properties in rgb, rgba, hsl and hsla colors (…

…#7933) * allow for custom properties in `rgb`, `rgba`, `hsl` and `hsla` colors * update changelog * add more `parseColor` test cases
tailwindlabs · Mar 24, 2022 · 315e3a2 · 315e3a2
1 parent f3a629a
commit 315e3a2
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 36 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix extraction from template literal/function with array ([#7481](https://github.com/tailwindlabs/tailwindcss/pull/7481))
 - Don't output unparsable arbitrary values ([#7789](https://github.com/tailwindlabs/tailwindcss/pull/7789))
 - Fix generation of `div:not(.foo)` if `.foo` is never defined ([#7815](https://github.com/tailwindlabs/tailwindcss/pull/7815))
+- Allow for custom properties in `rgb`, `rgba`, `hsl` and `hsla` colors ([#7933](https://github.com/tailwindlabs/tailwindcss/pull/7933))
 
 ### Changed
 

diff --git a/src/util/color.js b/src/util/color.js
@@ -2,14 +2,16 @@ import namedColors from 'color-name'
 
 let HEX = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i
 let SHORT_HEX = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i
-let VALUE = `(?:\\d+|\\d*\\.\\d+)%?`
-let SEP = `(?:\\s*,\\s*|\\s+)`
-let ALPHA_SEP = `\\s*[,/]\\s*`
+let VALUE = /(?:\d+|\d*\.\d+)%?/
+let SEP = /(?:\s*,\s*|\s+)/
+let ALPHA_SEP = /\s*[,/]\s*/
+let CUSTOM_PROPERTY = /var\(--(?:[^ )]*?)\)/
+
 let RGB = new RegExp(
-  `^rgba?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`
+  `^rgba?\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source})${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
 )
 let HSL = new RegExp(
-  `^hsla?\\(\\s*((?:${VALUE})(?:deg|rad|grad|turn)?)${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`
+  `^hsla?\\(\\s*((?:${VALUE.source})(?:deg|rad|grad|turn)?|${CUSTOM_PROPERTY.source})${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source})${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
 )
 
 export function parseColor(value) {

diff --git a/tests/color-opacity-modifiers.test.js b/tests/color-opacity-modifiers.test.js
@@ -178,3 +178,62 @@ test('utilities that support any type are supported', async () => {
     `)
   })
 })
+
+test('opacity modifier in combination with partial custom properties', async () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <div class="bg-[hsl(var(--foo),50%,50%)]"></div>
+          <div class="bg-[hsl(123,var(--foo),50%)]"></div>
+          <div class="bg-[hsl(123,50%,var(--foo))]"></div>
+          <div class="bg-[hsl(var(--foo),50%,50%)]/50"></div>
+          <div class="bg-[hsl(123,var(--foo),50%)]/50"></div>
+          <div class="bg-[hsl(123,50%,var(--foo))]/50"></div>
+          <div class="bg-[hsl(var(--foo),var(--bar),var(--baz))]/50"></div>
+        `,
+      },
+    ],
+    corePlugins: { preflight: false },
+    plugins: [],
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .bg-\[hsl\(var\(--foo\)\2c 50\%\2c 50\%\)\] {
+        --tw-bg-opacity: 1;
+        background-color: hsl(var(--foo) 50% 50% / var(--tw-bg-opacity));
+      }
+
+      .bg-\[hsl\(123\2c var\(--foo\)\2c 50\%\)\] {
+        --tw-bg-opacity: 1;
+        background-color: hsl(123 var(--foo) 50% / var(--tw-bg-opacity));
+      }
+
+      .bg-\[hsl\(123\2c 50\%\2c var\(--foo\)\)\] {
+        --tw-bg-opacity: 1;
+        background-color: hsl(123 50% var(--foo) / var(--tw-bg-opacity));
+      }
+
+      .bg-\[hsl\(var\(--foo\)\2c 50\%\2c 50\%\)\]\/50 {
+        background-color: hsl(var(--foo) 50% 50% / 0.5);
+      }
+
+      .bg-\[hsl\(123\2c var\(--foo\)\2c 50\%\)\]\/50 {
+        background-color: hsl(123 var(--foo) 50% / 0.5);
+      }
+
+      .bg-\[hsl\(123\2c 50\%\2c var\(--foo\)\)\]\/50 {
+        background-color: hsl(123 50% var(--foo) / 0.5);
+      }
+
+      .bg-\[hsl\(var\(--foo\)\2c var\(--bar\)\2c var\(--baz\)\)\]\/50 {
+        background-color: hsl(var(--foo) var(--bar) var(--baz) / 0.5);
+      }
+    `)
+  })
+})
diff --git a/tests/color.test.js b/tests/color.test.js
@@ -2,37 +2,61 @@ import { parseColor, formatColor } from '../src/util/color'
 
 describe('parseColor', () => {
   it.each`
-    color                           | output
-    ${'black'}                      | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: undefined }}
-    ${'#0088cc'}                    | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
-    ${'#08c'}                       | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
-    ${'#0088cc99'}                  | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
-    ${'#08c9'}                      | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
-    ${'rgb(0, 30, 60)'}             | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
-    ${'rgba(0, 30, 60, 0.5)'}       | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
-    ${'rgb(0 30 60)'}               | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
-    ${'rgb(0 30 60 / 0.5)'}         | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
-    ${'hsl(0, 30%, 60%)'}           | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0deg, 30%, 60%)'}        | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0rad, 30%, 60%)'}        | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0grad, 30%, 60%)'}       | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0turn, 30%, 60%)'}       | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: undefined }}
-    ${'hsla(0, 30%, 60%, 0.5)'}     | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
-    ${'hsla(0deg, 30%, 60%, 0.5)'}  | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: '0.5' }}
-    ${'hsla(0rad, 30%, 60%, 0.5)'}  | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: '0.5' }}
-    ${'hsla(0grad, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: '0.5' }}
-    ${'hsla(0turn, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: '0.5' }}
-    ${'hsl(0 30% 60%)'}             | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0deg 30% 60%)'}          | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0rad 30% 60%)'}          | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0grad 30% 60%)'}         | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0turn 30% 60%)'}         | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0 30% 60% / 0.5)'}       | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
-    ${'hsl(0deg 30% 60% / 0.5)'}    | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: '0.5' }}
-    ${'hsl(0rad 30% 60% / 0.5)'}    | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: '0.5' }}
-    ${'hsl(0grad 30% 60% / 0.5)'}   | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: '0.5' }}
-    ${'hsl(0turn 30% 60% / 0.5)'}   | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: '0.5' }}
-    ${'transparent'}                | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: '0' }}
+    color                                        | output
+    ${'black'}                                   | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: undefined }}
+    ${'#0088cc'}                                 | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
+    ${'#08c'}                                    | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
+    ${'#0088cc99'}                               | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
+    ${'#08c9'}                                   | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
+    ${'rgb(0, 30, 60)'}                          | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
+    ${'rgba(0, 30, 60, 0.5)'}                    | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
+    ${'rgb(0 30 60)'}                            | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
+    ${'rgb(0 30 60 / 0.5)'}                      | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
+    ${'rgb(var(--foo), 30, 60)'}                 | ${{ mode: 'rgb', color: ['var(--foo)', '30', '60'], alpha: undefined }}
+    ${'rgb(0, var(--foo), 60)'}                  | ${{ mode: 'rgb', color: ['0', 'var(--foo)', '60'], alpha: undefined }}
+    ${'rgb(0, 30, var(--foo))'}                  | ${{ mode: 'rgb', color: ['0', '30', 'var(--foo)'], alpha: undefined }}
+    ${'rgb(0, 30, var(--foo), 0.5)'}             | ${{ mode: 'rgb', color: ['0', '30', 'var(--foo)'], alpha: '0.5' }}
+    ${'rgb(var(--foo), 30, var(--bar))'}         | ${{ mode: 'rgb', color: ['var(--foo)', '30', 'var(--bar)'], alpha: undefined }}
+    ${'rgb(var(--foo), var(--bar), var(--baz))'} | ${{ mode: 'rgb', color: ['var(--foo)', 'var(--bar)', 'var(--baz)'], alpha: undefined }}
+    ${'rgb(var(--foo) 30 60)'}                   | ${{ mode: 'rgb', color: ['var(--foo)', '30', '60'], alpha: undefined }}
+    ${'rgb(0 var(--foo) 60)'}                    | ${{ mode: 'rgb', color: ['0', 'var(--foo)', '60'], alpha: undefined }}
+    ${'rgb(0 30 var(--foo))'}                    | ${{ mode: 'rgb', color: ['0', '30', 'var(--foo)'], alpha: undefined }}
+    ${'rgb(0 30 var(--foo) / 0.5)'}              | ${{ mode: 'rgb', color: ['0', '30', 'var(--foo)'], alpha: '0.5' }}
+    ${'rgb(var(--foo) 30 var(--bar))'}           | ${{ mode: 'rgb', color: ['var(--foo)', '30', 'var(--bar)'], alpha: undefined }}
+    ${'rgb(var(--foo) var(--bar) var(--baz))'}   | ${{ mode: 'rgb', color: ['var(--foo)', 'var(--bar)', 'var(--baz)'], alpha: undefined }}
+    ${'hsl(0, 30%, 60%)'}                        | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0deg, 30%, 60%)'}                     | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0rad, 30%, 60%)'}                     | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0grad, 30%, 60%)'}                    | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0turn, 30%, 60%)'}                    | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: undefined }}
+    ${'hsla(0, 30%, 60%, 0.5)'}                  | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
+    ${'hsla(0deg, 30%, 60%, 0.5)'}               | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: '0.5' }}
+    ${'hsla(0rad, 30%, 60%, 0.5)'}               | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: '0.5' }}
+    ${'hsla(0grad, 30%, 60%, 0.5)'}              | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: '0.5' }}
+    ${'hsla(0turn, 30%, 60%, 0.5)'}              | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: '0.5' }}
+    ${'hsl(0 30% 60%)'}                          | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0deg 30% 60%)'}                       | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0rad 30% 60%)'}                       | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0grad 30% 60%)'}                      | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0turn 30% 60%)'}                      | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0 30% 60% / 0.5)'}                    | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
+    ${'hsl(0deg 30% 60% / 0.5)'}                 | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: '0.5' }}
+    ${'hsl(0rad 30% 60% / 0.5)'}                 | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: '0.5' }}
+    ${'hsl(0grad 30% 60% / 0.5)'}                | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: '0.5' }}
+    ${'hsl(0turn 30% 60% / 0.5)'}                | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: '0.5' }}
+    ${'hsl(var(--foo), 30%, 60%)'}               | ${{ mode: 'hsl', color: ['var(--foo)', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0, var(--foo), 60%)'}                 | ${{ mode: 'hsl', color: ['0', 'var(--foo)', '60%'], alpha: undefined }}
+    ${'hsl(0, 30%, var(--foo))'}                 | ${{ mode: 'hsl', color: ['0', '30%', 'var(--foo)'], alpha: undefined }}
+    ${'hsl(0, 30%, var(--foo), 0.5)'}            | ${{ mode: 'hsl', color: ['0', '30%', 'var(--foo)'], alpha: '0.5' }}
+    ${'hsl(var(--foo), 30%, var(--bar))'}        | ${{ mode: 'hsl', color: ['var(--foo)', '30%', 'var(--bar)'], alpha: undefined }}
+    ${'hsl(var(--foo), var(--bar), var(--baz))'} | ${{ mode: 'hsl', color: ['var(--foo)', 'var(--bar)', 'var(--baz)'], alpha: undefined }}
+    ${'hsl(var(--foo) 30% 60%)'}                 | ${{ mode: 'hsl', color: ['var(--foo)', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0 var(--foo) 60%)'}                   | ${{ mode: 'hsl', color: ['0', 'var(--foo)', '60%'], alpha: undefined }}
+    ${'hsl(0 30% var(--foo))'}                   | ${{ mode: 'hsl', color: ['0', '30%', 'var(--foo)'], alpha: undefined }}
+    ${'hsl(0 30% var(--foo) / 0.5)'}             | ${{ mode: 'hsl', color: ['0', '30%', 'var(--foo)'], alpha: '0.5' }}
+    ${'hsl(var(--foo) 30% var(--bar))'}          | ${{ mode: 'hsl', color: ['var(--foo)', '30%', 'var(--bar)'], alpha: undefined }}
+    ${'hsl(var(--foo) var(--bar) var(--baz))'}   | ${{ mode: 'hsl', color: ['var(--foo)', 'var(--bar)', 'var(--baz)'], alpha: undefined }}
+    ${'transparent'}                             | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: '0' }}
   `('should parse "$color" to the correct value', ({ color, output }) => {
     expect(parseColor(color)).toEqual(output)
   })