archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2026-01-25 16:44:12 +00:00
Code Issues Projects Releases Wiki Activity

Remove automatic var(…) injection (#13537)

Browse Source 
* remove automatic `var(…)` injection

There are a few properties that use "dashed-ident" values, this means
that you can use `--my-thing` as-is without the `var(…)` around it.

This causes issues because we are now injecting a `var(…)` where it's not
needed.

One potential solution is to create a list of properties where dashed
idents can be used. However, they can _also_ use CSS custom properties
that point to another dashed ident.

A workaround that some people used is adding a `_` in front of the
variable: `mt-[_--my-thing]` this way we don't automatically inject the
`var(…)` around it. This is a workaround and gross.

While the idea of automatic var injection is neat, this causes more
trouble than it's worth. Adding `var(…)` explicitly is better.

A side effect of this is that we can simplify the `candidate` data
structure because we don't need to track `dashedIdent` separately
anymore.

* update tests by adding `var(…)` explicitly

* update changelog
This commit is contained in:
Robin Malfait 2024-04-19 00:40:52 +02:00 committed by GitHub
parent b83576ee6d
commit cd4711cc21
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 749 additions and 818 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Make sure `contain-*` utility variables resolve to a valid value ([#13521](https://github.com/tailwindlabs/tailwindcss/pull/13521))
### Changed
- Remove automatic `var(…)` injection ([#13537](https://github.com/tailwindlabs/tailwindcss/pull/13537))
## Changed
- Use `rem` units for breakpoints by default instead of `px` ([#13469](https://github.com/tailwindlabs/tailwindcss/pull/13469))

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

@ -38,7 +38,7 @@ exports[`border-* 1`] = `
border-width: 12px;
}
.border-\\[length\\:--my-width\\], .border-\\[line-width\\:--my-width\\] {
.border-\\[length\\:var\\(--my-width\\)\\], .border-\\[line-width\\:var\\(--my-width\\)\\] {
border-style: var(--tw-border-style);
border-width: var(--my-width);
}
@ -66,19 +66,19 @@ exports[`border-* 1`] = `
border-color: #0088cc80;
}
.border-\\[--my-color\\] {
.border-\\[color\\:var\\(--my-color\\)\\] {
border-color: var(--my-color);
}
.border-\\[--my-color\\]\\/50 {
.border-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-\\[color\\:--my-color\\] {
.border-\\[var\\(--my-color\\)\\] {
border-color: var(--my-color);
}
.border-\\[color\\:--my-color\\]\\/50 {
.border-\\[var\\(--my-color\\)\\]\\/50 {
border-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
@ -151,7 +151,7 @@ exports[`border-b-* 1`] = `
border-bottom-width: 12px;
}
.border-b-\\[length\\:--my-width\\], .border-b-\\[line-width\\:--my-width\\] {
.border-b-\\[length\\:var\\(--my-width\\)\\], .border-b-\\[line-width\\:var\\(--my-width\\)\\] {
border-bottom-style: var(--tw-border-style);
border-bottom-width: var(--my-width);
}
@ -179,19 +179,19 @@ exports[`border-b-* 1`] = `
border-bottom-color: #0088cc80;
}
.border-b-\\[--my-color\\] {
.border-b-\\[color\\:var\\(--my-color\\)\\] {
border-bottom-color: var(--my-color);
}
.border-b-\\[--my-color\\]\\/50 {
.border-b-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-b-\\[color\\:--my-color\\] {
.border-b-\\[var\\(--my-color\\)\\] {
border-bottom-color: var(--my-color);
}
.border-b-\\[color\\:--my-color\\]\\/50 {
.border-b-\\[var\\(--my-color\\)\\]\\/50 {
border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
@ -264,7 +264,7 @@ exports[`border-e-* 1`] = `
border-inline-end-width: 12px;
}
.border-e-\\[length\\:--my-width\\], .border-e-\\[line-width\\:--my-width\\] {
.border-e-\\[length\\:var\\(--my-width\\)\\], .border-e-\\[line-width\\:var\\(--my-width\\)\\] {
border-inline-end-style: var(--tw-border-style);
border-inline-end-width: var(--my-width);
}
@ -292,19 +292,19 @@ exports[`border-e-* 1`] = `
border-inline-end-color: #0088cc80;
}
.border-e-\\[--my-color\\] {
.border-e-\\[color\\:var\\(--my-color\\)\\] {
border-inline-end-color: var(--my-color);
}
.border-e-\\[--my-color\\]\\/50 {
.border-e-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-inline-end-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-e-\\[color\\:--my-color\\] {
.border-e-\\[var\\(--my-color\\)\\] {
border-inline-end-color: var(--my-color);
}
.border-e-\\[color\\:--my-color\\]\\/50 {
.border-e-\\[var\\(--my-color\\)\\]\\/50 {
border-inline-end-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
@ -377,7 +377,7 @@ exports[`border-l-* 1`] = `
border-left-width: 12px;
}
.border-l-\\[length\\:--my-width\\], .border-l-\\[line-width\\:--my-width\\] {
.border-l-\\[length\\:var\\(--my-width\\)\\], .border-l-\\[line-width\\:var\\(--my-width\\)\\] {
border-left-style: var(--tw-border-style);
border-left-width: var(--my-width);
}
@ -405,19 +405,19 @@ exports[`border-l-* 1`] = `
border-left-color: #0088cc80;
}
.border-l-\\[--my-color\\] {
.border-l-\\[color\\:var\\(--my-color\\)\\] {
border-left-color: var(--my-color);
}
.border-l-\\[--my-color\\]\\/50 {
.border-l-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-l-\\[color\\:--my-color\\] {
.border-l-\\[var\\(--my-color\\)\\] {
border-left-color: var(--my-color);
}
.border-l-\\[color\\:--my-color\\]\\/50 {
.border-l-\\[var\\(--my-color\\)\\]\\/50 {
border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
@ -490,7 +490,7 @@ exports[`border-r-* 1`] = `
border-right-width: 12px;
}
.border-r-\\[length\\:--my-width\\], .border-r-\\[line-width\\:--my-width\\] {
.border-r-\\[length\\:var\\(--my-width\\)\\], .border-r-\\[line-width\\:var\\(--my-width\\)\\] {
border-right-style: var(--tw-border-style);
border-right-width: var(--my-width);
}
@ -518,19 +518,19 @@ exports[`border-r-* 1`] = `
border-right-color: #0088cc80;
}
.border-r-\\[--my-color\\] {
.border-r-\\[color\\:var\\(--my-color\\)\\] {
border-right-color: var(--my-color);
}
.border-r-\\[--my-color\\]\\/50 {
.border-r-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-r-\\[color\\:--my-color\\] {
.border-r-\\[var\\(--my-color\\)\\] {
border-right-color: var(--my-color);
}
.border-r-\\[color\\:--my-color\\]\\/50 {
.border-r-\\[var\\(--my-color\\)\\]\\/50 {
border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
@ -603,7 +603,7 @@ exports[`border-s-* 1`] = `
border-inline-start-width: 12px;
}
.border-s-\\[length\\:--my-width\\], .border-s-\\[line-width\\:--my-width\\] {
.border-s-\\[length\\:var\\(--my-width\\)\\], .border-s-\\[line-width\\:var\\(--my-width\\)\\] {
border-inline-start-style: var(--tw-border-style);
border-inline-start-width: var(--my-width);
}
@ -631,19 +631,19 @@ exports[`border-s-* 1`] = `
border-inline-start-color: #0088cc80;
}
.border-s-\\[--my-color\\] {
.border-s-\\[color\\:var\\(--my-color\\)\\] {
border-inline-start-color: var(--my-color);
}
.border-s-\\[--my-color\\]\\/50 {
.border-s-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-inline-start-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-s-\\[color\\:--my-color\\] {
.border-s-\\[var\\(--my-color\\)\\] {
border-inline-start-color: var(--my-color);
}
.border-s-\\[color\\:--my-color\\]\\/50 {
.border-s-\\[var\\(--my-color\\)\\]\\/50 {
border-inline-start-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
@ -716,7 +716,7 @@ exports[`border-t-* 1`] = `
border-top-width: 12px;
}
.border-t-\\[length\\:--my-width\\], .border-t-\\[line-width\\:--my-width\\] {
.border-t-\\[length\\:var\\(--my-width\\)\\], .border-t-\\[line-width\\:var\\(--my-width\\)\\] {
border-top-style: var(--tw-border-style);
border-top-width: var(--my-width);
}
@ -744,19 +744,19 @@ exports[`border-t-* 1`] = `
border-top-color: #0088cc80;
}
.border-t-\\[--my-color\\] {
.border-t-\\[color\\:var\\(--my-color\\)\\] {
border-top-color: var(--my-color);
}
.border-t-\\[--my-color\\]\\/50 {
.border-t-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-t-\\[color\\:--my-color\\] {
.border-t-\\[var\\(--my-color\\)\\] {
border-top-color: var(--my-color);
}
.border-t-\\[color\\:--my-color\\]\\/50 {
.border-t-\\[var\\(--my-color\\)\\]\\/50 {
border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
@ -841,7 +841,7 @@ exports[`border-x-* 1`] = `
border-right-width: 12px;
}
.border-x-\\[length\\:--my-width\\], .border-x-\\[line-width\\:--my-width\\] {
.border-x-\\[length\\:var\\(--my-width\\)\\], .border-x-\\[line-width\\:var\\(--my-width\\)\\] {
border-left-style: var(--tw-border-style);
border-right-style: var(--tw-border-style);
border-left-width: var(--my-width);
@ -879,22 +879,22 @@ exports[`border-x-* 1`] = `
border-right-color: #0088cc80;
}
.border-x-\\[--my-color\\] {
.border-x-\\[color\\:var\\(--my-color\\)\\] {
border-left-color: var(--my-color);
border-right-color: var(--my-color);
}
.border-x-\\[--my-color\\]\\/50 {
.border-x-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-x-\\[color\\:--my-color\\] {
.border-x-\\[var\\(--my-color\\)\\] {
border-left-color: var(--my-color);
border-right-color: var(--my-color);
}
.border-x-\\[color\\:--my-color\\]\\/50 {
.border-x-\\[var\\(--my-color\\)\\]\\/50 {
border-left-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-right-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
@ -986,7 +986,7 @@ exports[`border-y-* 1`] = `
border-bottom-width: 12px;
}
.border-y-\\[length\\:--my-width\\], .border-y-\\[line-width\\:--my-width\\] {
.border-y-\\[length\\:var\\(--my-width\\)\\], .border-y-\\[line-width\\:var\\(--my-width\\)\\] {
border-top-style: var(--tw-border-style);
border-bottom-style: var(--tw-border-style);
border-top-width: var(--my-width);
@ -1024,22 +1024,22 @@ exports[`border-y-* 1`] = `
border-bottom-color: #0088cc80;
}
.border-y-\\[--my-color\\] {
.border-y-\\[color\\:var\\(--my-color\\)\\] {
border-top-color: var(--my-color);
border-bottom-color: var(--my-color);
}
.border-y-\\[--my-color\\]\\/50 {
.border-y-\\[color\\:var\\(--my-color\\)\\]\\/50 {
border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}
.border-y-\\[color\\:--my-color\\] {
.border-y-\\[var\\(--my-color\\)\\] {
border-top-color: var(--my-color);
border-bottom-color: var(--my-color);
}
.border-y-\\[color\\:--my-color\\]\\/50 {
.border-y-\\[var\\(--my-color\\)\\]\\/50 {
border-top-color: color-mix(in srgb, var(--my-color) 50%, transparent);
border-bottom-color: color-mix(in srgb, var(--my-color) 50%, transparent);
}

482
packages/tailwindcss/src/candidate.test.ts
View File

@ -359,24 +359,23 @@ it('should parse a utility with an arbitrary modifier', () => {
utilities.functional('bg', () => [])
expect(run('bg-red-500/[50%]', { utilities })).toMatchInlineSnapshot(`
{
"important": false,
"kind": "functional",
"modifier": {
"dashedIdent": null,
"kind": "arbitrary",
"value": "50%",
},
"negative": false,
"root": "bg",
"value": {
"fraction": null,
"kind": "named",
"value": "red-500",
},
"variants": [],
}
`)
{
"important": false,
"kind": "functional",
"modifier": {
"kind": "arbitrary",
"value": "50%",
},
"negative": false,
"root": "bg",
"value": {
"fraction": null,
"kind": "named",
"value": "red-500",
},
"variants": [],
}
`)
})
it('should parse a utility with a modifier that is important', () => {
@ -441,21 +440,20 @@ it('should parse a utility with an arbitrary value', () => {
utilities.functional('bg', () => [])
expect(run('bg-[#0088cc]', { utilities })).toMatchInlineSnapshot(`
{
"important": false,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "bg",
"value": {
"dashedIdent": null,
"dataType": null,
"kind": "arbitrary",
"value": "#0088cc",
},
"variants": [],
}
`)
{
"important": false,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "bg",
"value": {
"dataType": null,
"kind": "arbitrary",
"value": "#0088cc",
},
"variants": [],
}
`)
})
it('should parse a utility with an arbitrary value including a typehint', () => {
@ -463,21 +461,20 @@ it('should parse a utility with an arbitrary value including a typehint', () =>
utilities.functional('bg', () => [])
expect(run('bg-[color:var(--value)]', { utilities })).toMatchInlineSnapshot(`
{
"important": false,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "bg",
"value": {
"dashedIdent": null,
"dataType": "color",
"kind": "arbitrary",
"value": "var(--value)",
},
"variants": [],
}
`)
{
"important": false,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "bg",
"value": {
"dataType": "color",
"kind": "arbitrary",
"value": "var(--value)",
},
"variants": [],
}
`)
})
it('should parse a utility with an arbitrary value with a modifier', () => {
@ -485,24 +482,23 @@ it('should parse a utility with an arbitrary value with a modifier', () => {
utilities.functional('bg', () => [])
expect(run('bg-[#0088cc]/50', { utilities })).toMatchInlineSnapshot(`
{
"important": false,
"kind": "functional",
"modifier": {
"kind": "named",
"value": "50",
},
"negative": false,
"root": "bg",
"value": {
"dashedIdent": null,
"dataType": null,
"kind": "arbitrary",
"value": "#0088cc",
},
"variants": [],
}
`)
{
"important": false,
"kind": "functional",
"modifier": {
"kind": "named",
"value": "50",
},
"negative": false,
"root": "bg",
"value": {
"dataType": null,
"kind": "arbitrary",
"value": "#0088cc",
},
"variants": [],
}
`)
})
it('should parse a utility with an arbitrary value with an arbitrary modifier', () => {
@ -510,25 +506,23 @@ it('should parse a utility with an arbitrary value with an arbitrary modifier',
utilities.functional('bg', () => [])
expect(run('bg-[#0088cc]/[50%]', { utilities })).toMatchInlineSnapshot(`
{
"important": false,
"kind": "functional",
"modifier": {
"dashedIdent": null,
"kind": "arbitrary",
"value": "50%",
},
"negative": false,
"root": "bg",
"value": {
"dashedIdent": null,
"dataType": null,
"kind": "arbitrary",
"value": "#0088cc",
},
"variants": [],
}
`)
{
"important": false,
"kind": "functional",
"modifier": {
"kind": "arbitrary",
"value": "50%",
},
"negative": false,
"root": "bg",
"value": {
"dataType": null,
"kind": "arbitrary",
"value": "#0088cc",
},
"variants": [],
}
`)
})
it('should parse a utility with an arbitrary value that is important', () => {
@ -536,65 +530,62 @@ it('should parse a utility with an arbitrary value that is important', () => {
utilities.functional('bg', () => [])
expect(run('bg-[#0088cc]!', { utilities })).toMatchInlineSnapshot(`
{
"important": true,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "bg",
"value": {
"dashedIdent": null,
"dataType": null,
"kind": "arbitrary",
"value": "#0088cc",
},
"variants": [],
}
`)
{
"important": true,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "bg",
"value": {
"dataType": null,
"kind": "arbitrary",
"value": "#0088cc",
},
"variants": [],
}
`)
})
it('should parse a utility with an implicit variable as the arbitrary value', () => {
let utilities = new Utilities()
utilities.functional('bg', () => [])
expect(run('bg-[--value]', { utilities })).toMatchInlineSnapshot(`
{
"important": false,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "bg",
"value": {
"dashedIdent": "--value",
"dataType": null,
"kind": "arbitrary",
"value": "var(--value)",
},
"variants": [],
}
`)
expect(run('bg-[var(--value)]', { utilities })).toMatchInlineSnapshot(`
{
"important": false,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "bg",
"value": {
"dataType": null,
"kind": "arbitrary",
"value": "var(--value)",
},
"variants": [],
}
`)
})
it('should parse a utility with an implicit variable as the arbitrary value that is important', () => {
let utilities = new Utilities()
utilities.functional('bg', () => [])
expect(run('bg-[--value]!', { utilities })).toMatchInlineSnapshot(`
{
"important": true,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "bg",
"value": {
"dashedIdent": "--value",
"dataType": null,
"kind": "arbitrary",
"value": "var(--value)",
},
"variants": [],
}
`)
expect(run('bg-[var(--value)]!', { utilities })).toMatchInlineSnapshot(`
{
"important": true,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "bg",
"value": {
"dataType": null,
"kind": "arbitrary",
"value": "var(--value)",
},
"variants": [],
}
`)
})
it('should parse a utility with an explicit variable as the arbitrary value', () => {
@ -602,21 +593,20 @@ it('should parse a utility with an explicit variable as the arbitrary value', ()
utilities.functional('bg', () => [])
expect(run('bg-[var(--value)]', { utilities })).toMatchInlineSnapshot(`
{
"important": false,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "bg",
"value": {
"dashedIdent": null,
"dataType": null,
"kind": "arbitrary",
"value": "var(--value)",
},
"variants": [],
}
`)
{
"important": false,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "bg",
"value": {
"dataType": null,
"kind": "arbitrary",
"value": "var(--value)",
},
"variants": [],
}
`)
})
it('should parse a utility with an explicit variable as the arbitrary value that is important', () => {
@ -624,71 +614,68 @@ it('should parse a utility with an explicit variable as the arbitrary value that
utilities.functional('bg', () => [])
expect(run('bg-[var(--value)]!', { utilities })).toMatchInlineSnapshot(`
{
"important": true,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "bg",
"value": {
"dashedIdent": null,
"dataType": null,
"kind": "arbitrary",
"value": "var(--value)",
},
"variants": [],
}
`)
{
"important": true,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "bg",
"value": {
"dataType": null,
"kind": "arbitrary",
"value": "var(--value)",
},
"variants": [],
}
`)
})
it('should parse a utility with an implicit variable as the modifier', () => {
let utilities = new Utilities()
utilities.functional('bg', () => [])
expect(run('bg-red-500/[--value]', { utilities })).toMatchInlineSnapshot(`
{
"important": false,
"kind": "functional",
"modifier": {
"dashedIdent": "--value",
"kind": "arbitrary",
"value": "var(--value)",
},
"negative": false,
"root": "bg",
"value": {
"fraction": null,
"kind": "named",
"value": "red-500",
},
"variants": [],
}
`)
expect(run('bg-red-500/[var(--value)]', { utilities })).toMatchInlineSnapshot(`
{
"important": false,
"kind": "functional",
"modifier": {
"kind": "arbitrary",
"value": "var(--value)",
},
"negative": false,
"root": "bg",
"value": {
"fraction": null,
"kind": "named",
"value": "red-500",
},
"variants": [],
}
`)
})
it('should parse a utility with an implicit variable as the modifier that is important', () => {
let utilities = new Utilities()
utilities.functional('bg', () => [])
expect(run('bg-red-500/[--value]!', { utilities })).toMatchInlineSnapshot(`
{
"important": true,
"kind": "functional",
"modifier": {
"dashedIdent": "--value",
"kind": "arbitrary",
"value": "var(--value)",
},
"negative": false,
"root": "bg",
"value": {
"fraction": null,
"kind": "named",
"value": "red-500",
},
"variants": [],
}
`)
expect(run('bg-red-500/[var(--value)]!', { utilities })).toMatchInlineSnapshot(`
{
"important": true,
"kind": "functional",
"modifier": {
"kind": "arbitrary",
"value": "var(--value)",
},
"negative": false,
"root": "bg",
"value": {
"fraction": null,
"kind": "named",
"value": "red-500",
},
"variants": [],
}
`)
})
it('should parse a utility with an explicit variable as the modifier', () => {
@ -696,24 +683,23 @@ it('should parse a utility with an explicit variable as the modifier', () => {
utilities.functional('bg', () => [])
expect(run('bg-red-500/[var(--value)]', { utilities })).toMatchInlineSnapshot(`
{
"important": false,
"kind": "functional",
"modifier": {
"dashedIdent": null,
"kind": "arbitrary",
"value": "var(--value)",
},
"negative": false,
"root": "bg",
"value": {
"fraction": null,
"kind": "named",
"value": "red-500",
},
"variants": [],
}
`)
{
"important": false,
"kind": "functional",
"modifier": {
"kind": "arbitrary",
"value": "var(--value)",
},
"negative": false,
"root": "bg",
"value": {
"fraction": null,
"kind": "named",
"value": "red-500",
},
"variants": [],
}
`)
})
it('should parse a utility with an explicit variable as the modifier that is important', () => {
@ -725,7 +711,6 @@ it('should parse a utility with an explicit variable as the modifier that is imp
"important": true,
"kind": "functional",
"modifier": {
"dashedIdent": null,
"kind": "arbitrary",
"value": "var(--value)",
},
@ -863,21 +848,20 @@ it('should replace `_` with ` `', () => {
utilities.functional('content', () => [])
expect(run('content-["hello_world"]', { utilities })).toMatchInlineSnapshot(`
{
"important": false,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "content",
"value": {
"dashedIdent": null,
"dataType": null,
"kind": "arbitrary",
"value": ""hello world"",
},
"variants": [],
}
`)
{
"important": false,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "content",
"value": {
"dataType": null,
"kind": "arbitrary",
"value": ""hello world"",
},
"variants": [],
}
`)
})
it('should not replace `\\_` with ` ` (when it is escaped)', () => {
@ -885,21 +869,20 @@ it('should not replace `\\_` with ` ` (when it is escaped)', () => {
utilities.functional('content', () => [])
expect(run('content-["hello\\_world"]', { utilities })).toMatchInlineSnapshot(`
{
"important": false,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "content",
"value": {
"dashedIdent": null,
"dataType": null,
"kind": "arbitrary",
"value": ""hello_world"",
},
"variants": [],
}
`)
{
"important": false,
"kind": "functional",
"modifier": null,
"negative": false,
"root": "content",
"value": {
"dataType": null,
"kind": "arbitrary",
"value": ""hello_world"",
},
"variants": [],
}
`)
})
it('should not replace `_` inside of `url()`', () => {
@ -914,7 +897,6 @@ it('should not replace `_` inside of `url()`', () => {
"negative": false,
"root": "bg",
"value": {
"dashedIdent": null,
"dataType": null,
"kind": "arbitrary",
"value": "url(https://example.com/some_page)",

52
packages/tailwindcss/src/candidate.ts
View File

@ -11,7 +11,7 @@ type ArbitraryUtilityValue = {
kind: 'arbitrary'
/**
* bg-[color:--my-color]
* bg-[color:var(--my-color)]
* ^^^^^
*/
dataType: string | null
@ -19,16 +19,8 @@ type ArbitraryUtilityValue = {
/**
* bg-[#0088cc]
* ^^^^^^^
* bg-[--my_variable]
* var(^^^^^^^^^^^^^)
*/
value: string
/**
* bg-[--my_variable]
* ^^^^^^^^^^^^^
*/
dashedIdent: string | null
}
export type NamedUtilityValue = {
@ -58,12 +50,6 @@ type ArbitraryModifier = {
* ^^^
*/
value: string
/**
* bg-red-500/[--my_variable]
* ^^^^^^^^^^^^^
*/
dashedIdent: string | null
}
type NamedModifier = {
@ -380,26 +366,10 @@ export function parseCandidate(input: string, designSystem: DesignSystem): Candi
break
}
// If an arbitrary value looks like a CSS variable, we automatically wrap
// it with `var(...)`.
//
// But since some CSS properties accept a `<dashed-ident>` as a value
// directly (e.g. `scroll-timeline-name`), we also store the original
// value in case the utility matcher is interested in it without
// `var(...)`.
let dashedIdent: string | null = null
if (arbitraryValue[0] === '-' && arbitraryValue[1] === '-') {
dashedIdent = arbitraryValue
arbitraryValue = `var(${arbitraryValue})`
} else {
arbitraryValue = decodeArbitraryValue(arbitraryValue)
}
candidate.value = {
kind: 'arbitrary',
dataType: typehint || null,
value: arbitraryValue,
dashedIdent,
value: decodeArbitraryValue(arbitraryValue),
}
} else {
// Some utilities support fractions as values, e.g. `w-1/2`. Since it's
@ -432,25 +402,9 @@ function parseModifier(modifier: string): CandidateModifier {
if (modifier[0] === '[' && modifier[modifier.length - 1] === ']') {
let arbitraryValue = modifier.slice(1, -1)
// If an arbitrary value looks like a CSS variable, we automatically wrap
// it with `var(...)`.
//
// But since some CSS properties accept a `<dashed-ident>` as a value
// directly (e.g. `scroll-timeline-name`), we also store the original
// value in case the utility matcher is interested in it without
// `var(...)`.
let dashedIdent: string | null = null
if (arbitraryValue[0] === '-' && arbitraryValue[1] === '-') {
dashedIdent = arbitraryValue
arbitraryValue = `var(${arbitraryValue})`
} else {
arbitraryValue = decodeArbitraryValue(arbitraryValue)
}
return {
kind: 'arbitrary',
value: arbitraryValue,
dashedIdent,
value: decodeArbitraryValue(arbitraryValue),
}
}

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

File diff suppressed because it is too large Load Diff