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 @@
-<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 @@ +Let the beauty of what you love be what you do.@@ -136,7 +136,7 @@
Demo
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" > -+ما تبحث عنه يبحث عنك@@ -176,7 +176,7 @@
Demo
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" > -+האהבה היא אוקיינוס שאין לו התחלה ואין לו סוף.@@ -216,7 +216,7 @@
Demo
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" > -+از محبت، نار نوری میشود// وز محبت، دیو حوری میشودdiff --git a/src/corePlugins.js b/src/corePlugins.js index 2bf9d45..dde523a 100644 --- 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 index 935e26f..9402dd1 100644 --- 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 index 88c493e..eac7d2e 100644 --- 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 index 36eead5..c7de549 100644 --- 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 index 79f1604..c8ef184 100644 --- 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 }",