archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Don't register properties with types unless necessary (#15215)

Browse Source 
This PR updates many of our `@property` rules to use `syntax: "*"`
instead of a specific type.

Registering custom properties with types triggers all sorts of obscure
edge-case bugs in different browsers (mostly Safari, sometimes Firefox),
but using `"*"` always seems to work. So unless we know we actually need
to animate a custom property, it's safer to register is as `"*"`.

Many of the places our custom properties are used are already inherently
animatable (like the `translate`, `scale`, and `transform`) even when
the underlying properties are not typed, so removing types for things
like `--tw-scale-x` doesn't actually stop the `scale-*` utilities from
being animateable.

I've also updated the `--tw-gradient-from/via/to-position` properties to
use `<length-percentage>` instead of `<length> | <percentage>` because
for some reason I don't understand, only `<length-percentage>` works
correctly when using `calc(…)` in arbitrary values.

Fixes https://github.com/tailwindlabs/tailwindcss/issues/15188,
https://github.com/tailwindlabs/tailwindcss/issues/14277.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
This commit is contained in:
Adam Wathan 2024-11-27 11:47:27 -05:00 committed by GitHub
parent aa15964b28
commit a1f78a2b34
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 137 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -20,12 +20,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Fix scanning classes delimited by tab characters ([#15169](https://github.com/tailwindlabs/tailwindcss/pull/15169))
- Ensure opacity modifiers and semi-transparent gradients render correctly by default in Safari ([#15201](https://github.com/tailwindlabs/tailwindcss/pull/15201))
- Fix element size thrashing when transitioning gradients on elements with a defined font-size in Safari ([#15216](https://github.com/tailwindlabs/tailwindcss/pull/15216))
- Ensure `translate-*` utilities work with arbitrary values that use `calc(…)` ([#15215](https://github.com/tailwindlabs/tailwindcss/pull/15215))
- Ensure gradient stop position utilities work with arbitrary values that use `calc(…)` ([#15215](https://github.com/tailwindlabs/tailwindcss/pull/15215))
### Changed
- Interpolate gradients using OKLAB instead of OKLCH by default ([#15201](https://github.com/tailwindlabs/tailwindcss/pull/15201))
- Error when `layer(…)` in `@import` is not first in the list of functions/conditions ([#15109](https://github.com/tailwindlabs/tailwindcss/pull/15109))
- Use unitless line-height values for font-size variables in default theme ([#15216](https://github.com/tailwindlabs/tailwindcss/pull/15216))
- Don't register custom properties with explicit types unless those custom properties need to be animateable ([#15215](https://github.com/tailwindlabs/tailwindcss/pull/15215))
## [4.0.0-beta.2] - 2024-11-22

18
packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
View File

@ -127,7 +127,7 @@ exports[`border-* 1`] = `
}
@property --tw-border-style {
syntax: "<custom-ident>";
syntax: "*";
inherits: false;
initial-value: solid;
}"
@ -260,7 +260,7 @@ exports[`border-b-* 1`] = `
}
@property --tw-border-style {
syntax: "<custom-ident>";
syntax: "*";
inherits: false;
initial-value: solid;
}"
@ -393,7 +393,7 @@ exports[`border-e-* 1`] = `
}
@property --tw-border-style {
syntax: "<custom-ident>";
syntax: "*";
inherits: false;
initial-value: solid;
}"
@ -526,7 +526,7 @@ exports[`border-l-* 1`] = `
}
@property --tw-border-style {
syntax: "<custom-ident>";
syntax: "*";
inherits: false;
initial-value: solid;
}"
@ -659,7 +659,7 @@ exports[`border-r-* 1`] = `
}
@property --tw-border-style {
syntax: "<custom-ident>";
syntax: "*";
inherits: false;
initial-value: solid;
}"
@ -792,7 +792,7 @@ exports[`border-s-* 1`] = `
}
@property --tw-border-style {
syntax: "<custom-ident>";
syntax: "*";
inherits: false;
initial-value: solid;
}"
@ -925,7 +925,7 @@ exports[`border-t-* 1`] = `
}
@property --tw-border-style {
syntax: "<custom-ident>";
syntax: "*";
inherits: false;
initial-value: solid;
}"
@ -1058,7 +1058,7 @@ exports[`border-x-* 1`] = `
}
@property --tw-border-style {
syntax: "<custom-ident>";
syntax: "*";
inherits: false;
initial-value: solid;
}"
@ -1191,7 +1191,7 @@ exports[`border-y-* 1`] = `
}
@property --tw-border-style {
syntax: "<custom-ident>";
syntax: "*";
inherits: false;
initial-value: solid;
}"

8
packages/tailwindcss/src/index.test.ts
View File

@ -302,19 +302,19 @@ describe('@apply', () => {
}
@property --tw-translate-x {
syntax: "<length> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "<length> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "<length>";
syntax: "*";
inherits: false;
initial-value: 0;
}"
@ -717,7 +717,7 @@ describe('sorting', () => {
}
@property --tw-space-x-reverse {
syntax: "<number>";
syntax: "*";
inherits: false;
initial-value: 0;
}"

204
packages/tailwindcss/src/utilities.test.ts
View File

@ -3982,19 +3982,19 @@ test('translate', async () => {
}
@property --tw-translate-x {
syntax: "<length> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "<length> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "<length>";
syntax: "*";
inherits: false;
initial-value: 0;
}"
@ -4055,19 +4055,19 @@ test('translate-x', async () => {
}
@property --tw-translate-x {
syntax: "<length> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "<length> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "<length>";
syntax: "*";
inherits: false;
initial-value: 0;
}"
@ -4132,19 +4132,19 @@ test('translate-x', async () => {
}
@property --tw-translate-x {
syntax: "<length> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "<length> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "<length>";
syntax: "*";
inherits: false;
initial-value: 0;
}"
@ -4203,19 +4203,19 @@ test('translate-y', async () => {
}
@property --tw-translate-x {
syntax: "<length> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "<length> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "<length>";
syntax: "*";
inherits: false;
initial-value: 0;
}"
@ -4280,19 +4280,19 @@ test('translate-y', async () => {
}
@property --tw-translate-x {
syntax: "<length> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "<length> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "<length>";
syntax: "*";
inherits: false;
initial-value: 0;
}"
@ -4334,19 +4334,19 @@ test('translate-z', async () => {
}
@property --tw-translate-x {
syntax: "<length> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "<length> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "<length>";
syntax: "*";
inherits: false;
initial-value: 0;
}"
@ -4384,19 +4384,19 @@ test('translate-3d', async () => {
}
@property --tw-translate-x {
syntax: "<length> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "<length> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "<length>";
syntax: "*";
inherits: false;
initial-value: 0;
}"
@ -4884,56 +4884,56 @@ test('skew-y', async () => {
test('scale', async () => {
expect(await run(['scale-50', '-scale-50', 'scale-[2]', 'scale-[2_1.5_3]']))
.toMatchInlineSnapshot(`
".-scale-50 {
--tw-scale-x: calc(50% * -1);
--tw-scale-y: calc(50% * -1);
--tw-scale-z: calc(50% * -1);
scale: var(--tw-scale-x) var(--tw-scale-y);
}
".-scale-50 {
--tw-scale-x: calc(50% * -1);
--tw-scale-y: calc(50% * -1);
--tw-scale-z: calc(50% * -1);
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-50 {
--tw-scale-x: 50%;
--tw-scale-y: 50%;
--tw-scale-z: 50%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-50 {
--tw-scale-x: 50%;
--tw-scale-y: 50%;
--tw-scale-z: 50%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.scale-\\[2\\] {
scale: 2;
}
.scale-\\[2\\] {
scale: 2;
}
.scale-\\[2_1\\.5_3\\] {
scale: 2 1.5 3;
}
.scale-\\[2_1\\.5_3\\] {
scale: 2 1.5 3;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
}
}
}
}
@property --tw-scale-x {
syntax: "<number> | <percentage>";
inherits: false;
initial-value: 1;
}
@property --tw-scale-x {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-y {
syntax: "<number> | <percentage>";
inherits: false;
initial-value: 1;
}
@property --tw-scale-y {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-z {
syntax: "<number> | <percentage>";
inherits: false;
initial-value: 1;
}"
`)
@property --tw-scale-z {
syntax: "*";
inherits: false;
initial-value: 1;
}"
`)
expect(
await run([
'scale',
@ -4965,19 +4965,19 @@ test('scale-3d', async () => {
}
@property --tw-scale-x {
syntax: "<number> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-y {
syntax: "<number> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-z {
syntax: "<number> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 1;
}"
@ -5013,19 +5013,19 @@ test('scale-x', async () => {
}
@property --tw-scale-x {
syntax: "<number> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-y {
syntax: "<number> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-z {
syntax: "<number> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 1;
}"
@ -5054,19 +5054,19 @@ test('scale-x', async () => {
}
@property --tw-scale-x {
syntax: "<number> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-y {
syntax: "<number> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-z {
syntax: "<number> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 1;
}"
@ -5114,19 +5114,19 @@ test('scale-y', async () => {
}
@property --tw-scale-x {
syntax: "<number> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-y {
syntax: "<number> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-z {
syntax: "<number> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 1;
}"
@ -5172,19 +5172,19 @@ test('scale-z', async () => {
}
@property --tw-scale-x {
syntax: "<number> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-y {
syntax: "<number> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-z {
syntax: "<number> | <percentage>";
syntax: "*";
inherits: false;
initial-value: 1;
}"
@ -7892,7 +7892,7 @@ test('space-x', async () => {
}
@property --tw-space-x-reverse {
syntax: "<number>";
syntax: "*";
inherits: false;
initial-value: 0;
}"
@ -7943,7 +7943,7 @@ test('space-y', async () => {
}
@property --tw-space-y-reverse {
syntax: "<number>";
syntax: "*";
inherits: false;
initial-value: 0;
}"
@ -7966,7 +7966,7 @@ test('space-x-reverse', async () => {
}
@property --tw-space-x-reverse {
syntax: "<number>";
syntax: "*";
inherits: false;
initial-value: 0;
}"
@ -7989,7 +7989,7 @@ test('space-y-reverse', async () => {
}
@property --tw-space-y-reverse {
syntax: "<number>";
syntax: "*";
inherits: false;
initial-value: 0;
}"
@ -8044,13 +8044,13 @@ test('divide-x', async () => {
}
@property --tw-divide-x-reverse {
syntax: "<number>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-border-style {
syntax: "<custom-ident>";
syntax: "*";
inherits: false;
initial-value: solid;
}"
@ -8103,13 +8103,13 @@ test('divide-x with custom default border width', async () => {
}
@property --tw-divide-x-reverse {
syntax: "<number>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-border-style {
syntax: "<custom-ident>";
syntax: "*";
inherits: false;
initial-value: solid;
}"
@ -8168,13 +8168,13 @@ test('divide-y', async () => {
}
@property --tw-divide-y-reverse {
syntax: "<number>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-border-style {
syntax: "<custom-ident>";
syntax: "*";
inherits: false;
initial-value: solid;
}"
@ -8228,13 +8228,13 @@ test('divide-y with custom default border width', async () => {
}
@property --tw-divide-y-reverse {
syntax: "<number>";
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-border-style {
syntax: "<custom-ident>";
syntax: "*";
inherits: false;
initial-value: solid;
}"
@ -8257,7 +8257,7 @@ test('divide-x-reverse', async () => {
}
@property --tw-divide-x-reverse {
syntax: "<number>";
syntax: "*";
inherits: false;
initial-value: 0;
}"
@ -8280,7 +8280,7 @@ test('divide-y-reverse', async () => {
}
@property --tw-divide-y-reverse {
syntax: "<number>";
syntax: "*";
inherits: false;
initial-value: 0;
}"
@ -10339,7 +10339,7 @@ test('border with custom default border width', async () => {
}
@property --tw-border-style {
syntax: "<custom-ident>";
syntax: "*";
inherits: false;
initial-value: solid;
}"
@ -11241,19 +11241,19 @@ test('from', async () => {
}
@property --tw-gradient-from-position {
syntax: "<length> | <percentage>";
syntax: "<length-percentage>";
inherits: false;
initial-value: 0%;
}
@property --tw-gradient-via-position {
syntax: "<length> | <percentage>";
syntax: "<length-percentage>";
inherits: false;
initial-value: 50%;
}
@property --tw-gradient-to-position {
syntax: "<length> | <percentage>";
syntax: "<length-percentage>";
inherits: false;
initial-value: 100%;
}"
@ -11488,19 +11488,19 @@ test('via', async () => {
}
@property --tw-gradient-from-position {
syntax: "<length> | <percentage>";
syntax: "<length-percentage>";
inherits: false;
initial-value: 0%;
}
@property --tw-gradient-via-position {
syntax: "<length> | <percentage>";
syntax: "<length-percentage>";
inherits: false;
initial-value: 50%;
}
@property --tw-gradient-to-position {
syntax: "<length> | <percentage>";
syntax: "<length-percentage>";
inherits: false;
initial-value: 100%;
}"
@ -11721,19 +11721,19 @@ test('to', async () => {
}
@property --tw-gradient-from-position {
syntax: "<length> | <percentage>";
syntax: "<length-percentage>";
inherits: false;
initial-value: 0%;
}
@property --tw-gradient-via-position {
syntax: "<length> | <percentage>";
syntax: "<length-percentage>";
inherits: false;
initial-value: 50%;
}
@property --tw-gradient-to-position {
syntax: "<length> | <percentage>";
syntax: "<length-percentage>";
inherits: false;
initial-value: 100%;
}"
@ -15273,7 +15273,7 @@ test('outline', async () => {
}
@property --tw-outline-style {
syntax: "<custom-ident>";
syntax: "*";
inherits: false;
initial-value: solid;
}"

38
packages/tailwindcss/src/utilities.ts
View File

@ -1093,9 +1093,9 @@ export function createUtilities(theme: Theme) {
let translateProperties = () =>
atRoot([
property('--tw-translate-x', '0', '<length> | <percentage>'),
property('--tw-translate-y', '0', '<length> | <percentage>'),
property('--tw-translate-z', '0', '<length>'),
property('--tw-translate-x', '0'),
property('--tw-translate-y', '0'),
property('--tw-translate-z', '0'),
])
/**
@ -1183,9 +1183,9 @@ export function createUtilities(theme: Theme) {
let scaleProperties = () =>
atRoot([
property('--tw-scale-x', '1', '<number> | <percentage>'),
property('--tw-scale-y', '1', '<number> | <percentage>'),
property('--tw-scale-z', '1', '<number> | <percentage>'),
property('--tw-scale-x', '1'),
property('--tw-scale-y', '1'),
property('--tw-scale-z', '1'),
])
/**
@ -1833,7 +1833,7 @@ export function createUtilities(theme: Theme) {
'space-x',
['--space', '--spacing'],
(value) => [
atRoot([property('--tw-space-x-reverse', '0', '<number>')]),
atRoot([property('--tw-space-x-reverse', '0')]),
styleRule(':where(& > :not(:last-child))', [
decl('--tw-sort', 'row-gap'),
@ -1849,7 +1849,7 @@ export function createUtilities(theme: Theme) {
'space-y',
['--space', '--spacing'],
(value) => [
atRoot([property('--tw-space-y-reverse', '0', '<number>')]),
atRoot([property('--tw-space-y-reverse', '0')]),
styleRule(':where(& > :not(:last-child))', [
decl('--tw-sort', 'column-gap'),
decl('--tw-space-y-reverse', '0'),
@ -1861,7 +1861,7 @@ export function createUtilities(theme: Theme) {
)
staticUtility('space-x-reverse', [
() => atRoot([property('--tw-space-x-reverse', '0', '<number>')]),
() => atRoot([property('--tw-space-x-reverse', '0')]),
() =>
styleRule(':where(& > :not(:last-child))', [
decl('--tw-sort', 'row-gap'),
@ -1870,7 +1870,7 @@ export function createUtilities(theme: Theme) {
])
staticUtility('space-y-reverse', [
() => atRoot([property('--tw-space-y-reverse', '0', '<number>')]),
() => atRoot([property('--tw-space-y-reverse', '0')]),
() =>
styleRule(':where(& > :not(:last-child))', [
decl('--tw-sort', 'column-gap'),
@ -2041,7 +2041,7 @@ export function createUtilities(theme: Theme) {
}
let borderProperties = () => {
return atRoot([property('--tw-border-style', 'solid', '<custom-ident>')])
return atRoot([property('--tw-border-style', 'solid')])
}
function borderSideUtility(classRoot: string, desc: BorderDescription) {
@ -2196,7 +2196,7 @@ export function createUtilities(theme: Theme) {
return `${value}px`
},
handle: (value) => [
atRoot([property('--tw-divide-x-reverse', '0', '<number>')]),
atRoot([property('--tw-divide-x-reverse', '0')]),
styleRule(':where(& > :not(:last-child))', [
decl('--tw-sort', 'divide-x-width'),
@ -2217,7 +2217,7 @@ export function createUtilities(theme: Theme) {
return `${value}px`
},
handle: (value) => [
atRoot([property('--tw-divide-y-reverse', '0', '<number>')]),
atRoot([property('--tw-divide-y-reverse', '0')]),
styleRule(':where(& > :not(:last-child))', [
decl('--tw-sort', 'divide-y-width'),
@ -2248,12 +2248,12 @@ export function createUtilities(theme: Theme) {
])
staticUtility('divide-x-reverse', [
() => atRoot([property('--tw-divide-x-reverse', '0', '<number>')]),
() => atRoot([property('--tw-divide-x-reverse', '0')]),
() => styleRule(':where(& > :not(:last-child))', [decl('--tw-divide-x-reverse', '1')]),
])
staticUtility('divide-y-reverse', [
() => atRoot([property('--tw-divide-y-reverse', '0', '<number>')]),
() => atRoot([property('--tw-divide-y-reverse', '0')]),
() => styleRule(':where(& > :not(:last-child))', [decl('--tw-divide-y-reverse', '1')]),
])
@ -2561,9 +2561,9 @@ export function createUtilities(theme: Theme) {
property('--tw-gradient-to', '#0000', '<color>'),
property('--tw-gradient-stops'),
property('--tw-gradient-via-stops'),
property('--tw-gradient-from-position', '0%', '<length> | <percentage>'),
property('--tw-gradient-via-position', '50%', '<length> | <percentage>'),
property('--tw-gradient-to-position', '100%', '<length> | <percentage>'),
property('--tw-gradient-from-position', '0%', '<length-percentage>'),
property('--tw-gradient-via-position', '50%', '<length-percentage>'),
property('--tw-gradient-to-position', '100%', '<length-percentage>'),
])
}
@ -3833,7 +3833,7 @@ export function createUtilities(theme: Theme) {
{
let outlineProperties = () => {
return atRoot([property('--tw-outline-style', 'solid', '<custom-ident>')])
return atRoot([property('--tw-outline-style', 'solid')])
}
staticUtility('outline-hidden', [