From 33ae845749fffdf3067e2d0efad4b7c28855532d Mon Sep 17 00:00:00 2001 From: Thibaud Colas Date: Fri, 30 Dec 2022 14:45:57 +0000 Subject: [PATCH] fix: fix border-opacity utilities by overriding their plugin. Fix #16 --- README.md | 11 +++++++-- demo/index.html | 16 ++++++------- src/corePlugins.js | 48 +++++++++++++++++++++++++++++++-------- src/index.js | 2 ++ tests/corePlugins.test.js | 1 + tests/index.test.js | 1 + tests/output.test.js | 2 ++ 7 files changed, 62 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 74c172b..ecba93e 100644 --- a/README.md +++ b/README.md @@ -17,8 +17,9 @@ 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, @@ -26,7 +27,7 @@ module.exports = { }; ``` -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 index d150120..3b78db0 100644 --- a/demo/index.html +++ b/demo/index.html @@ -56,16 +56,16 @@

How it works

Here’s an example: 


-<blockquote dir="rtl" lang="en" class="border-l-4 border-gray-300 pl-2">
+<blockquote dir="rtl" lang="en" class="border-l-4 border-gray-700 border-opacity-30 pl-2">
   Let the beauty of what you love be what you do.
 </blockquote>
-<blockquote dir="rtl" lang="ar" class="border-l-4 border-gray-300 pl-2">
+<blockquote dir="rtl" lang="ar" class="border-l-4 border-gray-700 border-opacity-30 pl-2">
     ما تبحث عنه يبحث عنك
 </blockquote>
-<blockquote dir="rtl" lang="he" class="border-l-4 border-gray-300 pl-2">
+<blockquote dir="rtl" lang="he" class="border-l-4 border-gray-700 border-opacity-30 pl-2">
   האהבה היא אוקיינוס שאין לו התחלה ואין לו סוף.
 </blockquote>
-<blockquote dir="rtl" lang="fa" class="border-l-4 border-gray-300 pl-2">
+<blockquote dir="rtl" lang="fa" class="border-l-4 border-gray-700 border-opacity-30 pl-2">
   از محبت، نار نوری می‌شود// وز محبت، دیو حوری می‌شود
 </blockquote>
@@ -96,7 +96,7 @@

Demo

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" > -
+
Let the beauty of what you love be what you do.