From 567bdc72ee1d92122d290eb41d60b0cc376fdd7a Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 7 May 2021 19:28:46 -0400 Subject: [PATCH 1/4] Move border reset to borderColor plugin, support opacity --- src/plugins/borderColor.js | 10 +++++++++- src/plugins/css/preflight.css | 2 +- tests/fixtures/tailwind-output-flagged.css | 7 ++++++- tests/fixtures/tailwind-output-important.css | 7 ++++++- tests/fixtures/tailwind-output-no-color-opacity.css | 7 ++++++- tests/fixtures/tailwind-output.css | 7 ++++++- 6 files changed, 34 insertions(+), 6 deletions(-) diff --git a/src/plugins/borderColor.js b/src/plugins/borderColor.js index 39bb2a83f54b..a93815fa6e91 100644 --- a/src/plugins/borderColor.js +++ b/src/plugins/borderColor.js @@ -2,7 +2,15 @@ import flattenColorPalette from '../util/flattenColorPalette' import withAlphaVariable from '../util/withAlphaVariable' export default function () { - return function ({ matchUtilities, theme, variants, corePlugins }) { + return function ({ addBase, matchUtilities, theme, variants, corePlugins }) { + addBase({ + '*, ::before, ::after': withAlphaVariable({ + color: theme('borderColor.DEFAULT', 'currentColor'), + property: 'border-color', + variable: '--tw-border-opacity', + }), + }) + matchUtilities( { border: (value) => { diff --git a/src/plugins/css/preflight.css b/src/plugins/css/preflight.css index 47b152638181..c92180636046 100644 --- a/src/plugins/css/preflight.css +++ b/src/plugins/css/preflight.css @@ -110,7 +110,7 @@ body { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ - border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */ + border-color: currentColor; /* 2 */ } /* diff --git a/tests/fixtures/tailwind-output-flagged.css b/tests/fixtures/tailwind-output-flagged.css index e718a71c36ba..4ed0cddb1a5b 100644 --- a/tests/fixtures/tailwind-output-flagged.css +++ b/tests/fixtures/tailwind-output-flagged.css @@ -410,7 +410,7 @@ body { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ - border-color: #e5e7eb; /* 2 */ + border-color: currentColor; /* 2 */ } /* @@ -539,6 +539,11 @@ video { height: auto; } +*, ::before, ::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} + .container { width: 100%; } diff --git a/tests/fixtures/tailwind-output-important.css b/tests/fixtures/tailwind-output-important.css index 60363f45fabd..20bc0762d67c 100644 --- a/tests/fixtures/tailwind-output-important.css +++ b/tests/fixtures/tailwind-output-important.css @@ -410,7 +410,7 @@ body { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ - border-color: #e5e7eb; /* 2 */ + border-color: currentColor; /* 2 */ } /* @@ -539,6 +539,11 @@ video { height: auto; } +*, ::before, ::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} + .container { width: 100%; } diff --git a/tests/fixtures/tailwind-output-no-color-opacity.css b/tests/fixtures/tailwind-output-no-color-opacity.css index e5743d33a648..cc6de6f3be97 100644 --- a/tests/fixtures/tailwind-output-no-color-opacity.css +++ b/tests/fixtures/tailwind-output-no-color-opacity.css @@ -410,7 +410,7 @@ body { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ - border-color: #e5e7eb; /* 2 */ + border-color: currentColor; /* 2 */ } /* @@ -539,6 +539,11 @@ video { height: auto; } +*, ::before, ::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} + .container { width: 100%; } diff --git a/tests/fixtures/tailwind-output.css b/tests/fixtures/tailwind-output.css index e718a71c36ba..4ed0cddb1a5b 100644 --- a/tests/fixtures/tailwind-output.css +++ b/tests/fixtures/tailwind-output.css @@ -410,7 +410,7 @@ body { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ - border-color: #e5e7eb; /* 2 */ + border-color: currentColor; /* 2 */ } /* @@ -539,6 +539,11 @@ video { height: auto; } +*, ::before, ::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} + .container { width: 100%; } From 2d98e1a24443e8e1a2155f6c647179f228a7638a Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 7 May 2021 19:42:51 -0400 Subject: [PATCH 2/4] Update JIT tests --- tests/jit/apply.test.css | 6 ++++++ tests/jit/arbitrary-values.test.css | 6 ++++++ tests/jit/basic-usage.test.css | 6 ++++++ tests/jit/collapse-adjacent-rules.test.css | 6 ++++++ tests/jit/custom-extractors.test.css | 6 ++++++ tests/jit/import-syntax.test.css | 6 ++++++ tests/jit/important-boolean.test.css | 6 ++++++ tests/jit/important-modifier-prefix.test.css | 6 ++++++ tests/jit/important-modifier.test.css | 6 ++++++ tests/jit/important-selector.test.css | 6 ++++++ tests/jit/kitchen-sink.test.css | 6 ++++++ tests/jit/opacity.test.css | 6 ++++++ tests/jit/prefix.test.css | 8 +++++++- tests/jit/raw-content.test.css | 6 ++++++ tests/jit/raw-content.test.js | 6 ++++++ tests/jit/relative-purge-paths.test.css | 6 ++++++ tests/jit/responsive-and-variants-atrules.test.css | 6 ++++++ tests/jit/svelte-syntax.test.css | 6 ++++++ tests/jit/variants.test.css | 6 ++++++ 19 files changed, 115 insertions(+), 1 deletion(-) diff --git a/tests/jit/apply.test.css b/tests/jit/apply.test.css index 7fe4ad6edc27..47e9c46e8e5b 100644 --- a/tests/jit/apply.test.css +++ b/tests/jit/apply.test.css @@ -1,3 +1,9 @@ +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); diff --git a/tests/jit/arbitrary-values.test.css b/tests/jit/arbitrary-values.test.css index 17919c8a2f93..e648584c26f4 100644 --- a/tests/jit/arbitrary-values.test.css +++ b/tests/jit/arbitrary-values.test.css @@ -1,3 +1,9 @@ +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); diff --git a/tests/jit/basic-usage.test.css b/tests/jit/basic-usage.test.css index aec70a93c57f..5cac102891a4 100644 --- a/tests/jit/basic-usage.test.css +++ b/tests/jit/basic-usage.test.css @@ -1,3 +1,9 @@ +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); diff --git a/tests/jit/collapse-adjacent-rules.test.css b/tests/jit/collapse-adjacent-rules.test.css index ceda37e53a0d..2c6fde984235 100644 --- a/tests/jit/collapse-adjacent-rules.test.css +++ b/tests/jit/collapse-adjacent-rules.test.css @@ -1,3 +1,9 @@ +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); diff --git a/tests/jit/custom-extractors.test.css b/tests/jit/custom-extractors.test.css index 423463dbc68a..c9dc240ea9c6 100644 --- a/tests/jit/custom-extractors.test.css +++ b/tests/jit/custom-extractors.test.css @@ -1,3 +1,9 @@ +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); diff --git a/tests/jit/import-syntax.test.css b/tests/jit/import-syntax.test.css index 030ec8a95e2a..9102974aad8e 100644 --- a/tests/jit/import-syntax.test.css +++ b/tests/jit/import-syntax.test.css @@ -1,3 +1,9 @@ +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); diff --git a/tests/jit/important-boolean.test.css b/tests/jit/important-boolean.test.css index 82113b5a3c72..59578775af96 100644 --- a/tests/jit/important-boolean.test.css +++ b/tests/jit/important-boolean.test.css @@ -1,3 +1,9 @@ +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); diff --git a/tests/jit/important-modifier-prefix.test.css b/tests/jit/important-modifier-prefix.test.css index 496153efaedf..379b79b81bd1 100644 --- a/tests/jit/important-modifier-prefix.test.css +++ b/tests/jit/important-modifier-prefix.test.css @@ -1,3 +1,9 @@ +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); diff --git a/tests/jit/important-modifier.test.css b/tests/jit/important-modifier.test.css index 27a8c99702d0..350af58acf5d 100644 --- a/tests/jit/important-modifier.test.css +++ b/tests/jit/important-modifier.test.css @@ -1,3 +1,9 @@ +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); diff --git a/tests/jit/important-selector.test.css b/tests/jit/important-selector.test.css index a6314012d407..1b983eb19ea7 100644 --- a/tests/jit/important-selector.test.css +++ b/tests/jit/important-selector.test.css @@ -1,3 +1,9 @@ +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); diff --git a/tests/jit/kitchen-sink.test.css b/tests/jit/kitchen-sink.test.css index 5c009ee38611..cb2d219bbf8b 100644 --- a/tests/jit/kitchen-sink.test.css +++ b/tests/jit/kitchen-sink.test.css @@ -126,6 +126,12 @@ } } } +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); diff --git a/tests/jit/opacity.test.css b/tests/jit/opacity.test.css index 4c280ce48756..ff3991903c1a 100644 --- a/tests/jit/opacity.test.css +++ b/tests/jit/opacity.test.css @@ -1,3 +1,9 @@ +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); diff --git a/tests/jit/prefix.test.css b/tests/jit/prefix.test.css index 704acd839d6d..fca82e997154 100644 --- a/tests/jit/prefix.test.css +++ b/tests/jit/prefix.test.css @@ -1,3 +1,9 @@ +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); @@ -73,7 +79,7 @@ .tw-group:hover .group-hover\:focus-within\:tw-text-left:focus-within { text-align: left; } -[dir="rtl"] .rtl\:active\:tw-text-center:active { +[dir='rtl'] .rtl\:active\:tw-text-center:active { text-align: center; } @media (prefers-reduced-motion: no-preference) { diff --git a/tests/jit/raw-content.test.css b/tests/jit/raw-content.test.css index aec70a93c57f..5cac102891a4 100644 --- a/tests/jit/raw-content.test.css +++ b/tests/jit/raw-content.test.css @@ -1,3 +1,9 @@ +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); diff --git a/tests/jit/raw-content.test.js b/tests/jit/raw-content.test.js index b699a22ab5d6..841af912cc9f 100644 --- a/tests/jit/raw-content.test.js +++ b/tests/jit/raw-content.test.js @@ -71,6 +71,12 @@ test('raw content with extension', () => { return run(tailwind, css, config).then((result) => { expect(result.css).toMatchFormattedCss(` + *, + ::before, + ::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); + } * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); diff --git a/tests/jit/relative-purge-paths.test.css b/tests/jit/relative-purge-paths.test.css index aec70a93c57f..5cac102891a4 100644 --- a/tests/jit/relative-purge-paths.test.css +++ b/tests/jit/relative-purge-paths.test.css @@ -1,3 +1,9 @@ +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); diff --git a/tests/jit/responsive-and-variants-atrules.test.css b/tests/jit/responsive-and-variants-atrules.test.css index 46b11b011ea3..9ce434251a49 100644 --- a/tests/jit/responsive-and-variants-atrules.test.css +++ b/tests/jit/responsive-and-variants-atrules.test.css @@ -1,3 +1,9 @@ +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); diff --git a/tests/jit/svelte-syntax.test.css b/tests/jit/svelte-syntax.test.css index c95fe681432e..bae10582306d 100644 --- a/tests/jit/svelte-syntax.test.css +++ b/tests/jit/svelte-syntax.test.css @@ -1,3 +1,9 @@ +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); diff --git a/tests/jit/variants.test.css b/tests/jit/variants.test.css index 8d12a7ffd5b6..bacdad6ae41a 100644 --- a/tests/jit/variants.test.css +++ b/tests/jit/variants.test.css @@ -1,3 +1,9 @@ +*, +::before, +::after { + --tw-border-opacity: 1; + border-color: rgba(229, 231, 235, var(--tw-border-opacity)); +} * { --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); From 2aabb638c71b79ebdb17adbd565df1c9e6c3d764 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 7 May 2021 19:49:15 -0400 Subject: [PATCH 3/4] Don't use opacity variable for default border color when borderOpacity is disabled --- src/plugins/borderColor.js | 22 +++++++++++++++------- tests/jit/opacity.test.css | 3 +-- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/plugins/borderColor.js b/src/plugins/borderColor.js index a93815fa6e91..1f12045bcc73 100644 --- a/src/plugins/borderColor.js +++ b/src/plugins/borderColor.js @@ -3,13 +3,21 @@ import withAlphaVariable from '../util/withAlphaVariable' export default function () { return function ({ addBase, matchUtilities, theme, variants, corePlugins }) { - addBase({ - '*, ::before, ::after': withAlphaVariable({ - color: theme('borderColor.DEFAULT', 'currentColor'), - property: 'border-color', - variable: '--tw-border-opacity', - }), - }) + if (!corePlugins('borderOpacity')) { + addBase({ + '*, ::before, ::after': { + 'border-color': theme('borderColor.DEFAULT', 'currentColor'), + }, + }) + } else { + addBase({ + '*, ::before, ::after': withAlphaVariable({ + color: theme('borderColor.DEFAULT', 'currentColor'), + property: 'border-color', + variable: '--tw-border-opacity', + }), + }) + } matchUtilities( { diff --git a/tests/jit/opacity.test.css b/tests/jit/opacity.test.css index ff3991903c1a..1d573fe7a5a5 100644 --- a/tests/jit/opacity.test.css +++ b/tests/jit/opacity.test.css @@ -1,8 +1,7 @@ *, ::before, ::after { - --tw-border-opacity: 1; - border-color: rgba(229, 231, 235, var(--tw-border-opacity)); + border-color: #e5e7eb; } * { --tw-shadow: 0 0 #0000; From a71cf25e526587f73be0bd7fcb30bebc9b15755c Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 7 May 2021 19:59:58 -0400 Subject: [PATCH 4/4] Fix tests --- tests/fixtures/tailwind-output-no-color-opacity.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/tests/fixtures/tailwind-output-no-color-opacity.css b/tests/fixtures/tailwind-output-no-color-opacity.css index cc6de6f3be97..a4644aa179fb 100644 --- a/tests/fixtures/tailwind-output-no-color-opacity.css +++ b/tests/fixtures/tailwind-output-no-color-opacity.css @@ -540,8 +540,7 @@ video { } *, ::before, ::after { - --tw-border-opacity: 1; - border-color: rgba(229, 231, 235, var(--tw-border-opacity)); + border-color: #e5e7eb; } .container {