Use left/right instead of inline-start/end for space/divide utilities (…

…#2644)
tailwindlabs · Oct 21, 2020 · 02cba63 · 02cba63
1 parent 18baa4e
commit 02cba63
Show file tree

Hide file tree

Showing 8 changed files with 3,480 additions and 3,480 deletions.
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
diff --git a/__tests__/plugins/divideWidth.test.js b/__tests__/plugins/divideWidth.test.js
@@ -28,8 +28,8 @@ test('generating divide width utilities', () => {
         },
         '.divide-x > :not([hidden]) ~ :not([hidden])': {
           '--divide-x-reverse': '0',
-          'border-inline-end-width': 'calc(1px * var(--divide-x-reverse))',
-          'border-inline-start-width': 'calc(1px * calc(1 - var(--divide-x-reverse)))',
+          'border-right-width': 'calc(1px * var(--divide-x-reverse))',
+          'border-left-width': 'calc(1px * calc(1 - var(--divide-x-reverse)))',
         },
         '.divide-y-0 > :not([hidden]) ~ :not([hidden])': {
           '--divide-y-reverse': '0',
@@ -38,8 +38,8 @@ test('generating divide width utilities', () => {
         },
         '.divide-x-0 > :not([hidden]) ~ :not([hidden])': {
           '--divide-x-reverse': '0',
-          'border-inline-end-width': 'calc(0px * var(--divide-x-reverse))',
-          'border-inline-start-width': 'calc(0px * calc(1 - var(--divide-x-reverse)))',
+          'border-right-width': 'calc(0px * var(--divide-x-reverse))',
+          'border-left-width': 'calc(0px * calc(1 - var(--divide-x-reverse)))',
         },
         '.divide-y-2 > :not([hidden]) ~ :not([hidden])': {
           '--divide-y-reverse': '0',
@@ -48,8 +48,8 @@ test('generating divide width utilities', () => {
         },
         '.divide-x-2 > :not([hidden]) ~ :not([hidden])': {
           '--divide-x-reverse': '0',
-          'border-inline-end-width': 'calc(2px * var(--divide-x-reverse))',
-          'border-inline-start-width': 'calc(2px * calc(1 - var(--divide-x-reverse)))',
+          'border-right-width': 'calc(2px * var(--divide-x-reverse))',
+          'border-left-width': 'calc(2px * calc(1 - var(--divide-x-reverse)))',
         },
         '.divide-y-4 > :not([hidden]) ~ :not([hidden])': {
           '--divide-y-reverse': '0',
@@ -58,8 +58,8 @@ test('generating divide width utilities', () => {
         },
         '.divide-x-4 > :not([hidden]) ~ :not([hidden])': {
           '--divide-x-reverse': '0',
-          'border-inline-end-width': 'calc(4px * var(--divide-x-reverse))',
-          'border-inline-start-width': 'calc(4px * calc(1 - var(--divide-x-reverse)))',
+          'border-right-width': 'calc(4px * var(--divide-x-reverse))',
+          'border-left-width': 'calc(4px * calc(1 - var(--divide-x-reverse)))',
         },
         '.divide-y-reverse > :not([hidden]) ~ :not([hidden])': {
           '--divide-y-reverse': '1',

diff --git a/__tests__/plugins/space.test.js b/__tests__/plugins/space.test.js
@@ -30,8 +30,8 @@ test('generating space utilities', () => {
         },
         '.space-x-0 > :not([hidden]) ~ :not([hidden])': {
           '--space-x-reverse': '0',
-          'margin-inline-end': 'calc(0px * var(--space-x-reverse))',
-          'margin-inline-start': 'calc(0px * calc(1 - var(--space-x-reverse)))',
+          'margin-right': 'calc(0px * var(--space-x-reverse))',
+          'margin-left': 'calc(0px * calc(1 - var(--space-x-reverse)))',
         },
         '.space-y-1 > :not([hidden]) ~ :not([hidden])': {
           '--space-y-reverse': '0',
@@ -40,8 +40,8 @@ test('generating space utilities', () => {
         },
         '.space-x-1 > :not([hidden]) ~ :not([hidden])': {
           '--space-x-reverse': '0',
-          'margin-inline-end': 'calc(1px * var(--space-x-reverse))',
-          'margin-inline-start': 'calc(1px * calc(1 - var(--space-x-reverse)))',
+          'margin-right': 'calc(1px * var(--space-x-reverse))',
+          'margin-left': 'calc(1px * calc(1 - var(--space-x-reverse)))',
         },
         '.space-y-2 > :not([hidden]) ~ :not([hidden])': {
           '--space-y-reverse': '0',
@@ -50,8 +50,8 @@ test('generating space utilities', () => {
         },
         '.space-x-2 > :not([hidden]) ~ :not([hidden])': {
           '--space-x-reverse': '0',
-          'margin-inline-end': 'calc(2px * var(--space-x-reverse))',
-          'margin-inline-start': 'calc(2px * calc(1 - var(--space-x-reverse)))',
+          'margin-right': 'calc(2px * var(--space-x-reverse))',
+          'margin-left': 'calc(2px * calc(1 - var(--space-x-reverse)))',
         },
         '.space-y-4 > :not([hidden]) ~ :not([hidden])': {
           '--space-y-reverse': '0',
@@ -60,8 +60,8 @@ test('generating space utilities', () => {
         },
         '.space-x-4 > :not([hidden]) ~ :not([hidden])': {
           '--space-x-reverse': '0',
-          'margin-inline-end': 'calc(4px * var(--space-x-reverse))',
-          'margin-inline-start': 'calc(4px * calc(1 - var(--space-x-reverse)))',
+          'margin-right': 'calc(4px * var(--space-x-reverse))',
+          'margin-left': 'calc(4px * calc(1 - var(--space-x-reverse)))',
         },
         '.-space-y-2 > :not([hidden]) ~ :not([hidden])': {
           '--space-y-reverse': '0',
@@ -70,8 +70,8 @@ test('generating space utilities', () => {
         },
         '.-space-x-2 > :not([hidden]) ~ :not([hidden])': {
           '--space-x-reverse': '0',
-          'margin-inline-end': 'calc(-2px * var(--space-x-reverse))',
-          'margin-inline-start': 'calc(-2px * calc(1 - var(--space-x-reverse)))',
+          'margin-right': 'calc(-2px * var(--space-x-reverse))',
+          'margin-left': 'calc(-2px * calc(1 - var(--space-x-reverse)))',
         },
         '.-space-y-1 > :not([hidden]) ~ :not([hidden])': {
           '--space-y-reverse': '0',
@@ -80,8 +80,8 @@ test('generating space utilities', () => {
         },
         '.-space-x-1 > :not([hidden]) ~ :not([hidden])': {
           '--space-x-reverse': '0',
-          'margin-inline-end': 'calc(-1px * var(--space-x-reverse))',
-          'margin-inline-start': 'calc(-1px * calc(1 - var(--space-x-reverse)))',
+          'margin-right': 'calc(-1px * var(--space-x-reverse))',
+          'margin-left': 'calc(-1px * calc(1 - var(--space-x-reverse)))',
         },
         '.space-y-reverse > :not([hidden]) ~ :not([hidden])': {
           '--space-y-reverse': '1',

diff --git a/src/plugins/divideWidth.js b/src/plugins/divideWidth.js
@@ -14,8 +14,8 @@ export default function () {
           },
           [`${nameClass('divide-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
             '--divide-x-reverse': '0',
-            'border-inline-end-width': `calc(${size} * var(--divide-x-reverse))`,
-            'border-inline-start-width': `calc(${size} * calc(1 - var(--divide-x-reverse)))`,
+            'border-right-width': `calc(${size} * var(--divide-x-reverse))`,
+            'border-left-width': `calc(${size} * calc(1 - var(--divide-x-reverse)))`,
           },
         }
       },

diff --git a/src/plugins/space.js b/src/plugins/space.js
@@ -14,8 +14,8 @@ export default function () {
           },
           [`${nameClass('space-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
             '--space-x-reverse': '0',
-            'margin-inline-end': `calc(${size} * var(--space-x-reverse))`,
-            'margin-inline-start': `calc(${size} * calc(1 - var(--space-x-reverse)))`,
+            'margin-right': `calc(${size} * var(--space-x-reverse))`,
+            'margin-left': `calc(${size} * calc(1 - var(--space-x-reverse)))`,
           },
         }
       },