From e843f5d915c294352e8866aa81b2e03c88a9a985 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 19 Nov 2024 14:53:50 -0500 Subject: [PATCH 1/4] Fix negative rotate utilities --- packages/tailwindcss/src/utilities.test.ts | 116 ++++++++++++++++++--- packages/tailwindcss/src/utilities.ts | 22 +++- 2 files changed, 120 insertions(+), 18 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 8e79a3d28098..4dda383a211c 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -4440,7 +4440,7 @@ test('rotate', async () => { test('rotate-x', async () => { expect(await run(['rotate-x-45', '-rotate-x-45', 'rotate-x-[123deg]'])).toMatchInlineSnapshot(` ".-rotate-x-45 { - --tw-rotate-x: calc(rotateX(45deg) * -1); + --tw-rotate-x: rotateX(-45deg); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } @@ -4450,7 +4450,7 @@ test('rotate-x', async () => { } .rotate-x-\\[123deg\\] { - --tw-rotate-x: 123deg; + --tw-rotate-x: rotateX(123deg); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } @@ -4510,19 +4510,103 @@ test('rotate-x', async () => { }) test('rotate-y', async () => { - expect(await run(['rotate-y-45', '-rotate-y-45', 'rotate-y-[123deg]'])).toMatchInlineSnapshot(` - ".-rotate-y-45 { - --tw-rotate-y: calc(rotateY(45deg) * -1); + expect(await run(['rotate-y-45', '-rotate-y-45', 'rotate-y-[123deg]', '-rotate-y-[123deg]'])) + .toMatchInlineSnapshot(` + ".-rotate-y-45 { + --tw-rotate-y: rotateY(-45deg); + transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); + } + + .-rotate-y-\\[123deg\\] { + --tw-rotate-y: rotateY(calc(-1 * 123deg)); + transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); + } + + .rotate-y-45 { + --tw-rotate-y: rotateY(45deg); + transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); + } + + .rotate-y-\\[123deg\\] { + --tw-rotate-y: rotateY(123deg); + transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); + } + + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-rotate-x: rotateX(0); + --tw-rotate-y: rotateY(0); + --tw-rotate-z: rotateZ(0); + --tw-skew-x: skewX(0); + --tw-skew-y: skewY(0); + } + } + } + + @property --tw-rotate-x { + syntax: ""; + inherits: false; + initial-value: rotateX(0); + } + + @property --tw-rotate-y { + syntax: ""; + inherits: false; + initial-value: rotateY(0); + } + + @property --tw-rotate-z { + syntax: ""; + inherits: false; + initial-value: rotateZ(0); + } + + @property --tw-skew-x { + syntax: ""; + inherits: false; + initial-value: skewX(0); + } + + @property --tw-skew-y { + syntax: ""; + inherits: false; + initial-value: skewY(0); + }" + `) + expect( + await run([ + 'rotate-y', + 'rotate-y--1', + '-rotate-y', + 'rotate-y-potato', + 'rotate-y-45/foo', + '-rotate-y-45/foo', + 'rotate-y-[123deg]/foo', + ]), + ).toEqual('') +}) + +test('rotate-z', async () => { + expect(await run(['rotate-z-45', '-rotate-z-45', 'rotate-z-[123deg]', '-rotate-z-[123deg]'])) + .toMatchInlineSnapshot(` + ".-rotate-z-45 { + --tw-rotate-z: rotateZ(-45deg); + transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); + } + + .-rotate-z-\\[123deg\\] { + --tw-rotate-z: rotateZ(calc(-1 * 123deg)); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } - .rotate-y-45 { - --tw-rotate-y: rotateY(45deg); + .rotate-z-45 { + --tw-rotate-z: rotateZ(45deg); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } - .rotate-y-\\[123deg\\] { - --tw-rotate-y: 123deg; + .rotate-z-\\[123deg\\] { + --tw-rotate-z: rotateZ(123deg); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } @@ -4570,13 +4654,13 @@ test('rotate-y', async () => { `) expect( await run([ - 'rotate-y', - 'rotate-y--1', - '-rotate-y', - 'rotate-y-potato', - 'rotate-y-45/foo', - '-rotate-y-45/foo', - 'rotate-y-[123deg]/foo', + 'rotate-z', + 'rotate-z--1', + '-rotate-z', + 'rotate-z-potato', + 'rotate-z-45/foo', + '-rotate-z-45/foo', + 'rotate-z-[123deg]/foo', ]), ).toEqual('') }) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index e149496d6eca..aff408601d2a 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -254,6 +254,7 @@ export function createUtilities(theme: Theme) { handleBareValue?: (value: NamedUtilityValue) => string | null handleNegativeBareValue?: (value: NamedUtilityValue) => string | null handle: (value: string) => AstNode[] | undefined + handleNegative?: (value: string) => AstNode[] | undefined } /** @@ -311,6 +312,14 @@ export function createUtilities(theme: Theme) { if (value === null) return // Negate the value if the candidate has a negative prefix. + if (desc.handleNegative) { + if (negative) { + return desc.handleNegative(value) + } + + return desc.handle(value) + } + return desc.handle(negative ? `calc(${value} * -1)` : value) } } @@ -1330,11 +1339,20 @@ export function createUtilities(theme: Theme) { themeKeys: ['--rotate'], handleBareValue: ({ value }) => { if (!isPositiveInteger(value)) return null - return `rotate${axis.toUpperCase()}(${value}deg)` + return `${value}deg` + }, + handleNegativeBareValue: ({ value }) => { + if (!isPositiveInteger(value)) return null + return `${-value}deg` }, handle: (value) => [ transformProperties(), - decl(`--tw-rotate-${axis}`, value), + decl(`--tw-rotate-${axis}`, `rotate${axis.toUpperCase()}(${value})`), + decl('transform', transformValue), + ], + handleNegative: (value) => [ + transformProperties(), + decl(`--tw-rotate-${axis}`, `rotate${axis.toUpperCase()}(calc(-1 * ${value}))`), decl('transform', transformValue), ], }) From 3632ab77fb85a257be56f1088f0a640233b890d3 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 19 Nov 2024 14:54:57 -0500 Subject: [PATCH 2/4] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 29b94cc894f8..35eb85fd2bea 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ensure `flex` is suggested ([#15014](https://github.com/tailwindlabs/tailwindcss/pull/15014)) - Improve module resolution for `cjs`-only and `esm`-only plugins ([#15041](https://github.com/tailwindlabs/tailwindcss/pull/15041)) +- Fix `-rotate-*` utilities ([#15044](https://github.com/tailwindlabs/tailwindcss/pull/15044)) - _Upgrade (experimental)_: Resolve imports when specifying a CSS entry point on the command-line ([#15010](https://github.com/tailwindlabs/tailwindcss/pull/15010)) - _Upgrade (experimental)_: Resolve nearest Tailwind config file when CSS file does not contain `@config` ([#15001](https://github.com/tailwindlabs/tailwindcss/pull/15001)) - _Upgrade (experimental)_: Improve output when CSS imports can not be found ([#15038](https://github.com/tailwindlabs/tailwindcss/pull/15038)) From 8b63a2c49e0ce8e5395f1265ecb26e8861aced4c Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 19 Nov 2024 14:57:19 -0500 Subject: [PATCH 3/4] wip --- packages/tailwindcss/src/utilities.test.ts | 104 ++++++++++----------- packages/tailwindcss/src/utilities.ts | 14 --- 2 files changed, 52 insertions(+), 66 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 4dda383a211c..d648217d04fe 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -4518,7 +4518,7 @@ test('rotate-y', async () => { } .-rotate-y-\\[123deg\\] { - --tw-rotate-y: rotateY(calc(-1 * 123deg)); + --tw-rotate-y: rotateY(calc(123deg * -1)); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } @@ -4590,68 +4590,68 @@ test('rotate-y', async () => { test('rotate-z', async () => { expect(await run(['rotate-z-45', '-rotate-z-45', 'rotate-z-[123deg]', '-rotate-z-[123deg]'])) .toMatchInlineSnapshot(` - ".-rotate-z-45 { - --tw-rotate-z: rotateZ(-45deg); - transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); - } + ".-rotate-z-45 { + --tw-rotate-z: rotateZ(-45deg); + transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); + } - .-rotate-z-\\[123deg\\] { - --tw-rotate-z: rotateZ(calc(-1 * 123deg)); - transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); - } + .-rotate-z-\\[123deg\\] { + --tw-rotate-z: rotateZ(calc(123deg * -1)); + transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); + } - .rotate-z-45 { - --tw-rotate-z: rotateZ(45deg); - transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); - } + .rotate-z-45 { + --tw-rotate-z: rotateZ(45deg); + transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); + } - .rotate-z-\\[123deg\\] { - --tw-rotate-z: rotateZ(123deg); - transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); - } + .rotate-z-\\[123deg\\] { + --tw-rotate-z: rotateZ(123deg); + transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); + } - @supports (-moz-orient: inline) { - @layer base { - *, :before, :after, ::backdrop { - --tw-rotate-x: rotateX(0); - --tw-rotate-y: rotateY(0); - --tw-rotate-z: rotateZ(0); - --tw-skew-x: skewX(0); - --tw-skew-y: skewY(0); + @supports (-moz-orient: inline) { + @layer base { + *, :before, :after, ::backdrop { + --tw-rotate-x: rotateX(0); + --tw-rotate-y: rotateY(0); + --tw-rotate-z: rotateZ(0); + --tw-skew-x: skewX(0); + --tw-skew-y: skewY(0); + } } } - } - @property --tw-rotate-x { - syntax: ""; - inherits: false; - initial-value: rotateX(0); - } + @property --tw-rotate-x { + syntax: ""; + inherits: false; + initial-value: rotateX(0); + } - @property --tw-rotate-y { - syntax: ""; - inherits: false; - initial-value: rotateY(0); - } + @property --tw-rotate-y { + syntax: ""; + inherits: false; + initial-value: rotateY(0); + } - @property --tw-rotate-z { - syntax: ""; - inherits: false; - initial-value: rotateZ(0); - } + @property --tw-rotate-z { + syntax: ""; + inherits: false; + initial-value: rotateZ(0); + } - @property --tw-skew-x { - syntax: ""; - inherits: false; - initial-value: skewX(0); - } + @property --tw-skew-x { + syntax: ""; + inherits: false; + initial-value: skewX(0); + } - @property --tw-skew-y { - syntax: ""; - inherits: false; - initial-value: skewY(0); - }" - `) + @property --tw-skew-y { + syntax: ""; + inherits: false; + initial-value: skewY(0); + }" + `) expect( await run([ 'rotate-z', diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index aff408601d2a..f3cbbc8ee594 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -254,7 +254,6 @@ export function createUtilities(theme: Theme) { handleBareValue?: (value: NamedUtilityValue) => string | null handleNegativeBareValue?: (value: NamedUtilityValue) => string | null handle: (value: string) => AstNode[] | undefined - handleNegative?: (value: string) => AstNode[] | undefined } /** @@ -312,14 +311,6 @@ export function createUtilities(theme: Theme) { if (value === null) return // Negate the value if the candidate has a negative prefix. - if (desc.handleNegative) { - if (negative) { - return desc.handleNegative(value) - } - - return desc.handle(value) - } - return desc.handle(negative ? `calc(${value} * -1)` : value) } } @@ -1350,11 +1341,6 @@ export function createUtilities(theme: Theme) { decl(`--tw-rotate-${axis}`, `rotate${axis.toUpperCase()}(${value})`), decl('transform', transformValue), ], - handleNegative: (value) => [ - transformProperties(), - decl(`--tw-rotate-${axis}`, `rotate${axis.toUpperCase()}(calc(-1 * ${value}))`), - decl('transform', transformValue), - ], }) suggest(`rotate-${axis}`, () => [ From 323586955b641e2f57fd2166dd153cc102ad258b Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 19 Nov 2024 14:58:48 -0500 Subject: [PATCH 4/4] wip --- packages/tailwindcss/src/utilities.test.ts | 6 +++--- packages/tailwindcss/src/utilities.ts | 4 ---- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index d648217d04fe..5483d2085e4a 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -4440,7 +4440,7 @@ test('rotate', async () => { test('rotate-x', async () => { expect(await run(['rotate-x-45', '-rotate-x-45', 'rotate-x-[123deg]'])).toMatchInlineSnapshot(` ".-rotate-x-45 { - --tw-rotate-x: rotateX(-45deg); + --tw-rotate-x: rotateX(calc(45deg * -1)); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } @@ -4513,7 +4513,7 @@ test('rotate-y', async () => { expect(await run(['rotate-y-45', '-rotate-y-45', 'rotate-y-[123deg]', '-rotate-y-[123deg]'])) .toMatchInlineSnapshot(` ".-rotate-y-45 { - --tw-rotate-y: rotateY(-45deg); + --tw-rotate-y: rotateY(calc(45deg * -1)); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } @@ -4591,7 +4591,7 @@ test('rotate-z', async () => { expect(await run(['rotate-z-45', '-rotate-z-45', 'rotate-z-[123deg]', '-rotate-z-[123deg]'])) .toMatchInlineSnapshot(` ".-rotate-z-45 { - --tw-rotate-z: rotateZ(-45deg); + --tw-rotate-z: rotateZ(calc(45deg * -1)); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index f3cbbc8ee594..ee90f9e2e811 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -1332,10 +1332,6 @@ export function createUtilities(theme: Theme) { if (!isPositiveInteger(value)) return null return `${value}deg` }, - handleNegativeBareValue: ({ value }) => { - if (!isPositiveInteger(value)) return null - return `${-value}deg` - }, handle: (value) => [ transformProperties(), decl(`--tw-rotate-${axis}`, `rotate${axis.toUpperCase()}(${value})`),