From 289c25f8e9625323438bc458a85c02625895fff2 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 28 Oct 2024 13:08:39 -0400 Subject: [PATCH] Use `inline` and `block` for x/y utilities (#14805) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR updates all of our x/y named utilities (like `px-*`, `my-*`, `inset-y-*`, `scroll-px-*`, etc.) to use logical properties like `padding-inline` instead of separate `padding-left` and `padding-right` properties. We held off on this originally for a while because `inline` doesn't really mean _horizontal_ like the "x" in `px-*` implies, but I think in practice this change is fine — I'm comfortable with "x" meaning "in the inline direction" and "y" meaning "in the block direction" in Tailwind. This is technically a breaking change if anyone was depending on the fact that `px-*` for instance was always explicitly setting `padding-left` and `padding-right` even when building something in a vertical writing mode, but I kinda doubt there's a single real project on the internet that will actually be affected, so not too worried about it. If someone _really_ wants to set `padding-left` and `padding-right` they can always use `pl-4 pr-4` instead of `px-4`. Nice thing about this change is it produces quite a bit less CSS. To test this change, I re-generated all of the snapshots and made sure none of the generated utilities changed position or anything in the output (initially they did before I updated `property-order.ts` to add some missing properties). I also created a little demo locally in the Vite playground to test things manually and make sure I didn't make any obvious typos or anything that could slip through the snapshots: image
Show code for playground demo ```jsx import React from 'react' export function App() { return (

Border Width

border-x
border-y

Border Color

border-x-red-500
border-y-red-500

Padding

px-8
py-8

Margin

mx-8
my-8

Inset

inset-x-8
inset-y-8
) } ```
I didn't manually test the scroll padding or scroll margin utilities because they are more annoying to set up, but I probably should. --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> --- CHANGELOG.md | 4 + .../src/__snapshots__/utilities.test.ts.snap | 192 ++++++------------ packages/tailwindcss/src/index.test.ts | 18 +- packages/tailwindcss/src/property-order.ts | 16 +- packages/tailwindcss/src/utilities.test.ts | 150 +++++--------- packages/tailwindcss/src/utilities.ts | 95 +++------ 6 files changed, 163 insertions(+), 312 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d054b026933..9a08d0c63071 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Support calling `config()` with no arguments in plugin API ([#14799](https://github.com/tailwindlabs/tailwindcss/pull/14799)) +### Changed + +- Use logical `*-inline` and `*-block` properties for all x/y utilities like `px-*`, `my-*`, `scroll-px-*`, and `inset-y-*` ([#14805](https://github.com/tailwindlabs/tailwindcss/pull/14805)) + ## [4.0.0-alpha.30] - 2024-10-24 ### Added diff --git a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap index 57168d12d41f..8244538dd88c 100644 --- a/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap @@ -856,133 +856,101 @@ exports[`border-x-* 1`] = ` } .border-x { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: 1px; - border-right-width: 1px; + border-inline-style: var(--tw-border-style); + border-inline-width: 1px; } .border-x-0 { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: 0; - border-right-width: 0; + border-inline-style: var(--tw-border-style); + border-inline-width: 0; } .border-x-2 { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: 2px; - border-right-width: 2px; + border-inline-style: var(--tw-border-style); + border-inline-width: 2px; } .border-x-4 { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: 4px; - border-right-width: 4px; + border-inline-style: var(--tw-border-style); + border-inline-width: 4px; } .border-x-123 { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: 123px; - border-right-width: 123px; + border-inline-style: var(--tw-border-style); + border-inline-width: 123px; } .border-x-\\[12px\\] { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: 12px; - border-right-width: 12px; + border-inline-style: var(--tw-border-style); + border-inline-width: 12px; } .border-x-\\[length\\:var\\(--my-width\\)\\], .border-x-\\[line-width\\:var\\(--my-width\\)\\] { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: var(--my-width); - border-right-width: var(--my-width); + border-inline-style: var(--tw-border-style); + border-inline-width: var(--my-width); } .border-x-\\[medium\\] { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: medium; - border-right-width: medium; + border-inline-style: var(--tw-border-style); + border-inline-width: medium; } .border-x-\\[thick\\] { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: thick; - border-right-width: thick; + border-inline-style: var(--tw-border-style); + border-inline-width: thick; } .border-x-\\[thin\\] { - border-left-style: var(--tw-border-style); - border-right-style: var(--tw-border-style); - border-left-width: thin; - border-right-width: thin; + border-inline-style: var(--tw-border-style); + border-inline-width: thin; } .border-x-\\[\\#0088cc\\] { - border-left-color: #08c; - border-right-color: #08c; + border-inline-color: #08c; } .border-x-\\[\\#0088cc\\]\\/50 { - border-left-color: oklch(59.9824% .14119 241.555 / .5); - border-right-color: oklch(59.9824% .14119 241.555 / .5); + border-inline-color: oklch(59.9824% .14119 241.555 / .5); } .border-x-\\[color\\:var\\(--my-color\\)\\] { - border-left-color: var(--my-color); - border-right-color: var(--my-color); + border-inline-color: var(--my-color); } .border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 { - border-left-color: color-mix(in oklch, var(--my-color) 50%, transparent); - border-right-color: color-mix(in oklch, var(--my-color) 50%, transparent); + border-inline-color: color-mix(in oklch, var(--my-color) 50%, transparent); } .border-x-\\[var\\(--my-color\\)\\] { - border-left-color: var(--my-color); - border-right-color: var(--my-color); + border-inline-color: var(--my-color); } .border-x-\\[var\\(--my-color\\)\\]\\/50 { - border-left-color: color-mix(in oklch, var(--my-color) 50%, transparent); - border-right-color: color-mix(in oklch, var(--my-color) 50%, transparent); + border-inline-color: color-mix(in oklch, var(--my-color) 50%, transparent); } .border-x-current { - border-left-color: currentColor; - border-right-color: currentColor; + border-inline-color: currentColor; } .border-x-current\\/50 { - border-left-color: color-mix(in oklch, currentColor 50%, transparent); - border-right-color: color-mix(in oklch, currentColor 50%, transparent); + border-inline-color: color-mix(in oklch, currentColor 50%, transparent); } .border-x-inherit { - border-left-color: inherit; - border-right-color: inherit; + border-inline-color: inherit; } .border-x-red-500 { - border-left-color: var(--color-red-500, #ef4444); - border-right-color: var(--color-red-500, #ef4444); + border-inline-color: var(--color-red-500, #ef4444); } .border-x-red-500\\/50 { - border-left-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); - border-right-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + border-inline-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); } .border-x-transparent { - border-left-color: #0000; - border-right-color: #0000; + border-inline-color: #0000; } @supports (-moz-orient: inline) { @@ -1009,133 +977,101 @@ exports[`border-y-* 1`] = ` } .border-y { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: 1px; - border-bottom-width: 1px; + border-block-style: var(--tw-border-style); + border-block-width: 1px; } .border-y-0 { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: 0; - border-bottom-width: 0; + border-block-style: var(--tw-border-style); + border-block-width: 0; } .border-y-2 { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: 2px; - border-bottom-width: 2px; + border-block-style: var(--tw-border-style); + border-block-width: 2px; } .border-y-4 { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: 4px; - border-bottom-width: 4px; + border-block-style: var(--tw-border-style); + border-block-width: 4px; } .border-y-123 { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: 123px; - border-bottom-width: 123px; + border-block-style: var(--tw-border-style); + border-block-width: 123px; } .border-y-\\[12px\\] { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: 12px; - border-bottom-width: 12px; + border-block-style: var(--tw-border-style); + border-block-width: 12px; } .border-y-\\[length\\:var\\(--my-width\\)\\], .border-y-\\[line-width\\:var\\(--my-width\\)\\] { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: var(--my-width); - border-bottom-width: var(--my-width); + border-block-style: var(--tw-border-style); + border-block-width: var(--my-width); } .border-y-\\[medium\\] { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: medium; - border-bottom-width: medium; + border-block-style: var(--tw-border-style); + border-block-width: medium; } .border-y-\\[thick\\] { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: thick; - border-bottom-width: thick; + border-block-style: var(--tw-border-style); + border-block-width: thick; } .border-y-\\[thin\\] { - border-top-style: var(--tw-border-style); - border-bottom-style: var(--tw-border-style); - border-top-width: thin; - border-bottom-width: thin; + border-block-style: var(--tw-border-style); + border-block-width: thin; } .border-y-\\[\\#0088cc\\] { - border-top-color: #08c; - border-bottom-color: #08c; + border-block-color: #08c; } .border-y-\\[\\#0088cc\\]\\/50 { - border-top-color: oklch(59.9824% .14119 241.555 / .5); - border-bottom-color: oklch(59.9824% .14119 241.555 / .5); + border-block-color: oklch(59.9824% .14119 241.555 / .5); } .border-y-\\[color\\:var\\(--my-color\\)\\] { - border-top-color: var(--my-color); - border-bottom-color: var(--my-color); + border-block-color: var(--my-color); } .border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 { - border-top-color: color-mix(in oklch, var(--my-color) 50%, transparent); - border-bottom-color: color-mix(in oklch, var(--my-color) 50%, transparent); + border-block-color: color-mix(in oklch, var(--my-color) 50%, transparent); } .border-y-\\[var\\(--my-color\\)\\] { - border-top-color: var(--my-color); - border-bottom-color: var(--my-color); + border-block-color: var(--my-color); } .border-y-\\[var\\(--my-color\\)\\]\\/50 { - border-top-color: color-mix(in oklch, var(--my-color) 50%, transparent); - border-bottom-color: color-mix(in oklch, var(--my-color) 50%, transparent); + border-block-color: color-mix(in oklch, var(--my-color) 50%, transparent); } .border-y-current { - border-top-color: currentColor; - border-bottom-color: currentColor; + border-block-color: currentColor; } .border-y-current\\/50 { - border-top-color: color-mix(in oklch, currentColor 50%, transparent); - border-bottom-color: color-mix(in oklch, currentColor 50%, transparent); + border-block-color: color-mix(in oklch, currentColor 50%, transparent); } .border-y-inherit { - border-top-color: inherit; - border-bottom-color: inherit; + border-block-color: inherit; } .border-y-red-500 { - border-top-color: var(--color-red-500, #ef4444); - border-bottom-color: var(--color-red-500, #ef4444); + border-block-color: var(--color-red-500, #ef4444); } .border-y-red-500\\/50 { - border-top-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); - border-bottom-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); + border-block-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent); } .border-y-transparent { - border-top-color: #0000; - border-bottom-color: #0000; + border-block-color: #0000; } @supports (-moz-orient: inline) { diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index 125535ba58e7..8cf717477301 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -627,8 +627,7 @@ describe('sorting', () => { } .px-1 { - padding-left: var(--spacing-1, .25rem); - padding-right: var(--spacing-1, .25rem); + padding-inline: var(--spacing-1, .25rem); } .pl-1 { @@ -681,8 +680,7 @@ describe('sorting', () => { } .mx-0 { - margin-left: var(--spacing-0, 0px); - margin-right: var(--spacing-0, 0px); + margin-inline: var(--spacing-0, 0px); } .gap-4 { @@ -751,8 +749,7 @@ describe('sorting', () => { } .mx-3 { - margin-left: var(--spacing-3, 3px); - margin-right: var(--spacing-3, 3px); + margin-inline: var(--spacing-3, 3px); } .ms-1 { @@ -764,8 +761,7 @@ describe('sorting', () => { } .scroll-mx-3 { - scroll-margin-left: var(--spacing-3, 3px); - scroll-margin-right: var(--spacing-3, 3px); + scroll-margin-inline: var(--spacing-3, 3px); } .scroll-ms-1 { @@ -777,8 +773,7 @@ describe('sorting', () => { } .scroll-px-3 { - scroll-padding-left: var(--spacing-3, 3px); - scroll-padding-right: var(--spacing-3, 3px); + scroll-padding-inline: var(--spacing-3, 3px); } .scroll-ps-1 { @@ -790,8 +785,7 @@ describe('sorting', () => { } .px-3 { - padding-left: var(--spacing-3, 3px); - padding-right: var(--spacing-3, 3px); + padding-inline: var(--spacing-3, 3px); } .ps-1 { diff --git a/packages/tailwindcss/src/property-order.ts b/packages/tailwindcss/src/property-order.ts index a19858217146..6667ec16b062 100644 --- a/packages/tailwindcss/src/property-order.ts +++ b/packages/tailwindcss/src/property-order.ts @@ -187,7 +187,8 @@ export default [ 'border-bottom-left-radius', 'border-width', - 'border-inline-width', // Not real + 'border-inline-width', + 'border-block-width', 'border-inline-start-width', 'border-inline-end-width', 'border-top-width', @@ -196,9 +197,18 @@ export default [ 'border-left-width', 'border-style', + 'border-inline-style', + 'border-block-style', + 'border-inline-start-style', + 'border-inline-end-style', + 'border-top-style', + 'border-right-style', + 'border-bottom-style', + 'border-left-style', + 'border-color', - 'border-x-color', // Not real - 'border-y-color', // Not real + 'border-inline-color', + 'border-block-color', 'border-inline-start-color', 'border-inline-end-color', 'border-top-color', diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 23d2bb2140af..9a7c3af1ffd5 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -216,38 +216,31 @@ test('inset-x', async () => { } .-inset-x-4 { - right: calc(var(--spacing-4, 1rem) * -1); - left: calc(var(--spacing-4, 1rem) * -1); + inset-inline: calc(var(--spacing-4, 1rem) * -1); } .-inset-x-full { - left: -100%; - right: -100%; + inset-inline: -100%; } .inset-x-3\\/4 { - left: 75%; - right: 75%; + inset-inline: 75%; } .inset-x-4 { - right: var(--spacing-4, 1rem); - left: var(--spacing-4, 1rem); + inset-inline: var(--spacing-4, 1rem); } .inset-x-\\[4px\\] { - left: 4px; - right: 4px; + inset-inline: 4px; } .inset-x-auto { - left: auto; - right: auto; + inset-inline: auto; } .inset-x-full { - left: 100%; - right: 100%; + inset-inline: 100%; }" `) expect( @@ -293,38 +286,31 @@ test('inset-y', async () => { } .-inset-y-4 { - top: calc(var(--spacing-4, 1rem) * -1); - bottom: calc(var(--spacing-4, 1rem) * -1); + inset-block: calc(var(--spacing-4, 1rem) * -1); } .-inset-y-full { - top: -100%; - bottom: -100%; + inset-block: -100%; } .inset-y-3\\/4 { - top: 75%; - bottom: 75%; + inset-block: 75%; } .inset-y-4 { - top: var(--spacing-4, 1rem); - bottom: var(--spacing-4, 1rem); + inset-block: var(--spacing-4, 1rem); } .inset-y-\\[4px\\] { - top: 4px; - bottom: 4px; + inset-block: 4px; } .inset-y-auto { - top: auto; - bottom: auto; + inset-block: auto; } .inset-y-full { - top: 100%; - bottom: 100%; + inset-block: 100%; }" `) expect( @@ -1262,28 +1248,23 @@ test('margin-x', async () => { } .-mx-4 { - margin-left: calc(var(--spacing-4, 1rem) * -1); - margin-right: calc(var(--spacing-4, 1rem) * -1); + margin-inline: calc(var(--spacing-4, 1rem) * -1); } .-mx-\\[var\\(--value\\)\\] { - margin-left: calc(var(--value) * -1); - margin-right: calc(var(--value) * -1); + margin-inline: calc(var(--value) * -1); } .mx-4 { - margin-left: var(--spacing-4, 1rem); - margin-right: var(--spacing-4, 1rem); + margin-inline: var(--spacing-4, 1rem); } .mx-\\[4px\\] { - margin-left: 4px; - margin-right: 4px; + margin-inline: 4px; } .mx-auto { - margin-left: auto; - margin-right: auto; + margin-inline: auto; }" `) expect( @@ -1315,28 +1296,23 @@ test('margin-y', async () => { } .-my-4 { - margin-top: calc(var(--spacing-4, 1rem) * -1); - margin-bottom: calc(var(--spacing-4, 1rem) * -1); + margin-block: calc(var(--spacing-4, 1rem) * -1); } .-my-\\[var\\(--value\\)\\] { - margin-top: calc(var(--value) * -1); - margin-bottom: calc(var(--value) * -1); + margin-block: calc(var(--value) * -1); } .my-4 { - margin-top: var(--spacing-4, 1rem); - margin-bottom: var(--spacing-4, 1rem); + margin-block: var(--spacing-4, 1rem); } .my-\\[4px\\] { - margin-top: 4px; - margin-bottom: 4px; + margin-block: 4px; } .my-auto { - margin-top: auto; - margin-bottom: auto; + margin-block: auto; }" `) expect( @@ -1660,13 +1636,11 @@ test('margin sort order', async () => { } .mx-4 { - margin-left: var(--spacing-4, 1rem); - margin-right: var(--spacing-4, 1rem); + margin-inline: var(--spacing-4, 1rem); } .my-4 { - margin-top: var(--spacing-4, 1rem); - margin-bottom: var(--spacing-4, 1rem); + margin-block: var(--spacing-4, 1rem); } .ms-4 { @@ -5087,23 +5061,19 @@ test('scroll-mx', async () => { } .-scroll-mx-4 { - scroll-margin-left: calc(var(--spacing-4, 1rem) * -1); - scroll-margin-right: calc(var(--spacing-4, 1rem) * -1); + scroll-margin-inline: calc(var(--spacing-4, 1rem) * -1); } .-scroll-mx-\\[var\\(--value\\)\\] { - scroll-margin-left: calc(var(--value) * -1); - scroll-margin-right: calc(var(--value) * -1); + scroll-margin-inline: calc(var(--value) * -1); } .scroll-mx-4 { - scroll-margin-left: var(--spacing-4, 1rem); - scroll-margin-right: var(--spacing-4, 1rem); + scroll-margin-inline: var(--spacing-4, 1rem); } .scroll-mx-\\[4px\\] { - scroll-margin-left: 4px; - scroll-margin-right: 4px; + scroll-margin-inline: 4px; }" `) expect( @@ -5134,23 +5104,19 @@ test('scroll-my', async () => { } .-scroll-my-4 { - scroll-margin-top: calc(var(--spacing-4, 1rem) * -1); - scroll-margin-bottom: calc(var(--spacing-4, 1rem) * -1); + scroll-margin-block: calc(var(--spacing-4, 1rem) * -1); } .-scroll-my-\\[var\\(--value\\)\\] { - scroll-margin-top: calc(var(--value) * -1); - scroll-margin-bottom: calc(var(--value) * -1); + scroll-margin-block: calc(var(--value) * -1); } .scroll-my-4 { - scroll-margin-top: var(--spacing-4, 1rem); - scroll-margin-bottom: var(--spacing-4, 1rem); + scroll-margin-block: var(--spacing-4, 1rem); } .scroll-my-\\[4px\\] { - scroll-margin-top: 4px; - scroll-margin-bottom: 4px; + scroll-margin-block: 4px; }" `) expect( @@ -5482,23 +5448,19 @@ test('scroll-px', async () => { } .-scroll-px-4 { - scroll-padding-left: calc(var(--spacing-4, 1rem) * -1); - scroll-padding-right: calc(var(--spacing-4, 1rem) * -1); + scroll-padding-inline: calc(var(--spacing-4, 1rem) * -1); } .-scroll-px-\\[var\\(--value\\)\\] { - scroll-padding-left: calc(var(--value) * -1); - scroll-padding-right: calc(var(--value) * -1); + scroll-padding-inline: calc(var(--value) * -1); } .scroll-px-4 { - scroll-padding-left: var(--spacing-4, 1rem); - scroll-padding-right: var(--spacing-4, 1rem); + scroll-padding-inline: var(--spacing-4, 1rem); } .scroll-px-\\[4px\\] { - scroll-padding-left: 4px; - scroll-padding-right: 4px; + scroll-padding-inline: 4px; }" `) expect( @@ -5529,23 +5491,19 @@ test('scroll-py', async () => { } .-scroll-py-4 { - scroll-padding-top: calc(var(--spacing-4, 1rem) * -1); - scroll-padding-bottom: calc(var(--spacing-4, 1rem) * -1); + scroll-padding-block: calc(var(--spacing-4, 1rem) * -1); } .-scroll-py-\\[var\\(--value\\)\\] { - scroll-padding-top: calc(var(--value) * -1); - scroll-padding-bottom: calc(var(--value) * -1); + scroll-padding-block: calc(var(--value) * -1); } .scroll-py-4 { - scroll-padding-top: var(--spacing-4, 1rem); - scroll-padding-bottom: var(--spacing-4, 1rem); + scroll-padding-block: var(--spacing-4, 1rem); } .scroll-py-\\[4px\\] { - scroll-padding-top: 4px; - scroll-padding-bottom: 4px; + scroll-padding-block: 4px; }" `) expect( @@ -6998,18 +6956,18 @@ test('space-y', async () => { } :where(.-space-y-4 > :not(:last-child)) { - margin-top: calc(calc(var(--spacing-4, 1rem) * -1) * var(--tw-space-y-reverse)); - margin-bottom: calc(calc(var(--spacing-4, 1rem) * -1) * calc(1 - var(--tw-space-y-reverse))); + margin-block-start: calc(calc(var(--spacing-4, 1rem) * -1) * var(--tw-space-y-reverse)); + margin-block-end: calc(calc(var(--spacing-4, 1rem) * -1) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-4 > :not(:last-child)) { - margin-top: calc(var(--spacing-4, 1rem) * var(--tw-space-y-reverse)); - margin-bottom: calc(var(--spacing-4, 1rem) * calc(1 - var(--tw-space-y-reverse))); + margin-block-start: calc(var(--spacing-4, 1rem) * var(--tw-space-y-reverse)); + margin-block-end: calc(var(--spacing-4, 1rem) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-\\[4px\\] > :not(:last-child)) { - margin-top: calc(4px * var(--tw-space-y-reverse)); - margin-bottom: calc(4px * calc(1 - var(--tw-space-y-reverse))); + margin-block-start: calc(4px * var(--tw-space-y-reverse)); + margin-block-end: calc(4px * calc(1 - var(--tw-space-y-reverse))); } @supports (-moz-orient: inline) { @@ -11387,13 +11345,11 @@ test('px', async () => { } .px-4 { - padding-left: var(--spacing-4, 1rem); - padding-right: var(--spacing-4, 1rem); + padding-inline: var(--spacing-4, 1rem); } .px-\\[4px\\] { - padding-left: 4px; - padding-right: 4px; + padding-inline: 4px; }" `) expect(await run(['px', '-px-4', '-px-[4px]', 'px-4/foo', 'px-[4px]/foo'])).toEqual('') @@ -11416,13 +11372,11 @@ test('py', async () => { } .py-4 { - padding-top: var(--spacing-4, 1rem); - padding-bottom: var(--spacing-4, 1rem); + padding-block: var(--spacing-4, 1rem); } .py-\\[4px\\] { - padding-top: 4px; - padding-bottom: 4px; + padding-block: 4px; }" `) expect(await run(['py', '-py-4', '-py-[4px]', 'py-4/foo', 'py-[4px]/foo'])).toEqual('') diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index b0ab8519fdae..17244e236cd5 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -468,45 +468,29 @@ export function createUtilities(theme: Theme) { }, ]) - staticUtility('inset-x-auto', [ - ['--tw-sort', 'inset-inline'], - ['right', 'auto'], - ['left', 'auto'], - ]) + staticUtility('inset-x-auto', [['inset-inline', 'auto']]) utilities.static('inset-x-full', (candidate) => { let value = candidate.negative ? '-100%' : '100%' - return [decl('--tw-sort', 'inset-inline'), decl('right', value), decl('left', value)] + return [decl('inset-inline', value)] }) functionalUtility('inset-x', { supportsNegative: true, supportsFractions: true, themeKeys: ['--inset', '--spacing'], - handle: (value) => [ - decl('--tw-sort', 'inset-inline'), - decl('right', value), - decl('left', value), - ], + handle: (value) => [decl('inset-inline', value)], }) - staticUtility('inset-y-auto', [ - ['--tw-sort', 'inset-block'], - ['top', 'auto'], - ['bottom', 'auto'], - ]) + staticUtility('inset-y-auto', [['inset-block', 'auto']]) utilities.static('inset-y-full', (candidate) => { let value = candidate.negative ? '-100%' : '100%' - return [decl('--tw-sort', 'inset-block'), decl('top', value), decl('bottom', value)] + return [decl('inset-block', value)] }) functionalUtility('inset-y', { supportsNegative: true, supportsFractions: true, themeKeys: ['--inset', '--spacing'], - handle: (value) => [ - decl('--tw-sort', 'inset-block'), - decl('top', value), - decl('bottom', value), - ], + handle: (value) => [decl('inset-block', value)], }) staticUtility('start-auto', [['inset-inline-start', 'auto']]) @@ -792,10 +776,10 @@ export function createUtilities(theme: Theme) { /** * @css `margin` */ - for (let [namespace, properties, sort] of [ + for (let [namespace, properties] of [ ['m', ['margin']], - ['mx', ['margin-left', 'margin-right'], 'margin-inline'], - ['my', ['margin-top', 'margin-bottom'], 'margin-block'], + ['mx', ['margin-inline']], + ['my', ['margin-block']], ['ms', ['margin-inline-start']], ['me', ['margin-inline-end']], ['mt', ['margin-top']], @@ -810,10 +794,7 @@ export function createUtilities(theme: Theme) { functionalUtility(namespace, { supportsNegative: true, themeKeys: ['--margin', '--spacing'], - handle: (value) => [ - ...(sort ? [decl('--tw-sort', sort)] : []), - ...properties.map((property) => decl(property, value)), - ], + handle: (value) => [...properties.map((property) => decl(property, value))], }) } @@ -1743,21 +1724,13 @@ export function createUtilities(theme: Theme) { functionalUtility('scroll-mx', { supportsNegative: true, themeKeys: ['--scroll-margin', '--spacing'], - handle: (value) => [ - decl('--tw-sort', 'scroll-margin-inline'), - decl('scroll-margin-left', value), - decl('scroll-margin-right', value), - ], + handle: (value) => [decl('scroll-margin-inline', value)], }) functionalUtility('scroll-my', { supportsNegative: true, themeKeys: ['--scroll-margin', '--spacing'], - handle: (value) => [ - decl('--tw-sort', 'scroll-margin-block'), - decl('scroll-margin-top', value), - decl('scroll-margin-bottom', value), - ], + handle: (value) => [decl('scroll-margin-block', value)], }) functionalUtility('scroll-ms', { @@ -1806,21 +1779,13 @@ export function createUtilities(theme: Theme) { functionalUtility('scroll-px', { supportsNegative: true, themeKeys: ['--scroll-padding', '--spacing'], - handle: (value) => [ - decl('--tw-sort', 'scroll-padding-inline'), - decl('scroll-padding-left', value), - decl('scroll-padding-right', value), - ], + handle: (value) => [decl('scroll-padding-inline', value)], }) functionalUtility('scroll-py', { supportsNegative: true, themeKeys: ['--scroll-padding', '--spacing'], - handle: (value) => [ - decl('--tw-sort', 'scroll-padding-block'), - decl('scroll-padding-top', value), - decl('scroll-padding-bottom', value), - ], + handle: (value) => [decl('scroll-padding-block', value)], }) functionalUtility('scroll-ps', { @@ -2075,8 +2040,8 @@ export function createUtilities(theme: Theme) { rule(':where(& > :not(:last-child))', [ decl('--tw-sort', 'column-gap'), - decl('margin-top', `calc(${value} * var(--tw-space-y-reverse))`), - decl('margin-bottom', `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`), + decl('margin-block-start', `calc(${value} * var(--tw-space-y-reverse))`), + decl('margin-block-end', `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`), ]), ], }) @@ -2349,22 +2314,18 @@ export function createUtilities(theme: Theme) { borderSideUtility('border-x', { width: (value) => [ - decl('border-left-style', 'var(--tw-border-style)'), - decl('border-right-style', 'var(--tw-border-style)'), - decl('border-left-width', value), - decl('border-right-width', value), + decl('border-inline-style', 'var(--tw-border-style)'), + decl('border-inline-width', value), ], - color: (value) => [decl('border-left-color', value), decl('border-right-color', value)], + color: (value) => [decl('border-inline-color', value)], }) borderSideUtility('border-y', { width: (value) => [ - decl('border-top-style', 'var(--tw-border-style)'), - decl('border-bottom-style', 'var(--tw-border-style)'), - decl('border-top-width', value), - decl('border-bottom-width', value), + decl('border-block-style', 'var(--tw-border-style)'), + decl('border-block-width', value), ], - color: (value) => [decl('border-top-color', value), decl('border-bottom-color', value)], + color: (value) => [decl('border-block-color', value)], }) borderSideUtility('border-s', { @@ -2976,20 +2937,12 @@ export function createUtilities(theme: Theme) { functionalUtility('px', { themeKeys: ['--padding', '--spacing'], - handle: (value) => [ - decl('--tw-sort', 'padding-inline'), - decl('padding-left', value), - decl('padding-right', value), - ], + handle: (value) => [decl('padding-inline', value)], }) functionalUtility('py', { themeKeys: ['--padding', '--spacing'], - handle: (value) => [ - decl('--tw-sort', 'padding-block'), - decl('padding-top', value), - decl('padding-bottom', value), - ], + handle: (value) => [decl('padding-block', value)], }) functionalUtility('pt', {