Improve transform, transform-cpu and transform-gpu utilities (#13290)
* fix `transform-gpu` translate syntax
* move `skewX` and `skewY` functions into the variable
* use `transform-[…]` with arbitrary values as-is
This will not have any fallbacks to the `skewX` or `skewY` functions.
The arbitrary values will be the only value that's used.
* use `--tw-skew-{x,y}` variables in `transform-cpu` and `transform-gpu`
* update tests
* drop `skewX` and `skewY` functions because they are embedded in the `--tw-skew-x` and `--tw-skew-y` CSS variables
* drop `transform-cpu` and `transform-gpu`
* add `translate-none`, `transform-none`, `rotate-none` and `scale-none`
* ensure `transform` creates a stacking context
* use `<transform-function>` instead of `<angle>`
* re-add `transform-gpu`
* drop the `,`, because `--tw-skew-x` and `--tw-skew-y` will always be defined by the `@property`
* `translate(0)` is not necessary because `--tw-skew-{x,y}` will always be defined
* add skew variables to `transform-gpu`
Otherwise skew's will be gone
* re-add `transform-cpu`
This commit is contained in:
Robin Malfait
GitHub
parent
6a6186c24a
commit
a3cedf253a
3 changed files with 71 additions and 72 deletions
|
|
@ -1313,6 +1313,7 @@ exports[`getClassList 1`] = `
|
|||
"rotate-45",
|
||||
"rotate-6",
|
||||
"rotate-90",
|
||||
"rotate-none",
|
||||
"rotate-x-0",
|
||||
"rotate-x-1",
|
||||
"rotate-x-12",
|
||||
|
|
@ -1420,6 +1421,7 @@ exports[`getClassList 1`] = `
|
|||
"scale-75",
|
||||
"scale-90",
|
||||
"scale-95",
|
||||
"scale-none",
|
||||
"scale-x-0",
|
||||
"scale-x-100",
|
||||
"scale-x-105",
|
||||
|
|
@ -1708,6 +1710,7 @@ exports[`getClassList 1`] = `
|
|||
"translate-3d",
|
||||
"translate-4",
|
||||
"translate-full",
|
||||
"translate-none",
|
||||
"translate-x-0.5",
|
||||
"translate-x-1",
|
||||
"translate-x-3",
|
||||
|
|
|
|||
|
|
@ -2711,33 +2711,33 @@ test('rotate-y', () => {
|
|||
test('skew', () => {
|
||||
expect(run(['skew-6', '-skew-6', 'skew-[123deg]'])).toMatchInlineSnapshot(`
|
||||
".-skew-6 {
|
||||
--tw-skew-x: calc(6deg * -1);
|
||||
--tw-skew-y: calc(6deg * -1);
|
||||
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
|
||||
--tw-skew-x: skewX(calc(6deg * -1));
|
||||
--tw-skew-y: skewY(calc(6deg * -1));
|
||||
transform: var(--tw-skew-x) var(--tw-skew-y);
|
||||
}
|
||||
|
||||
.skew-6 {
|
||||
--tw-skew-x: 6deg;
|
||||
--tw-skew-y: 6deg;
|
||||
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
|
||||
--tw-skew-x: skewX(6deg);
|
||||
--tw-skew-y: skewY(6deg);
|
||||
transform: var(--tw-skew-x) var(--tw-skew-y);
|
||||
}
|
||||
|
||||
.skew-\\[123deg\\] {
|
||||
--tw-skew-x: 123deg;
|
||||
--tw-skew-y: 123deg;
|
||||
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
|
||||
--tw-skew-x: skewX(123deg);
|
||||
--tw-skew-y: skewY(123deg);
|
||||
transform: var(--tw-skew-x) var(--tw-skew-y);
|
||||
}
|
||||
|
||||
@property --tw-skew-x {
|
||||
syntax: "<angle>";
|
||||
syntax: "<transform-function>";
|
||||
inherits: false;
|
||||
initial-value: 0deg;
|
||||
initial-value: skewX(0);
|
||||
}
|
||||
|
||||
@property --tw-skew-y {
|
||||
syntax: "<angle>";
|
||||
syntax: "<transform-function>";
|
||||
inherits: false;
|
||||
initial-value: 0deg;
|
||||
initial-value: skewY(0);
|
||||
}"
|
||||
`)
|
||||
expect(run(['skew', 'skew-unknown'])).toEqual('')
|
||||
|
|
@ -2746,30 +2746,30 @@ test('skew', () => {
|
|||
test('skew-x', () => {
|
||||
expect(run(['skew-x-6', '-skew-x-6', 'skew-x-[123deg]'])).toMatchInlineSnapshot(`
|
||||
".-skew-x-6 {
|
||||
--tw-skew-x: calc(6deg * -1);
|
||||
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
|
||||
--tw-skew-x: skewX(calc(6deg * -1));
|
||||
transform: var(--tw-skew-x) var(--tw-skew-y);
|
||||
}
|
||||
|
||||
.skew-x-6 {
|
||||
--tw-skew-x: 6deg;
|
||||
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
|
||||
--tw-skew-x: skewX(6deg);
|
||||
transform: var(--tw-skew-x) var(--tw-skew-y);
|
||||
}
|
||||
|
||||
.skew-x-\\[123deg\\] {
|
||||
--tw-skew-x: 123deg;
|
||||
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
|
||||
--tw-skew-x: skewX(123deg);
|
||||
transform: var(--tw-skew-x) var(--tw-skew-y);
|
||||
}
|
||||
|
||||
@property --tw-skew-x {
|
||||
syntax: "<angle>";
|
||||
syntax: "<transform-function>";
|
||||
inherits: false;
|
||||
initial-value: 0deg;
|
||||
initial-value: skewX(0);
|
||||
}
|
||||
|
||||
@property --tw-skew-y {
|
||||
syntax: "<angle>";
|
||||
syntax: "<transform-function>";
|
||||
inherits: false;
|
||||
initial-value: 0deg;
|
||||
initial-value: skewY(0);
|
||||
}"
|
||||
`)
|
||||
expect(run(['skew-x', 'skew-x-unknown'])).toEqual('')
|
||||
|
|
@ -2778,30 +2778,30 @@ test('skew-x', () => {
|
|||
test('skew-y', () => {
|
||||
expect(run(['skew-y-6', '-skew-y-6', 'skew-y-[123deg]'])).toMatchInlineSnapshot(`
|
||||
".-skew-y-6 {
|
||||
--tw-skew-y: calc(6deg * -1);
|
||||
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
|
||||
--tw-skew-y: skewY(calc(6deg * -1));
|
||||
transform: var(--tw-skew-x) var(--tw-skew-y);
|
||||
}
|
||||
|
||||
.skew-y-6 {
|
||||
--tw-skew-y: 6deg;
|
||||
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
|
||||
--tw-skew-y: skewY(6deg);
|
||||
transform: var(--tw-skew-x) var(--tw-skew-y);
|
||||
}
|
||||
|
||||
.skew-y-\\[123deg\\] {
|
||||
--tw-skew-y: 123deg;
|
||||
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
|
||||
--tw-skew-y: skewY(123deg);
|
||||
transform: var(--tw-skew-x) var(--tw-skew-y);
|
||||
}
|
||||
|
||||
@property --tw-skew-x {
|
||||
syntax: "<angle>";
|
||||
syntax: "<transform-function>";
|
||||
inherits: false;
|
||||
initial-value: 0deg;
|
||||
initial-value: skewX(0);
|
||||
}
|
||||
|
||||
@property --tw-skew-y {
|
||||
syntax: "<angle>";
|
||||
syntax: "<transform-function>";
|
||||
inherits: false;
|
||||
initial-value: 0deg;
|
||||
initial-value: skewY(0);
|
||||
}"
|
||||
`)
|
||||
expect(run(['skew-y', 'skew-y-unknown'])).toEqual('')
|
||||
|
|
@ -3034,36 +3034,36 @@ test('transform', () => {
|
|||
'transform-[scaleZ(2)_rotateY(45deg)]',
|
||||
]),
|
||||
).toMatchInlineSnapshot(`
|
||||
".transform-none {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.transform {
|
||||
transform: skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
|
||||
".transform {
|
||||
transform: var(--tw-skew-x) var(--tw-skew-y);
|
||||
}
|
||||
|
||||
.transform-\\[scaleZ\\(2\\)_rotateY\\(45deg\\)\\] {
|
||||
transform: scaleZ(2) rotateY(45deg) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y));
|
||||
transform: scaleZ(2)rotateY(45deg);
|
||||
}
|
||||
|
||||
.transform-cpu {
|
||||
transform: translate(0);
|
||||
transform: var(--tw-skew-x) var(--tw-skew-y);
|
||||
}
|
||||
|
||||
.transform-gpu {
|
||||
transform: translate(0, 0, 0);
|
||||
transform: translateZ(0) var(--tw-skew-x) var(--tw-skew-y);
|
||||
}
|
||||
|
||||
.transform-none {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@property --tw-skew-x {
|
||||
syntax: "<angle>";
|
||||
syntax: "<transform-function>";
|
||||
inherits: false;
|
||||
initial-value: 0deg;
|
||||
initial-value: skewX(0);
|
||||
}
|
||||
|
||||
@property --tw-skew-y {
|
||||
syntax: "<angle>";
|
||||
syntax: "<transform-function>";
|
||||
inherits: false;
|
||||
initial-value: 0deg;
|
||||
initial-value: skewY(0);
|
||||
}"
|
||||
`)
|
||||
expect(
|
||||
|
|
|
|||
|
|
@ -1213,6 +1213,7 @@ export function createUtilities(theme: Theme) {
|
|||
/**
|
||||
* @css `translate`
|
||||
*/
|
||||
staticUtility('translate-none', [['translate', 'none']])
|
||||
utilities.static('translate-full', (candidate) => {
|
||||
let value = candidate.negative ? '-100%' : '100%'
|
||||
|
||||
|
|
@ -1280,6 +1281,7 @@ export function createUtilities(theme: Theme) {
|
|||
* `rotate-[x_45deg]` => `rotate: x 45deg`
|
||||
* `rotate-[1_2_3_45deg]` => `rotate: 1 2 3 45deg`
|
||||
*/
|
||||
staticUtility('rotate-none', [['rotate', 'none']])
|
||||
utilities.functional('rotate', (candidate) => {
|
||||
if (!candidate.value) return
|
||||
let value
|
||||
|
|
@ -1331,7 +1333,10 @@ export function createUtilities(theme: Theme) {
|
|||
}
|
||||
|
||||
let skewProperties = () =>
|
||||
atRoot([property('--tw-skew-x', '0deg', '<angle>'), property('--tw-skew-y', '0deg', '<angle>')])
|
||||
atRoot([
|
||||
property('--tw-skew-x', 'skewX(0)', '<transform-function>'),
|
||||
property('--tw-skew-y', 'skewY(0)', '<transform-function>'),
|
||||
])
|
||||
|
||||
/**
|
||||
* @css `transform`
|
||||
|
|
@ -1346,9 +1351,9 @@ export function createUtilities(theme: Theme) {
|
|||
},
|
||||
handle: (value) => [
|
||||
skewProperties(),
|
||||
decl('--tw-skew-x', value),
|
||||
decl('--tw-skew-y', value),
|
||||
decl('transform', 'skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))'),
|
||||
decl('--tw-skew-x', `skewX(${value})`),
|
||||
decl('--tw-skew-y', `skewY(${value})`),
|
||||
decl('transform', 'var(--tw-skew-x) var(--tw-skew-y)'),
|
||||
],
|
||||
})
|
||||
|
||||
|
|
@ -1365,8 +1370,8 @@ export function createUtilities(theme: Theme) {
|
|||
},
|
||||
handle: (value) => [
|
||||
skewProperties(),
|
||||
decl('--tw-skew-x', value),
|
||||
decl('transform', 'skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))'),
|
||||
decl('--tw-skew-x', `skewX(${value})`),
|
||||
decl('transform', 'var(--tw-skew-x) var(--tw-skew-y)'),
|
||||
],
|
||||
})
|
||||
|
||||
|
|
@ -1383,8 +1388,8 @@ export function createUtilities(theme: Theme) {
|
|||
},
|
||||
handle: (value) => [
|
||||
skewProperties(),
|
||||
decl('--tw-skew-y', value),
|
||||
decl('transform', 'skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))'),
|
||||
decl('--tw-skew-y', `skewY(${value})`),
|
||||
decl('transform', 'var(--tw-skew-x) var(--tw-skew-y)'),
|
||||
],
|
||||
})
|
||||
|
||||
|
|
@ -1422,6 +1427,7 @@ export function createUtilities(theme: Theme) {
|
|||
/**
|
||||
* @css `scale`
|
||||
*/
|
||||
staticUtility('scale-none', [['scale', 'none']])
|
||||
utilities.functional('scale', (candidate) => {
|
||||
if (!candidate.value) return
|
||||
let value
|
||||
|
|
@ -1506,20 +1512,15 @@ export function createUtilities(theme: Theme) {
|
|||
utilities.functional('transform', (candidate) => {
|
||||
if (candidate.negative) return
|
||||
|
||||
let value = 'skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))'
|
||||
let value: string | null = null
|
||||
if (!candidate.value) {
|
||||
// Supported as a legacy value for its stacking context
|
||||
value = 'var(--tw-skew-x) var(--tw-skew-y)'
|
||||
} else if (candidate.value.kind === 'arbitrary') {
|
||||
// Since skew-x and skew-y are implemented using `transform`, we preserve
|
||||
// them even if an arbitrary transform is provided. Transform functions
|
||||
// are applied right to left, so we put them at the end so they are
|
||||
// applied before other transforms, similar to other specific transform
|
||||
// properties.
|
||||
//
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/transform#values
|
||||
value = `${candidate.value.value} ${value}`
|
||||
value = candidate.value.value
|
||||
}
|
||||
|
||||
if (value === null) return
|
||||
|
||||
return [skewProperties(), decl('transform', value)]
|
||||
})
|
||||
suggest('transform', () => [
|
||||
|
|
@ -1528,14 +1529,9 @@ export function createUtilities(theme: Theme) {
|
|||
},
|
||||
])
|
||||
|
||||
staticUtility('transform-cpu', [['transform', 'translate(0,0)']])
|
||||
staticUtility('transform-gpu', [['transform', 'translate(0,0,0)']])
|
||||
staticUtility('transform-none', [
|
||||
['translate', 'none'],
|
||||
['rotate', 'none'],
|
||||
['scale', 'none'],
|
||||
['transform', 'none'],
|
||||
])
|
||||
staticUtility('transform-cpu', [['transform', 'var(--tw-skew-x) var(--tw-skew-y)']])
|
||||
staticUtility('transform-gpu', [['transform', 'translateZ(0) var(--tw-skew-x) var(--tw-skew-y)']])
|
||||
staticUtility('transform-none', [['transform', 'none']])
|
||||
|
||||
/**
|
||||
* @css `transform-style`
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue