diff --git a/CHANGELOG.md b/CHANGELOG.md index d5e06ff13fe7..9555311c6d17 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Honor default `to` position of gradient when using implicit transparent colors ([#11002](https://github.com/tailwindlabs/tailwindcss/pull/11002)) - Ensure `@tailwindcss/oxide` doesn't leak in the stable engine ([#10988](https://github.com/tailwindlabs/tailwindcss/pull/10988)) - Ensure multiple `theme(spacing[5])` calls with bracket notation in arbitrary properties work ([#11039](https://github.com/tailwindlabs/tailwindcss/pull/11039)) +- Normalize arbitrary modifiers ([#11057](https://github.com/tailwindlabs/tailwindcss/pull/11057)) ## [3.3.1] - 2023-03-30 diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js index 407019c905a6..bef9fc1658e7 100644 --- a/src/util/pluginUtils.js +++ b/src/util/pluginUtils.js @@ -115,11 +115,7 @@ export function parseColorFormat(value) { } function unwrapArbitraryModifier(modifier) { - modifier = modifier.slice(1, -1) - if (modifier.startsWith('--')) { - modifier = `var(${modifier})` - } - return modifier + return normalize(modifier.slice(1, -1)) } export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) { diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js index df7cca3398e8..774b4db406b9 100644 --- a/tests/arbitrary-values.test.js +++ b/tests/arbitrary-values.test.js @@ -637,4 +637,19 @@ crosscheck(({ stable, oxide }) => { `) }) }) + + it('should support underscores in arbitrary modifiers', () => { + let config = { + content: [{ raw: html`
` }], + } + + return run('@tailwind utilities', config).then((result) => { + return expect(result.css).toMatchFormattedCss(css` + .text-lg\/\[calc\(50px_\*_2\)\] { + font-size: 1.125rem; + line-height: calc(50px * 2); + } + `) + }) + }) })