Skip to content

Commit 0dd564a

Browse files
committed
simplify automatic var injection
Only inject `var(…)` for CSS variables, not CSS functions that look like variables. This simplifies it by just checking for a `(`.
1 parent 0bfae7a commit 0dd564a

File tree

1 file changed

+7
-24
lines changed

1 file changed

+7
-24
lines changed

packages/@tailwindcss-upgrade/src/template/codemods/automatic-var-injection.ts

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { walk, WalkAction } from '../../../../tailwindcss/src/ast'
22
import { type Candidate, type Variant } from '../../../../tailwindcss/src/candidate'
33
import type { Config } from '../../../../tailwindcss/src/compat/plugin-api'
44
import type { DesignSystem } from '../../../../tailwindcss/src/design-system'
5-
import * as ValueParser from '../../../../tailwindcss/src/value-parser'
65
import { printCandidate } from '../candidates'
76

87
export function automaticVarInjection(
@@ -74,32 +73,16 @@ export function automaticVarInjection(
7473
}
7574

7675
function injectVar(value: string): { value: string; didChange: boolean } {
77-
let ast = ValueParser.parse(value)
78-
7976
let didChange = false
80-
for (let [idx, node] of ast.entries()) {
81-
// Convert `--my-color` to `var(--my-color)`
82-
// Except if:
83-
// - It's a function like `--spacing(…)`
84-
// - It's preceeded by a space, e.g.: `bg-[_--my-color]` -> `bg-[--my-color]`
85-
if (
86-
node.kind === 'word' &&
87-
node.value.startsWith('--') &&
88-
!(ast[idx - 1]?.kind === 'separator' && ast[idx - 1]?.value === ' ')
89-
) {
90-
node.value = `var(${node.value})`
91-
didChange = true
92-
}
93-
94-
// Remove the space "hack" before a variable. E.g.: `bg-[_--my-color]` ->
95-
// `bg-[--my-color]`
96-
else if (node.kind === 'separator' && node.value === ' ') {
97-
ast.splice(idx, 1)
98-
didChange = true
99-
}
77+
if (value.startsWith('--') && !value.includes('(')) {
78+
value = `var(${value})`
79+
didChange = true
80+
} else if (value.startsWith(' --')) {
81+
value = value.slice(1)
82+
didChange = true
10083
}
10184

102-
return { value: ValueParser.toCss(ast), didChange }
85+
return { value, didChange }
10386
}
10487

10588
function injectVarIntoVariant(designSystem: DesignSystem, variant: Variant): boolean {

0 commit comments

Comments
 (0)