Support border-opacity with default border color (#4277)

* Move border reset to borderColor plugin, support opacity

* Update JIT tests

* Don't use opacity variable for default border color when borderOpacity is disabled

* Fix tests

src/plugins/borderColor.js

@@ -2,7 +2,23 @@ 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 }) {
+    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(
       {
         border: (value) => {

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 */
 }
 
 /*

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%;
 }

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%;
 }

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,10 @@ video {
   height: auto;
 }
 
+*, ::before, ::after {
+  border-color: #e5e7eb;
+}
+
 .container {
   width: 100%;
 }

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%;
 }

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, /*!*/ /*!*/);

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, /*!*/ /*!*/);

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, /*!*/ /*!*/);

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, /*!*/ /*!*/);

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, /*!*/ /*!*/);

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, /*!*/ /*!*/);

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, /*!*/ /*!*/);

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, /*!*/ /*!*/);

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, /*!*/ /*!*/);

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, /*!*/ /*!*/);

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, /*!*/ /*!*/);

tests/jit/opacity.test.css

@@ -1,3 +1,8 @@
+*,
+::before,
+::after {
+  border-color: #e5e7eb;
+}
 * {
   --tw-shadow: 0 0 #0000;
   --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);

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) {

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, /*!*/ /*!*/);

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, /*!*/ /*!*/);

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, /*!*/ /*!*/);

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, /*!*/ /*!*/);

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, /*!*/ /*!*/);

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, /*!*/ /*!*/);