fix: remove broken LTR fallbacks. Fix #18 (#19)

Co-authored-by: Thibaud Colas <[email protected]>

Closes #18

README.md

@@ -34,9 +34,9 @@ The plugin is compatible with Tailwind v3.2 and up. For compatibility with older
 
 ## Browser support
 
-Browser support for CSS logical properties and values is still very recent. This plugin has full support for Safari 15, Chrome/Edge 89, and Firefox 68.
+Browser support for CSS logical properties and values is somewhat recent. This plugin has full support for Safari 15, Chrome/Edge 89, and Firefox 68.
 
-We also support older browser versions (down to Safari 14.1, Chrome 87, Firefox 63), but with a few properties only working as expected for left-to-right languages:
+To provide full support for RTL languages, consider using [postcss-logical](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical). Note that postcss-logical will create styles with `[dir=rtl]` and `[dir=ltr]` attribute selectors, which will have a higher specificity than single-class utilities, and risk behaving differently when combined with non-utility CSS.
 
 - [border-radius](https://caniuse.com/?search=border-start-start-radius):
   - macOS Safari 15 (2021-09-21) and up
@@ -50,11 +50,6 @@ We also support older browser versions (down to Safari 14.1, Chrome 87, Firefox
   - Chrome 69 (2018-09-04) and up
   - Edge 79 (2020-01-15) and up
   - Firefox 68 (2019-07-09) and up
-
-In those two cases, we add fallbacks for LTR languages only. To provide full support for RTL languages nonetheless, consider using [postcss-logical](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical) to automatically create fallbacks for all scenarios.
-
-Two other utilities in particular will only work in very recent browsers, with _no additional fallback styles for left-to-right languages_:
-
 - [`left` / `right` positioning](https://caniuse.com/?search=inset-inline-start):
   - macOS Safari 14.1 (2021-04-26) and up
   - iOS Safari 14.5 (2021-04-26) and up
@@ -96,12 +91,6 @@ module.exports = {
 };
 ```
 
-### LTR-only fallbacks
-
-For the four properties mentioned in [Browser support](#browser-support), we only provide fallbacks for two, and only for LTR languages. This is done to simplify maintenance of this plugin, and because [postcss-logical](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical) is a great way to add thorough fallbacks for projects needing it.
-
-Note postcss-logical will create styles with `[dir=rtl]` and `[dir=ltr]` attribute selectors, which will have a higher specificity than single-class utilities, and risk behaving differently when combined with non-utility CSS.
-
 ### Tailwind corePlugins copy-paste
 
 All utilities generated with this plugin are built with a copy-paste of Tailwind’s own [corePlugins.js](https://github.com/tailwindlabs/tailwindcss/blob/master/src/corePlugins.js). This is to simplify maintenance – as we override core plugins, it’s important for our utilities to match Tailwind’s like-for-like. Defining plugins with the least changes from core allows us to use git conflict resolution when merging in corePlugins changes in newer releases.

src/corePlugins.js

@@ -1070,22 +1070,21 @@ export let corePlugins = {
   ),
 
   /**
-  * Logical Properties and Values: added with fallback.
-  * Added `scroll-padding-inline-start` after `scroll-padding-left`, `scroll-padding-inline-end` after `scroll-padding-right`.
-  * Retaining fallbacks because browser support isn’t entirely there.
+  * Logical Properties and Values: overriding defaults.
+  * Replaced `scroll-padding-left` with `scroll-padding-inline-start` and `scroll-padding-right` with `scroll-padding-inline-end`.
   * See https://caniuse.com/?search=scroll-padding-inline-start.
   */
   scrollPadding: createUtilityPlugin('scrollPadding', [
     ['scroll-p', ['scroll-padding']],
     [
-      ['scroll-px', ['scroll-padding-left', 'scroll-padding-inline-start', 'scroll-padding-right', 'scroll-padding-inline-end']],
+      ['scroll-px', ['scroll-padding-inline-start', 'scroll-padding-inline-end']],
       ['scroll-py', ['scroll-padding-top', 'scroll-padding-bottom']],
     ],
     [
       ['scroll-pt', ['scroll-padding-top']],
-      ['scroll-pr', ['scroll-padding-right', 'scroll-padding-inline-end']],
+      ['scroll-pr', ['scroll-padding-inline-end']],
       ['scroll-pb', ['scroll-padding-bottom']],
-      ['scroll-pl', ['scroll-padding-left', 'scroll-padding-inline-start']],
+      ['scroll-pl', ['scroll-padding-inline-start']],
     ],
   ]),
   /*
@@ -1487,23 +1486,23 @@ export let corePlugins = {
   },
   */
   /**
-  * Logical Properties and Values: added with fallback.
-  * Retaining fallbacks because browser support isn’t entirely there.
-  * See https://caniuse.com/?search=border-inline-start-width.
+  * Logical Properties and Values: overriding defaults.
+  * Replaced border-top-left-radius with border-start-start-radius, etc.
+  * See https://caniuse.com/?search=border-start-start-radius.
   */
   borderRadius: createUtilityPlugin('borderRadius', [
     ['rounded', ['border-radius']],
     [
-      ['rounded-t', ['border-top-left-radius', 'border-start-start-radius', 'border-top-right-radius', 'border-start-end-radius']],
-      ['rounded-r', ['border-top-right-radius', 'border-start-end-radius', 'border-bottom-right-radius', 'border-end-end-radius']],
-      ['rounded-b', ['border-bottom-right-radius', 'border-end-end-radius', 'border-bottom-left-radius', 'border-end-start-radius']],
-      ['rounded-l', ['border-top-left-radius', 'border-start-start-radius', 'border-bottom-left-radius', 'border-end-start-radius']],
+      ['rounded-t', ['border-start-start-radius', 'border-start-end-radius']],
+      ['rounded-r', ['border-start-end-radius', 'border-end-end-radius']],
+      ['rounded-b', ['border-end-end-radius', 'border-end-start-radius']],
+      ['rounded-l', ['border-start-start-radius', 'border-end-start-radius']],
     ],
     [
-      ['rounded-tl', ['border-top-left-radius', 'border-start-start-radius']],
-      ['rounded-tr', ['border-top-right-radius', 'border-start-end-radius']],
-      ['rounded-br', ['border-bottom-right-radius', 'border-end-end-radius']],
-      ['rounded-bl', ['border-bottom-left-radius', 'border-end-start-radius']],
+      ['rounded-tl', ['border-start-start-radius']],
+      ['rounded-tr', ['border-start-end-radius']],
+      ['rounded-br', ['border-end-end-radius']],
+      ['rounded-bl', ['border-end-start-radius']],
     ],
   ]),
 

tests/output.test.js

@@ -76,17 +76,17 @@ it("has consistent output", () => {
       ".scroll-mx-0 { scroll-margin-inline-start: 0px; scroll-margin-inline-end: 0px }",
       ".scroll-mr-0 { scroll-margin-inline-end: 0px }",
       ".scroll-ml-0 { scroll-margin-inline-start: 0px }",
-      ".scroll-px-0 { scroll-padding-left: 0px; scroll-padding-inline-start: 0px; scroll-padding-right: 0px; scroll-padding-inline-end: 0px }",
-      ".scroll-pr-0 { scroll-padding-right: 0px; scroll-padding-inline-end: 0px }",
-      ".scroll-pl-0 { scroll-padding-left: 0px; scroll-padding-inline-start: 0px }",
-      ".rounded-t-\\[JIT\\] { border-top-left-radius: JIT; border-start-start-radius: JIT; border-top-right-radius: JIT; border-start-end-radius: JIT }",
-      ".rounded-r-\\[JIT\\] { border-top-right-radius: JIT; border-start-end-radius: JIT; border-bottom-right-radius: JIT; border-end-end-radius: JIT }",
-      ".rounded-b-\\[JIT\\] { border-bottom-right-radius: JIT; border-end-end-radius: JIT; border-bottom-left-radius: JIT; border-end-start-radius: JIT }",
-      ".rounded-l-\\[JIT\\] { border-top-left-radius: JIT; border-start-start-radius: JIT; border-bottom-left-radius: JIT; border-end-start-radius: JIT }",
-      ".rounded-tl-\\[JIT\\] { border-top-left-radius: JIT; border-start-start-radius: JIT }",
-      ".rounded-tr-\\[JIT\\] { border-top-right-radius: JIT; border-start-end-radius: JIT }",
-      ".rounded-br-\\[JIT\\] { border-bottom-right-radius: JIT; border-end-end-radius: JIT }",
-      ".rounded-bl-\\[JIT\\] { border-bottom-left-radius: JIT; border-end-start-radius: JIT }",
+      ".scroll-px-0 { scroll-padding-inline-start: 0px; scroll-padding-inline-end: 0px }",
+      ".scroll-pr-0 { scroll-padding-inline-end: 0px }",
+      ".scroll-pl-0 { scroll-padding-inline-start: 0px }",
+      ".rounded-t-\\[JIT\\] { border-start-start-radius: JIT; border-start-end-radius: JIT }",
+      ".rounded-r-\\[JIT\\] { border-start-end-radius: JIT; border-end-end-radius: JIT }",
+      ".rounded-b-\\[JIT\\] { border-end-end-radius: JIT; border-end-start-radius: JIT }",
+      ".rounded-l-\\[JIT\\] { border-start-start-radius: JIT; border-end-start-radius: JIT }",
+      ".rounded-tl-\\[JIT\\] { border-start-start-radius: JIT }",
+      ".rounded-tr-\\[JIT\\] { border-start-end-radius: JIT }",
+      ".rounded-br-\\[JIT\\] { border-end-end-radius: JIT }",
+      ".rounded-bl-\\[JIT\\] { border-end-start-radius: JIT }",
       ".border-x-0 { border-inline-start-width: 0px; border-inline-end-width: 0px }",
       ".border-r-0 { border-inline-end-width: 0px }",
       ".border-l-0 { border-inline-start-width: 0px }",