Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve automatic var injection #12236

Merged
merged 4 commits into from
Oct 24, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/lib/generateRules.js
Original file line number Diff line number Diff line change
Expand Up @@ -491,7 +491,7 @@ function extractArbitraryProperty(classCandidate, context) {
return null
}

let normalized = normalize(value)
let normalized = normalize(value, { property })

if (!isParsableCssValue(property, normalized)) {
return null
Expand Down
30 changes: 27 additions & 3 deletions src/util/dataTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,34 @@ function isCSSFunction(value) {
return IS_CSS_FN.test(value)
}

// These properties accept a `<dashed-ident>` as one of the values. This means that you can use them
// as: `timeline-scope: --tl;`
//
// Without the `var(--tl)`, in these cases we don't want to normalize the value, and you should add
// the `var()` yourself.
//
// More info:
// - https://drafts.csswg.org/scroll-animations/#propdef-timeline-scope
// - https://developer.mozilla.org/en-US/docs/Web/CSS/timeline-scope#dashed-ident
//
const AUTO_VAR_INJECTION_EXCEPTIONS = new Set([
// Concrete properties
'scroll-timeline-name',
'timeline-scope',
'view-timeline-name',
'font-palette',

// Shorthand properties
'scroll-timeline',
'animation-timeline',
'view-timeline',
RobinMalfait marked this conversation as resolved.
Show resolved Hide resolved
])

// This is not a data type, but rather a function that can normalize the
// correct values.
export function normalize(value, isRoot = true) {
if (value.startsWith('--')) {
export function normalize(value, context = null, isRoot = true) {
let isVarException = context && AUTO_VAR_INJECTION_EXCEPTIONS.has(context.property)
if (value.startsWith('--') && !isVarException) {
return `var(${value})`
}

Expand All @@ -28,7 +52,7 @@ export function normalize(value, isRoot = true) {
return part
}

return normalize(part, false)
return normalize(part, context, false)
})
.join('')
}
Expand Down
29 changes: 29 additions & 0 deletions tests/normalize-data-types.test.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { css, run } from './util/run'
import { normalize } from '../src/util/dataTypes'

let table = [
Expand Down Expand Up @@ -75,3 +76,31 @@ let table = [
it.each(table)('normalize data: %s', (input, output) => {
expect(normalize(input)).toBe(output)
})

it('should not automatically inject the `var()` for properties that accept `<dashed-ident>` as the value', () => {
let config = {
content: [
// Automatic var injection
{ raw: '[color:--foo]' },

// Automatic var injection is skipped
{ raw: '[timeline-scope:--foo]' },
],
}

let input = css`
@tailwind utilities;
`

return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.\[color\:--foo\] {
color: var(--foo);
}

.\[timeline-scope\:--foo\] {
timeline-scope: --foo;
}
`)
})
})