mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Fix negative rotate utilities (#15044)
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.
This commit is contained in:
Jordan Pittman
GitHub
parent
7e068ba9b5
commit
a83b02b341
@ -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))
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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,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',
|
||||
@ -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 {
|
||||
|
||||
@ -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),
|
||||
],
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user