Skip to content

Commit

Permalink
Fix negative rotate utilities (#15044)
Browse files Browse the repository at this point in the history 
This fixes the negative versions of rotate:
`-rotate-y-*`, `-rotate-x-*`, and `-rotate-z-*`

They were producing CSS like `--tw-rotate-x: calc(rotateX(Xdeg) * -1)`
instead of `--tw-rotate-x: rotateX(calc(Xdeg * -1))`. This fixes all of
those. The skew utilities have a similar structure but were already
handled correctly.
  • Loading branch information
@thecrypticace
thecrypticace authored Nov 19, 2024
1 parent 7e068ba commit a83b02b
Show file tree
Hide file tree
Showing 3 changed files with 137 additions and 52 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
184 changes: 134 additions & 50 deletions packages/tailwindcss/src/utilities.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(calc(45deg * -1));
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
}
Expand All @@ -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);
}
Expand Down Expand Up @@ -4510,64 +4510,70 @@ 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);
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
}
expect(await run(['rotate-y-45', '-rotate-y-45', 'rotate-y-[123deg]', '-rotate-y-[123deg]']))
.toMatchInlineSnapshot(`
".-rotate-y-45 {
--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);
}
.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(123deg * -1));
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;
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);
}
@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);
.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: "<transform-function>";
inherits: false;
initial-value: rotateX(0);
}
@property --tw-rotate-x {
syntax: "<transform-function>";
inherits: false;
initial-value: rotateX(0);
}
@property --tw-rotate-y {
syntax: "<transform-function>";
inherits: false;
initial-value: rotateY(0);
}
@property --tw-rotate-y {
syntax: "<transform-function>";
inherits: false;
initial-value: rotateY(0);
}
@property --tw-rotate-z {
syntax: "<transform-function>";
inherits: false;
initial-value: rotateZ(0);
}
@property --tw-rotate-z {
syntax: "<transform-function>";
inherits: false;
initial-value: rotateZ(0);
}
@property --tw-skew-x {
syntax: "<transform-function>";
inherits: false;
initial-value: skewX(0);
}
@property --tw-skew-x {
syntax: "<transform-function>";
inherits: false;
initial-value: skewX(0);
}
@property --tw-skew-y {
syntax: "<transform-function>";
inherits: false;
initial-value: skewY(0);
}"
`)
@property --tw-skew-y {
syntax: "<transform-function>";
inherits: false;
initial-value: skewY(0);
}"
`)
expect(
await run([
'rotate-y',
Expand All @@ -4581,6 +4587,84 @@ test('rotate-y', async () => {
).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(calc(45deg * -1));
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-\\[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);
}
}
}
@property --tw-rotate-x {
syntax: "<transform-function>";
inherits: false;
initial-value: rotateX(0);
}
@property --tw-rotate-y {
syntax: "<transform-function>";
inherits: false;
initial-value: rotateY(0);
}
@property --tw-rotate-z {
syntax: "<transform-function>";
inherits: false;
initial-value: rotateZ(0);
}
@property --tw-skew-x {
syntax: "<transform-function>";
inherits: false;
initial-value: skewX(0);
}
@property --tw-skew-y {
syntax: "<transform-function>";
inherits: false;
initial-value: skewY(0);
}"
`)
expect(
await run([
'rotate-z',
'rotate-z--1',
'-rotate-z',
'rotate-z-potato',
'rotate-z-45/foo',
'-rotate-z-45/foo',
'rotate-z-[123deg]/foo',
]),
).toEqual('')
})

test('skew', async () => {
expect(await run(['skew-6', '-skew-6', 'skew-[123deg]'])).toMatchInlineSnapshot(`
".-skew-6 {
Expand Down
4 changes: 2 additions & 2 deletions packages/tailwindcss/src/utilities.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1330,11 +1330,11 @@ export function createUtilities(theme: Theme) {
themeKeys: ['--rotate'],
handleBareValue: ({ value }) => {
if (!isPositiveInteger(value)) return null
return `rotate${axis.toUpperCase()}(${value}deg)`
return `${value}deg`
},
handle: (value) => [
transformProperties(),
decl(`--tw-rotate-${axis}`, value),
decl(`--tw-rotate-${axis}`, `rotate${axis.toUpperCase()}(${value})`),
decl('transform', transformValue),
],
})
Expand Down

0 comments on commit a83b02b

Please sign in to comment.