mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Use inline and block for x/y utilities (#14805)
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: <img width="1223" alt="image" src="https://github.com/user-attachments/assets/0e9854ba-2b5b-4c8c-87b6-6eb7b7da84f2"> <details> <summary>Show code for playground demo</summary> ```jsx import React from 'react' export function App() { return ( <div className="p-12 gap-10 grid grid-cols-2 items-start"> <div className="grid grid-cols-1 gap-10 justify-start"> <div className="space-y-6"> <p className="font-semibold mb-6">Border Width</p> <div className="border-x w-48 h-12 flex items-center justify-center">border-x</div> <div className="border-y w-48 h-12 flex items-center justify-center">border-y</div> </div> <div className="space-y-6"> <p className="font-semibold mb-6">Border Color</p> <div className="border-2 border-x-red-500 w-48 h-12 flex items-center justify-center"> border-x-red-500 </div> <div className="border-2 border-y-red-500 w-48 h-12 flex items-center justify-center"> border-y-red-500 </div> </div> <div className="space-y-6"> <p className="font-semibold mb-6">Padding</p> <div> <div className="px-8 bg-yellow-300 inline-flex items-center justify-center">px-8</div> </div> <div> <div className="py-8 bg-yellow-300 inline-flex items-center justify-center">py-8</div> </div> </div> </div> <div className="grid grid-cols-1 gap-10 justify-start"> <div className="space-y-6"> <p className="font-semibold mb-6">Margin</p> <div> <div className="bg-red-400 inline-flex"> <div className="mx-8 bg-yellow-300 inline-flex items-center justify-center">mx-8</div> </div> </div> <div> <div className="bg-red-400 inline-flex"> <div className="my-8 bg-yellow-300 inline-flex items-center justify-center">my-8</div> </div> </div> </div> <div className="space-y-6"> <p className="font-semibold mb-6">Inset</p> <div className="relative bg-red-400 w-48 h-48"> <div className="inset-x-8 absolute bg-yellow-300 inline-flex items-center justify-center"> inset-x-8 </div> </div> <div className="relative bg-red-400 w-48 h-48"> <div className="inset-y-8 absolute bg-yellow-300 inline-flex items-center justify-center"> inset-y-8 </div> </div> </div> </div> </div> ) } ``` </details> 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>
This commit is contained in:
Adam Wathan
GitHub
parent
e14ab1f9ee
commit
289c25f8e9
@ -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
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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('')
|
||||
|
||||
@ -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', {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user