fix: fix border-opacity utilities by overriding their plugin. Fix #16

thibaudcolas · Dec 30, 2022 · 33ae845 · 33ae845
1 parent b143104
commit 33ae845
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -17,16 +17,17 @@ const vanillaRTL = require("tailwindcss-vanilla-rtl");
 
 module.exports = {
   plugins: [
-    // […]
+    // Place at the top of `plugins` so other plugins can override the CSS just like they would for core utilities:
     vanillaRTL,
+    // […]
   ],
   corePlugins: {
     ...vanillaRTL.disabledCorePlugins,
   },
 };
 ```
 
-That’s it. Since the plugin uses the same utility classes as Tailwind core (`ml-4`, `px-10`, etc.), there’s no code to change, no new utilities to learn.
+That’s it. Since the plugin uses the same utility classes as Tailwind core (`ml-4`, `px-10`, etc.), there’s no code to change, no new utilities to learn. Make sure the plugin is at the top of the `plugins` list so its output can be overridden by other utilities, just like would be the case with Tailwind core plugins.
 
 The plugin is compatible with Tailwind v3.2 and up. For compatibility with older releases of Tailwind (starting with v3.0), use older releases of the package. See our [CHANGELOG](https://github.com/thibaudcolas/tailwindcss-vanilla-rtl/blob/main/CHANGELOG.md) to learn which release is compatible with each version of Tailwind.
 
@@ -63,6 +64,12 @@ Here are specific properties with very recent browser support to keep in mind:
   - Edge 79 (2020-01-15) and up
   - Firefox 68 (2019-07-09) and up
 
+## Compatibility with other plugins
+
+This plugin works with any other as long as it’s placed _first_ in the `plugins` list. Or at least above other plugins that add utilities using the same CSS properties. This is so the [CSS source order](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade#cascading_order) is the same as with core plugins.
+
+For full RTL support, any additional plugin should also use CSS logical properties and values.
+
 ## Design decisions
 
 - [RTL only](#rtl-only)

diff --git a/demo/index.html b/demo/index.html
@@ -56,16 +56,16 @@ <h2 id="how-it-works" class="text-xl pb-4">How it works</h2>
         Here’s an example:
       </p>
       <pre><code>
-&lt;blockquote dir="rtl" lang="en" class="border-l-4 border-gray-300 pl-2"&gt;
+&lt;blockquote dir="rtl" lang="en" class="border-l-4 border-gray-700 border-opacity-30 pl-2"&gt;
   Let the beauty of what you love be what you do.
 &lt;/blockquote&gt;
-&lt;blockquote dir="rtl" lang="ar" class="border-l-4 border-gray-300 pl-2"&gt;
+&lt;blockquote dir="rtl" lang="ar" class="border-l-4 border-gray-700 border-opacity-30 pl-2"&gt;
     ما تبحث عنه يبحث عنك
 &lt;/blockquote&gt;
-&lt;blockquote dir="rtl" lang="he" class="border-l-4 border-gray-300 pl-2"&gt;
+&lt;blockquote dir="rtl" lang="he" class="border-l-4 border-gray-700 border-opacity-30 pl-2"&gt;
   האהבה היא אוקיינוס שאין לו התחלה ואין לו סוף.
 &lt;/blockquote&gt;
-&lt;blockquote dir="rtl" lang="fa" class="border-l-4 border-gray-300 pl-2"&gt;
+&lt;blockquote dir="rtl" lang="fa" class="border-l-4 border-gray-700 border-opacity-30 pl-2"&gt;
   از محبت، نار نوری می‌شود// وز محبت، دیو حوری می‌شود
 &lt;/blockquote&gt;
       </code></pre>
@@ -96,7 +96,7 @@ <h2 id="demo" class="text-xl pb-4">Demo</h2>
         lang="en"
         class="px-4 pt-10 pb-8 mb-8 max-w-sm border-r-8 border-gray-500 bg-white shadow-sm rounded-lg mx-auto"
       >
-        <blockquote class="border-l-4 border-gray-300 pl-2">
+        <blockquote class="border-l-4 border-gray-700 border-opacity-30 pl-2">
           Let the beauty of what you love be what you do.
         </blockquote>
         <ul class="space-y-2 mt-4">
@@ -136,7 +136,7 @@ <h2 id="demo" class="text-xl pb-4">Demo</h2>
         lang="ar"
         class="px-4 pt-10 pb-8 mb-8 max-w-sm border-r-8 border-gray-500 bg-white shadow-sm rounded-lg mx-auto"
       >
-        <blockquote class="border-l-4 border-gray-300 pl-2">
+        <blockquote class="border-l-4 border-gray-700 border-opacity-30 pl-2">
           ما تبحث عنه يبحث عنك
         </blockquote>
         <ul class="space-y-2 mt-4">
@@ -176,7 +176,7 @@ <h2 id="demo" class="text-xl pb-4">Demo</h2>
         lang="he"
         class="px-4 pt-10 pb-8 mb-8 max-w-sm border-r-8 border-gray-500 bg-white shadow-sm rounded-lg mx-auto"
       >
-        <blockquote class="border-l-4 border-gray-300 pl-2">
+        <blockquote class="border-l-4 border-gray-700 border-opacity-30 pl-2">
           האהבה היא אוקיינוס שאין לו התחלה ואין לו סוף.
         </blockquote>
         <ul class="space-y-2 mt-4">
@@ -216,7 +216,7 @@ <h2 id="demo" class="text-xl pb-4">Demo</h2>
         lang="fa"
         class="px-4 pt-10 pb-8 mb-8 max-w-sm border-r-8 border-gray-500 bg-white shadow-sm rounded-lg mx-auto"
       >
-        <blockquote class="border-l-4 border-gray-300 pl-2">
+        <blockquote class="border-l-4 border-gray-700 border-opacity-30 pl-2">
           از محبت، نار نوری می‌شود// وز محبت، دیو حوری می‌شود
         </blockquote>
         <ul class="space-y-2 mt-4">

diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -1252,6 +1252,9 @@ export let corePlugins = {
   * Logical Properties and Values: overriding defaults.
   * Replaced `margin-left` with `margin-inline-start`, `margin-right` with `margin-inline-end`.
   * See https://caniuse.com/css-logical-props.
+  * Keep this overriden even if technically the left and right values are the same, so we retain the same
+  * source order between `space` and `margin` as in the core utilities.
+  * See https://github.com/thibaudcolas/tailwindcss-vanilla-rtl/issues/16.
   */
   space: ({ matchUtilities, addUtilities, theme }) => {
     matchUtilities(
@@ -1292,6 +1295,9 @@ export let corePlugins = {
   * Logical Properties and Values: overriding defaults.
   * Replaced `border-left-width` with `border-inline-start-width`, `border-right-width` with `border-inline-end-width`.
   * See https://caniuse.com/?search=border-inline-start-width.
+  * Keep this overriden even if technically the left and right values are the same, so we retain the same
+  * source order between `space` and `margin` as in the core utilities.
+  * See https://github.com/thibaudcolas/tailwindcss-vanilla-rtl/issues/16.
   */
   divideWidth: ({ matchUtilities, addUtilities, theme }) => {
     matchUtilities(
@@ -1549,7 +1555,10 @@ export let corePlugins = {
     matchUtilities(
       {
         border: (value) => {
-          if (!corePlugins('borderOpacity')) {
+          // Changing the conditional to keep borderOpacity support.
+          // See https://github.com/thibaudcolas/tailwindcss-vanilla-rtl/issues/16.
+          // if (!corePlugins('borderOpacity')) {
+          if (!true) {
             return {
               'border-color': toColorValue(value),
             }
@@ -1571,7 +1580,10 @@ export let corePlugins = {
     matchUtilities(
       {
         'border-x': (value) => {
-          if (!corePlugins('borderOpacity')) {
+          // Changing the conditional to keep borderOpacity support.
+          // See https://github.com/thibaudcolas/tailwindcss-vanilla-rtl/issues/16.
+          // if (!corePlugins('borderOpacity')) {
+          if (!true) {
             return {
               'border-inline-start-color': toColorValue(value),
               'border-inline-end-color': toColorValue(value),
@@ -1585,7 +1597,10 @@ export let corePlugins = {
           })
         },
         'border-y': (value) => {
-          if (!corePlugins('borderOpacity')) {
+          // Changing the conditional to keep borderOpacity support.
+          // See https://github.com/thibaudcolas/tailwindcss-vanilla-rtl/issues/16.
+          // if (!corePlugins('borderOpacity')) {
+          if (!true) {
             return {
               'border-top-color': toColorValue(value),
               'border-bottom-color': toColorValue(value),
@@ -1608,7 +1623,10 @@ export let corePlugins = {
     matchUtilities(
       {
         'border-t': (value) => {
-          if (!corePlugins('borderOpacity')) {
+          // Changing the conditional to keep borderOpacity support.
+          // See https://github.com/thibaudcolas/tailwindcss-vanilla-rtl/issues/16.
+          // if (!corePlugins('borderOpacity')) {
+          if (!true) {
             return {
               'border-top-color': toColorValue(value),
             }
@@ -1621,7 +1639,10 @@ export let corePlugins = {
           })
         },
         'border-r': (value) => {
-          if (!corePlugins('borderOpacity')) {
+          // Changing the conditional to keep borderOpacity support.
+          // See https://github.com/thibaudcolas/tailwindcss-vanilla-rtl/issues/16.
+          // if (!corePlugins('borderOpacity')) {
+          if (!true) {
             return {
               'border-inline-end-color': toColorValue(value),
             }
@@ -1634,7 +1655,10 @@ export let corePlugins = {
           })
         },
         'border-b': (value) => {
-          if (!corePlugins('borderOpacity')) {
+          // Changing the conditional to keep borderOpacity support.
+          // See https://github.com/thibaudcolas/tailwindcss-vanilla-rtl/issues/16.
+          // if (!corePlugins('borderOpacity')) {
+          if (!true) {
             return {
               'border-bottom-color': toColorValue(value),
             }
@@ -1647,7 +1671,10 @@ export let corePlugins = {
           })
         },
         'border-l': (value) => {
-          if (!corePlugins('borderOpacity')) {
+          // Changing the conditional to keep borderOpacity support.
+          // See https://github.com/thibaudcolas/tailwindcss-vanilla-rtl/issues/16.
+          // if (!corePlugins('borderOpacity')) {
+          if (!true) {
             return {
               'border-inline-start-color': toColorValue(value),
             }
@@ -1666,11 +1693,14 @@ export let corePlugins = {
       }
     )
   },
-  /*
+  /**
+  * Logical Properties and Values: overridden with no code changes so those styles are output _after_ other border styles.
+  * See https://github.com/thibaudcolas/tailwindcss-vanilla-rtl/issues/16.
+  */
   borderOpacity: createUtilityPlugin('borderOpacity', [
     ['border-opacity', ['--tw-border-opacity']],
   ]),
-
+  /*
   backgroundColor: ({ matchUtilities, theme, corePlugins }) => {
     matchUtilities(
       {

diff --git a/src/index.js b/src/index.js
@@ -15,6 +15,7 @@ const vanillaRTL = plugin((helpers) => {
   corePlugins.borderRadius(helpers);
   corePlugins.borderWidth(helpers);
   corePlugins.borderColor(helpers);
+  corePlugins.borderOpacity(helpers);
   corePlugins.padding(helpers);
   corePlugins.textAlign(helpers);
 });
@@ -33,6 +34,7 @@ vanillaRTL.disabledCorePlugins = {
   borderRadius: false,
   borderWidth: false,
   borderColor: false,
+  borderOpacity: false,
   padding: false,
   textAlign: false,
 };

diff --git a/tests/corePlugins.test.js b/tests/corePlugins.test.js
@@ -14,6 +14,7 @@ describe("corePlugins", () => {
         "borderRadius",
         "borderWidth",
         "borderColor",
+        "borderOpacity",
         "padding",
         "textAlign",
       ]

diff --git a/tests/index.test.js b/tests/index.test.js
@@ -5,6 +5,7 @@ describe("tailwindcss-vanilla-rtl", () => {
     expect(vanillaRTL.disabledCorePlugins).toMatchInlineSnapshot(`
       {
         "borderColor": false,
+        "borderOpacity": false,
         "borderRadius": false,
         "borderWidth": false,
         "divideWidth": false,

diff --git a/tests/output.test.js b/tests/output.test.js
@@ -34,6 +34,7 @@ const utilities = [
   "border-x-black",
   "border-r-black",
   "border-l-black",
+  "border-opacity-0",
   "divide-x-0",
   "text-right",
   "text-left",
@@ -93,6 +94,7 @@ it("has consistent output", () => {
       ".border-x-black { --tw-border-opacity: 1; border-inline-start-color: rgb(0 0 0 / var(--tw-border-opacity)); border-inline-end-color: rgb(0 0 0 / var(--tw-border-opacity)) }",
       ".border-r-black { --tw-border-opacity: 1; border-inline-end-color: rgb(0 0 0 / var(--tw-border-opacity)) }",
       ".border-l-black { --tw-border-opacity: 1; border-inline-start-color: rgb(0 0 0 / var(--tw-border-opacity)) }",
+      ".border-opacity-0 { --tw-border-opacity: 0 }",
       ".divide-x-0 > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 0; border-inline-end-width: calc(0px * var(--tw-divide-x-reverse)); border-inline-start-width: calc(0px * calc(1 - var(--tw-divide-x-reverse))) }",
       ".text-right { text-align: end }",
       ".text-left { text-align: start }",