From 5a7d93a4e273abf6b30f30784709a3ac812cb5eb Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 7 Oct 2020 13:46:33 -0400 Subject: [PATCH 1/2] Always set color opacity variable, even if color cannot be parsed --- __tests__/withAlphaVariable.test.js | 10 ++++++++++ src/util/withAlphaVariable.js | 3 +++ 2 files changed, 13 insertions(+) diff --git a/__tests__/withAlphaVariable.test.js b/__tests__/withAlphaVariable.test.js index 11fc3a12d9ce..a18041118c45 100644 --- a/__tests__/withAlphaVariable.test.js +++ b/__tests__/withAlphaVariable.test.js @@ -17,6 +17,7 @@ test('it ignores colors that cannot be parsed', () => { variable: '--bg-opacity', }) ).toEqual({ + '--bg-opacity': '1', 'background-color': 'currentColor', }) }) @@ -29,6 +30,7 @@ test('it ignores colors that already have an alpha channel', () => { variable: '--bg-opacity', }) ).toEqual({ + '--bg-opacity': '1', 'background-color': '#ff0000ff', }) expect( @@ -38,6 +40,7 @@ test('it ignores colors that already have an alpha channel', () => { variable: '--bg-opacity', }) ).toEqual({ + '--bg-opacity': '1', 'background-color': '#ff000080', }) expect( @@ -47,6 +50,7 @@ test('it ignores colors that already have an alpha channel', () => { variable: '--bg-opacity', }) ).toEqual({ + '--bg-opacity': '1', 'background-color': '#f00a', }) expect( @@ -56,6 +60,7 @@ test('it ignores colors that already have an alpha channel', () => { variable: '--bg-opacity', }) ).toEqual({ + '--bg-opacity': '1', 'background-color': '#f00f', }) expect( @@ -65,6 +70,7 @@ test('it ignores colors that already have an alpha channel', () => { variable: '--bg-opacity', }) ).toEqual({ + '--bg-opacity': '1', 'background-color': 'rgba(255, 255, 255, 1)', }) expect( @@ -74,6 +80,7 @@ test('it ignores colors that already have an alpha channel', () => { variable: '--bg-opacity', }) ).toEqual({ + '--bg-opacity': '1', 'background-color': 'rgba(255, 255, 255, 0.5)', }) expect( @@ -83,6 +90,7 @@ test('it ignores colors that already have an alpha channel', () => { variable: '--bg-opacity', }) ).toEqual({ + '--bg-opacity': '1', 'background-color': 'hsla(240, 100%, 50%, 1)', }) expect( @@ -92,6 +100,7 @@ test('it ignores colors that already have an alpha channel', () => { variable: '--bg-opacity', }) ).toEqual({ + '--bg-opacity': '1', 'background-color': 'hsla(240, 100%, 50%, 0.5)', }) }) @@ -104,6 +113,7 @@ test('it allows a closure to be passed', () => { variable: '--bg-opacity', }) ).toEqual({ + '--bg-opacity': '1', 'background-color': 'rgba(0, 0, 0, var(--bg-opacity))', }) }) diff --git a/src/util/withAlphaVariable.js b/src/util/withAlphaVariable.js index 32a943420990..4fee8bad0bbe 100644 --- a/src/util/withAlphaVariable.js +++ b/src/util/withAlphaVariable.js @@ -21,6 +21,7 @@ export function toRgba(color) { export default function withAlphaVariable({ color, property, variable }) { if (_.isFunction(color)) { return { + [variable]: '1', [property]: color({ opacityVariable: variable }), } } @@ -30,6 +31,7 @@ export default function withAlphaVariable({ color, property, variable }) { if (a !== undefined) { return { + [variable]: '1', [property]: color, } } @@ -40,6 +42,7 @@ export default function withAlphaVariable({ color, property, variable }) { } } catch (error) { return { + [variable]: '1', [property]: color, } } From e4eb74183d4b2c9a73aced7a3b490711bf560c73 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 7 Oct 2020 13:55:51 -0400 Subject: [PATCH 2/2] Only set color opacity when it might be used --- __tests__/plugins/gradientColorStops.test.js | 1 + __tests__/withAlphaVariable.test.js | 9 --------- src/util/withAlphaVariable.js | 2 -- 3 files changed, 1 insertion(+), 11 deletions(-) diff --git a/__tests__/plugins/gradientColorStops.test.js b/__tests__/plugins/gradientColorStops.test.js index 826d5e30695e..f75a3a9da1a3 100644 --- a/__tests__/plugins/gradientColorStops.test.js +++ b/__tests__/plugins/gradientColorStops.test.js @@ -34,6 +34,7 @@ test('opacity variables are given to colors defined as closures', () => { .then(result => { const expected = ` .text-primary { + --text-opacity: 1; color: rgba(31,31,31,var(--text-opacity,1)) } .text-opacity-50 { diff --git a/__tests__/withAlphaVariable.test.js b/__tests__/withAlphaVariable.test.js index a18041118c45..4351bd00d9de 100644 --- a/__tests__/withAlphaVariable.test.js +++ b/__tests__/withAlphaVariable.test.js @@ -17,7 +17,6 @@ test('it ignores colors that cannot be parsed', () => { variable: '--bg-opacity', }) ).toEqual({ - '--bg-opacity': '1', 'background-color': 'currentColor', }) }) @@ -30,7 +29,6 @@ test('it ignores colors that already have an alpha channel', () => { variable: '--bg-opacity', }) ).toEqual({ - '--bg-opacity': '1', 'background-color': '#ff0000ff', }) expect( @@ -40,7 +38,6 @@ test('it ignores colors that already have an alpha channel', () => { variable: '--bg-opacity', }) ).toEqual({ - '--bg-opacity': '1', 'background-color': '#ff000080', }) expect( @@ -50,7 +47,6 @@ test('it ignores colors that already have an alpha channel', () => { variable: '--bg-opacity', }) ).toEqual({ - '--bg-opacity': '1', 'background-color': '#f00a', }) expect( @@ -60,7 +56,6 @@ test('it ignores colors that already have an alpha channel', () => { variable: '--bg-opacity', }) ).toEqual({ - '--bg-opacity': '1', 'background-color': '#f00f', }) expect( @@ -70,7 +65,6 @@ test('it ignores colors that already have an alpha channel', () => { variable: '--bg-opacity', }) ).toEqual({ - '--bg-opacity': '1', 'background-color': 'rgba(255, 255, 255, 1)', }) expect( @@ -80,7 +74,6 @@ test('it ignores colors that already have an alpha channel', () => { variable: '--bg-opacity', }) ).toEqual({ - '--bg-opacity': '1', 'background-color': 'rgba(255, 255, 255, 0.5)', }) expect( @@ -90,7 +83,6 @@ test('it ignores colors that already have an alpha channel', () => { variable: '--bg-opacity', }) ).toEqual({ - '--bg-opacity': '1', 'background-color': 'hsla(240, 100%, 50%, 1)', }) expect( @@ -100,7 +92,6 @@ test('it ignores colors that already have an alpha channel', () => { variable: '--bg-opacity', }) ).toEqual({ - '--bg-opacity': '1', 'background-color': 'hsla(240, 100%, 50%, 0.5)', }) }) diff --git a/src/util/withAlphaVariable.js b/src/util/withAlphaVariable.js index 4fee8bad0bbe..af0494855697 100644 --- a/src/util/withAlphaVariable.js +++ b/src/util/withAlphaVariable.js @@ -31,7 +31,6 @@ export default function withAlphaVariable({ color, property, variable }) { if (a !== undefined) { return { - [variable]: '1', [property]: color, } } @@ -42,7 +41,6 @@ export default function withAlphaVariable({ color, property, variable }) { } } catch (error) { return { - [variable]: '1', [property]: color, } }