Skip to content

Commit 885e134

Browse files
thecrypticacethecrypticace
authored
Parse alpha value from rgba/hsla colors when using variables (#10429)
* Parse alpha value from rgba/hsla colors * Update changelog
1 parent 9e216e4 commit 885e134

File tree

4 files changed

+51
-8
lines changed

4 files changed

+51
-8
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
4343
- Ensure generated CSS is always sorted in the same order for a given set of templates ([#10382](https://github.com/tailwindlabs/tailwindcss/pull/10382))
4444
- Handle variants when the same class appears multiple times in a selector ([#10397](https://github.com/tailwindlabs/tailwindcss/pull/10397))
4545
- Handle group/peer variants with quoted strings ([#10400](https://github.com/tailwindlabs/tailwindcss/pull/10400))
46+
- Parse alpha value from rgba/hsla colors when using variables ([#10429](https://github.com/tailwindlabs/tailwindcss/pull/10429))
4647

4748
### Changed
4849

‎src/util/color.js

+17-2
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ let ALPHA_SEP = /\s*[,/]\s*/
88
let CUSTOM_PROPERTY = /var\(--(?:[^ )]*?)\)/
99

1010
let RGB = new RegExp(
11-
`^(rgb)a?\\(\\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*\\)$`
11+
`^(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*\\)$`
1212
)
1313
let HSL = new RegExp(
14-
`^(hsl)a?\\(\\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*\\)$`
14+
`^(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*\\)$`
1515
)
1616

1717
// In "loose" mode the color may contain fewer than 3 parts, as long as at least
@@ -52,6 +52,16 @@ export function parseColor(value, { loose = false } = {}) {
5252

5353
let color = [match[2], match[3], match[4]].filter(Boolean).map((v) => v.toString())
5454

55+
// rgba(var(--my-color), 0.1)
56+
// hsla(var(--my-color), 0.1)
57+
if (color.length === 2 && color[0].startsWith('var(')) {
58+
return {
59+
mode: match[1],
60+
color: [color[0]],
61+
alpha: color[1],
62+
}
63+
}
64+
5565
if (!loose && color.length !== 3) {
5666
return null
5767
}
@@ -69,5 +79,10 @@ export function parseColor(value, { loose = false } = {}) {
6979

7080
export function formatColor({ mode, color, alpha }) {
7181
let hasAlpha = alpha !== undefined
82+
83+
if (mode === 'rgba' || mode === 'hsla') {
84+
return `${mode}(${color.join(', ')}${hasAlpha ? `, ${alpha}` : ''})`
85+
}
86+
7287
return `${mode}(${color.join(' ')}${hasAlpha ? ` / ${alpha}` : ''})`
7388
}

‎tests/color.test.js

+10-6
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ crosscheck(() => {
1111
${'#0088cc99'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
1212
${'#08c9'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
1313
${'rgb(0, 30, 60)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
14-
${'rgba(0, 30, 60, 0.5)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
14+
${'rgba(0, 30, 60, 0.5)'} | ${{ mode: 'rgba', color: ['0', '30', '60'], alpha: '0.5' }}
1515
${'rgb(0 30 60)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
1616
${'rgb(0 30 60 / 0.5)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
1717
${'rgb(var(--foo), 30, 60)'} | ${{ mode: 'rgb', color: ['var(--foo)', '30', '60'], alpha: undefined }}
@@ -31,11 +31,11 @@ crosscheck(() => {
3131
${'hsl(0rad, 30%, 60%)'} | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: undefined }}
3232
${'hsl(0grad, 30%, 60%)'} | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: undefined }}
3333
${'hsl(0turn, 30%, 60%)'} | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: undefined }}
34-
${'hsla(0, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
35-
${'hsla(0deg, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: '0.5' }}
36-
${'hsla(0rad, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: '0.5' }}
37-
${'hsla(0grad, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: '0.5' }}
38-
${'hsla(0turn, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: '0.5' }}
34+
${'hsla(0, 30%, 60%, 0.5)'} | ${{ mode: 'hsla', color: ['0', '30%', '60%'], alpha: '0.5' }}
35+
${'hsla(0deg, 30%, 60%, 0.5)'} | ${{ mode: 'hsla', color: ['0deg', '30%', '60%'], alpha: '0.5' }}
36+
${'hsla(0rad, 30%, 60%, 0.5)'} | ${{ mode: 'hsla', color: ['0rad', '30%', '60%'], alpha: '0.5' }}
37+
${'hsla(0grad, 30%, 60%, 0.5)'} | ${{ mode: 'hsla', color: ['0grad', '30%', '60%'], alpha: '0.5' }}
38+
${'hsla(0turn, 30%, 60%, 0.5)'} | ${{ mode: 'hsla', color: ['0turn', '30%', '60%'], alpha: '0.5' }}
3939
${'hsl(0 30% 60%)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
4040
${'hsl(0deg 30% 60%)'} | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: undefined }}
4141
${'hsl(0rad 30% 60%)'} | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: undefined }}
@@ -58,6 +58,10 @@ crosscheck(() => {
5858
${'hsl(0 30% var(--foo) / 0.5)'} | ${{ mode: 'hsl', color: ['0', '30%', 'var(--foo)'], alpha: '0.5' }}
5959
${'hsl(var(--foo) 30% var(--bar))'} | ${{ mode: 'hsl', color: ['var(--foo)', '30%', 'var(--bar)'], alpha: undefined }}
6060
${'hsl(var(--foo) var(--bar) var(--baz))'} | ${{ mode: 'hsl', color: ['var(--foo)', 'var(--bar)', 'var(--baz)'], alpha: undefined }}
61+
${'rgba(var(--foo), 0.1)'} | ${{ mode: 'rgba', color: ['var(--foo)'], alpha: '0.1' }}
62+
${'rgba(var(--foo), var(--alpha))'} | ${{ mode: 'rgba', color: ['var(--foo)'], alpha: 'var(--alpha)' }}
63+
${'hsla(var(--foo), 0.1)'} | ${{ mode: 'hsla', color: ['var(--foo)'], alpha: '0.1' }}
64+
${'hsla(var(--foo), var(--alpha))'} | ${{ mode: 'hsla', color: ['var(--foo)'], alpha: 'var(--alpha)' }}
6165
${'transparent'} | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: '0' }}
6266
`('should parse "$color" to the correct value', ({ color, output }) => {
6367
expect(parseColor(color)).toEqual(output)

‎tests/opacity.test.js

+23
Original file line numberDiff line numberDiff line change
@@ -1023,4 +1023,27 @@ crosscheck(() => {
10231023
`)
10241024
})
10251025
})
1026+
1027+
it('can replace the potential alpha value in rgba/hsla syntax', async () => {
1028+
let config = {
1029+
content: [{ raw: html` <div class="text-primary-rgba/50 text-primary-hsla/50"></div> ` }],
1030+
theme: {
1031+
colors: {
1032+
'primary-rgba': 'rgba(var(--color), 0.1)',
1033+
'primary-hsla': 'hsla(var(--color), 0.1)',
1034+
},
1035+
},
1036+
}
1037+
1038+
let result = await run('@tailwind utilities', config)
1039+
1040+
expect(result.css).toMatchCss(css`
1041+
.text-primary-hsla\/50 {
1042+
color: hsla(var(--color), 0.5);
1043+
}
1044+
.text-primary-rgba\/50 {
1045+
color: rgba(var(--color), 0.5);
1046+
}
1047+
`)
1048+
})
10261049
})

0 commit comments

Comments
 (0)