mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Remove automatic var(…) injection (#13657)
This PR is a continuation of #13537. Currently we reverted the merged changes so that we can get a new alpha version out without this change. --- This PR removes automatic `var(…)` injection for arbitrary properties, values and modifiers. 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. E.g.: ```css .foo { /* Notice that these don't have `var(…)` */ view-timeline-name: --timeline-name; anchor-name: --sidebar; } ``` 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. E.g.: ```css .foo { --target: --sidebar; anchor-name: var(--target); } ``` 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 internals for the `candidate` data structure because we don't need to track `dashedIdent` separately anymore. <!-- 👋 Hey, thanks for your interest in contributing to Tailwind! **Please ask first before starting work on any significant new features.** It's never a fun experience to have your pull request declined after investing a lot of time and effort into a new feature. To avoid this from happening, we request that contributors create an issue to first discuss any significant new features. This includes things like adding new utilities, creating new at-rules, or adding new component examples to the documentation. https://github.com/tailwindcss/tailwindcss/blob/master/.github/CONTRIBUTING.md -->
This commit is contained in:
Robin Malfait
GitHub
parent
b0b11985e3
commit
a270e2c8f1
@ -35,6 +35,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
- Preserve explicit shadow color when overriding shadow size ([#14458](https://github.com/tailwindlabs/tailwindcss/pull/14458))
|
||||
- Preserve explicit transition duration and timing function when overriding transition property ([#14490](https://github.com/tailwindlabs/tailwindcss/pull/14490))
|
||||
- Change the implementation for `@import` resolution to speed up initial builds ([#14446](https://github.com/tailwindlabs/tailwindcss/pull/14446))
|
||||
- Remove automatic `var(…)` injection ([#13657](https://github.com/tailwindlabs/tailwindcss/pull/13657))
|
||||
|
||||
## [4.0.0-alpha.24] - 2024-09-11
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -159,7 +159,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);
|
||||
}
|
||||
@ -187,19 +187,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);
|
||||
}
|
||||
|
||||
@ -280,7 +280,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);
|
||||
}
|
||||
@ -308,19 +308,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);
|
||||
}
|
||||
|
||||
@ -401,7 +401,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);
|
||||
}
|
||||
@ -429,19 +429,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);
|
||||
}
|
||||
|
||||
@ -522,7 +522,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);
|
||||
}
|
||||
@ -550,19 +550,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);
|
||||
}
|
||||
|
||||
@ -643,7 +643,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);
|
||||
}
|
||||
@ -671,19 +671,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);
|
||||
}
|
||||
|
||||
@ -764,7 +764,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);
|
||||
}
|
||||
@ -792,19 +792,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);
|
||||
}
|
||||
|
||||
@ -897,7 +897,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);
|
||||
@ -935,22 +935,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);
|
||||
}
|
||||
@ -1050,7 +1050,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);
|
||||
@ -1088,22 +1088,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);
|
||||
}
|
||||
|
||||
@ -403,7 +403,6 @@ it('should parse a utility with an arbitrary modifier', () => {
|
||||
"important": false,
|
||||
"kind": "functional",
|
||||
"modifier": {
|
||||
"dashedIdent": null,
|
||||
"kind": "arbitrary",
|
||||
"value": "50%",
|
||||
},
|
||||
@ -528,7 +527,6 @@ it('should parse a utility with an arbitrary value', () => {
|
||||
"raw": "bg-[#0088cc]",
|
||||
"root": "bg",
|
||||
"value": {
|
||||
"dashedIdent": null,
|
||||
"dataType": null,
|
||||
"kind": "arbitrary",
|
||||
"value": "#0088cc",
|
||||
@ -553,7 +551,6 @@ it('should parse a utility with an arbitrary value including a typehint', () =>
|
||||
"raw": "bg-[color:var(--value)]",
|
||||
"root": "bg",
|
||||
"value": {
|
||||
"dashedIdent": null,
|
||||
"dataType": "color",
|
||||
"kind": "arbitrary",
|
||||
"value": "var(--value)",
|
||||
@ -581,7 +578,6 @@ it('should parse a utility with an arbitrary value with a modifier', () => {
|
||||
"raw": "bg-[#0088cc]/50",
|
||||
"root": "bg",
|
||||
"value": {
|
||||
"dashedIdent": null,
|
||||
"dataType": null,
|
||||
"kind": "arbitrary",
|
||||
"value": "#0088cc",
|
||||
@ -602,7 +598,6 @@ it('should parse a utility with an arbitrary value with an arbitrary modifier',
|
||||
"important": false,
|
||||
"kind": "functional",
|
||||
"modifier": {
|
||||
"dashedIdent": null,
|
||||
"kind": "arbitrary",
|
||||
"value": "50%",
|
||||
},
|
||||
@ -610,7 +605,6 @@ it('should parse a utility with an arbitrary value with an arbitrary modifier',
|
||||
"raw": "bg-[#0088cc]/[50%]",
|
||||
"root": "bg",
|
||||
"value": {
|
||||
"dashedIdent": null,
|
||||
"dataType": null,
|
||||
"kind": "arbitrary",
|
||||
"value": "#0088cc",
|
||||
@ -635,7 +629,6 @@ it('should parse a utility with an arbitrary value that is important', () => {
|
||||
"raw": "bg-[#0088cc]!",
|
||||
"root": "bg",
|
||||
"value": {
|
||||
"dashedIdent": null,
|
||||
"dataType": null,
|
||||
"kind": "arbitrary",
|
||||
"value": "#0088cc",
|
||||
@ -650,17 +643,16 @@ 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(`
|
||||
expect(run('bg-[var(--value)]', { utilities })).toMatchInlineSnapshot(`
|
||||
[
|
||||
{
|
||||
"important": false,
|
||||
"kind": "functional",
|
||||
"modifier": null,
|
||||
"negative": false,
|
||||
"raw": "bg-[--value]",
|
||||
"raw": "bg-[var(--value)]",
|
||||
"root": "bg",
|
||||
"value": {
|
||||
"dashedIdent": "--value",
|
||||
"dataType": null,
|
||||
"kind": "arbitrary",
|
||||
"value": "var(--value)",
|
||||
@ -675,17 +667,16 @@ it('should parse a utility with an implicit variable as the arbitrary value that
|
||||
let utilities = new Utilities()
|
||||
utilities.functional('bg', () => [])
|
||||
|
||||
expect(run('bg-[--value]!', { utilities })).toMatchInlineSnapshot(`
|
||||
expect(run('bg-[var(--value)]!', { utilities })).toMatchInlineSnapshot(`
|
||||
[
|
||||
{
|
||||
"important": true,
|
||||
"kind": "functional",
|
||||
"modifier": null,
|
||||
"negative": false,
|
||||
"raw": "bg-[--value]!",
|
||||
"raw": "bg-[var(--value)]!",
|
||||
"root": "bg",
|
||||
"value": {
|
||||
"dashedIdent": "--value",
|
||||
"dataType": null,
|
||||
"kind": "arbitrary",
|
||||
"value": "var(--value)",
|
||||
@ -710,7 +701,6 @@ it('should parse a utility with an explicit variable as the arbitrary value', ()
|
||||
"raw": "bg-[var(--value)]",
|
||||
"root": "bg",
|
||||
"value": {
|
||||
"dashedIdent": null,
|
||||
"dataType": null,
|
||||
"kind": "arbitrary",
|
||||
"value": "var(--value)",
|
||||
@ -735,7 +725,6 @@ it('should parse a utility with an explicit variable as the arbitrary value that
|
||||
"raw": "bg-[var(--value)]!",
|
||||
"root": "bg",
|
||||
"value": {
|
||||
"dashedIdent": null,
|
||||
"dataType": null,
|
||||
"kind": "arbitrary",
|
||||
"value": "var(--value)",
|
||||
@ -766,12 +755,6 @@ it('should not parse invalid arbitrary values', () => {
|
||||
'bg-red-[#0088cc]!',
|
||||
'bg-red[#0088cc]!',
|
||||
|
||||
'bg-red-[--value]',
|
||||
'bg-red[--value]',
|
||||
|
||||
'bg-red-[--value]!',
|
||||
'bg-red[--value]!',
|
||||
|
||||
'bg-red-[var(--value)]',
|
||||
'bg-red[var(--value)]',
|
||||
|
||||
@ -786,18 +769,17 @@ 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(`
|
||||
expect(run('bg-red-500/[var(--value)]', { utilities })).toMatchInlineSnapshot(`
|
||||
[
|
||||
{
|
||||
"important": false,
|
||||
"kind": "functional",
|
||||
"modifier": {
|
||||
"dashedIdent": "--value",
|
||||
"kind": "arbitrary",
|
||||
"value": "var(--value)",
|
||||
},
|
||||
"negative": false,
|
||||
"raw": "bg-red-500/[--value]",
|
||||
"raw": "bg-red-500/[var(--value)]",
|
||||
"root": "bg",
|
||||
"value": {
|
||||
"fraction": null,
|
||||
@ -814,18 +796,17 @@ it('should parse a utility with an implicit variable as the modifier that is imp
|
||||
let utilities = new Utilities()
|
||||
utilities.functional('bg', () => [])
|
||||
|
||||
expect(run('bg-red-500/[--value]!', { utilities })).toMatchInlineSnapshot(`
|
||||
expect(run('bg-red-500/[var(--value)]!', { utilities })).toMatchInlineSnapshot(`
|
||||
[
|
||||
{
|
||||
"important": true,
|
||||
"kind": "functional",
|
||||
"modifier": {
|
||||
"dashedIdent": "--value",
|
||||
"kind": "arbitrary",
|
||||
"value": "var(--value)",
|
||||
},
|
||||
"negative": false,
|
||||
"raw": "bg-red-500/[--value]!",
|
||||
"raw": "bg-red-500/[var(--value)]!",
|
||||
"root": "bg",
|
||||
"value": {
|
||||
"fraction": null,
|
||||
@ -848,7 +829,6 @@ it('should parse a utility with an explicit variable as the modifier', () => {
|
||||
"important": false,
|
||||
"kind": "functional",
|
||||
"modifier": {
|
||||
"dashedIdent": null,
|
||||
"kind": "arbitrary",
|
||||
"value": "var(--value)",
|
||||
},
|
||||
@ -876,7 +856,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)",
|
||||
},
|
||||
@ -1037,7 +1016,6 @@ it('should replace `_` with ` `', () => {
|
||||
"raw": "content-["hello_world"]",
|
||||
"root": "content",
|
||||
"value": {
|
||||
"dashedIdent": null,
|
||||
"dataType": null,
|
||||
"kind": "arbitrary",
|
||||
"value": ""hello world"",
|
||||
@ -1062,7 +1040,6 @@ it('should not replace `\\_` with ` ` (when it is escaped)', () => {
|
||||
"raw": "content-["hello\\_world"]",
|
||||
"root": "content",
|
||||
"value": {
|
||||
"dashedIdent": null,
|
||||
"dataType": null,
|
||||
"kind": "arbitrary",
|
||||
"value": ""hello_world"",
|
||||
@ -1087,7 +1064,6 @@ it('should not replace `_` inside of `url()`', () => {
|
||||
"raw": "bg-[url(https://example.com/some_page)]",
|
||||
"root": "bg",
|
||||
"value": {
|
||||
"dashedIdent": null,
|
||||
"dataType": null,
|
||||
"kind": "arbitrary",
|
||||
"value": "url(https://example.com/some_page)",
|
||||
|
||||
@ -11,41 +11,44 @@ type ArbitraryUtilityValue = {
|
||||
kind: 'arbitrary'
|
||||
|
||||
/**
|
||||
* bg-[color:--my-color]
|
||||
* ```
|
||||
* bg-[color:var(--my-color)]
|
||||
* ^^^^^
|
||||
* ```
|
||||
*/
|
||||
dataType: string | null
|
||||
|
||||
/**
|
||||
* ```
|
||||
* bg-[#0088cc]
|
||||
* ^^^^^^^
|
||||
* bg-[--my_variable]
|
||||
* var(^^^^^^^^^^^^^)
|
||||
*
|
||||
* bg-[var(--my_variable)]
|
||||
* ^^^^^^^^^^^^^^^^^^
|
||||
* ```
|
||||
*/
|
||||
value: string
|
||||
|
||||
/**
|
||||
* bg-[--my_variable]
|
||||
* ^^^^^^^^^^^^^
|
||||
*/
|
||||
dashedIdent: string | null
|
||||
}
|
||||
|
||||
export type NamedUtilityValue = {
|
||||
kind: 'named'
|
||||
|
||||
/**
|
||||
* ```
|
||||
* bg-red-500
|
||||
* ^^^^^^^
|
||||
*
|
||||
* w-1/2
|
||||
* ^
|
||||
* ```
|
||||
*/
|
||||
value: string
|
||||
|
||||
/**
|
||||
* ```
|
||||
* w-1/2
|
||||
* ^^^
|
||||
* ```
|
||||
*/
|
||||
fraction: string | null
|
||||
}
|
||||
@ -54,24 +57,22 @@ type ArbitraryModifier = {
|
||||
kind: 'arbitrary'
|
||||
|
||||
/**
|
||||
* ```
|
||||
* bg-red-500/[50%]
|
||||
* ^^^
|
||||
* ```
|
||||
*/
|
||||
value: string
|
||||
|
||||
/**
|
||||
* bg-red-500/[--my_variable]
|
||||
* ^^^^^^^^^^^^^
|
||||
*/
|
||||
dashedIdent: string | null
|
||||
}
|
||||
|
||||
type NamedModifier = {
|
||||
kind: 'named'
|
||||
|
||||
/**
|
||||
* ```
|
||||
* bg-red-500/50
|
||||
* ^^
|
||||
* ```
|
||||
*/
|
||||
value: string
|
||||
}
|
||||
@ -423,26 +424,10 @@ export function* parseCandidate(input: string, designSystem: DesignSystem): Iter
|
||||
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
|
||||
@ -469,25 +454,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),
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1576,6 +1576,7 @@ test('supports', async () => {
|
||||
'supports-[font-format(opentype)]:grid',
|
||||
'supports-[(display:grid)_and_font-format(opentype)]:grid',
|
||||
'supports-[font-tech(color-COLRv1)]:flex',
|
||||
'supports-[var(--test)]:flex',
|
||||
'supports-[--test]:flex',
|
||||
]),
|
||||
).toMatchInlineSnapshot(`
|
||||
@ -1615,6 +1616,12 @@ test('supports', async () => {
|
||||
}
|
||||
}
|
||||
|
||||
@supports var(--test) {
|
||||
.supports-\\[var\\(--test\\)\\]\\:flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (--test: var(--tw)) {
|
||||
.supports-\\[--test\\]\\:flex {
|
||||
display: flex;
|
||||
@ -1629,7 +1636,7 @@ test('supports', async () => {
|
||||
'supports-[font-format(opentype)]/foo:grid',
|
||||
'supports-[(display:grid)_and_font-format(opentype)]/foo:grid',
|
||||
'supports-[font-tech(color-COLRv1)]/foo:flex',
|
||||
'supports-[--test]/foo:flex',
|
||||
'supports-[var(--test)]/foo:flex',
|
||||
]),
|
||||
).toEqual('')
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user