diff --git a/CHANGELOG.md b/CHANGELOG.md index a374355771e1..eb0672a2bafe 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 - Exclude non-relevant selectors when generating rules with the important modifier ([#9677](https://github.com/tailwindlabs/tailwindcss/issues/9677)) - Fix merging of arrays during config resolution ([#9706](https://github.com/tailwindlabs/tailwindcss/issues/9706)) - Ensure configured `font-feature-settings` are included in Preflight ([#9707](https://github.com/tailwindlabs/tailwindcss/pull/9707)) +- Fix fractional values not being parsed properly inside arbitrary properties ([#9705](https://github.com/tailwindlabs/tailwindcss/pull/9705)) ## [3.2.1] - 2022-10-21 diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js index 965e644d2131..15d27aca4348 100644 --- a/src/lib/defaultExtractor.js +++ b/src/lib/defaultExtractor.js @@ -29,7 +29,7 @@ function* buildRegExps(context) { let utility = regex.any([ // Arbitrary properties - /\[[^\s:'"`]+:[^\s\]]+\]/, + /\[[^\s:'"`]+:[^\s]+\]/, // Utilities regex.pattern([ diff --git a/tests/arbitrary-properties.test.js b/tests/arbitrary-properties.test.js index a7d1b5bbf72d..826cc309ace5 100644 --- a/tests/arbitrary-properties.test.js +++ b/tests/arbitrary-properties.test.js @@ -27,6 +27,37 @@ test('basic arbitrary properties', () => { }) }) +test('different arbitrary properties are picked up separately', () => { + let config = { + content: [ + { + raw: html`
`, + }, + ], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind base; + @tailwind components; + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + ${defaults} + + .\[foo\:bar\] { + foo: bar; + } + + .\[bar\:baz\] { + bar: baz; + } + `) + }) +}) + test('arbitrary properties with modifiers', () => { let config = { content: [ @@ -296,6 +327,67 @@ test('invalid arbitrary property 2', () => { }) }) +test('using fractional spacing values inside theme() function', () => { + let config = { + content: [ + { + raw: html`
`, + }, + ], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind base; + @tailwind components; + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + ${defaults} + + .\[border\:_calc\(5vw_-_theme\(spacing\[2\.5\]\)\)_double_theme\(\'colors\.fuchsia\.700\'\)\] { + border: calc(5vw - 0.625rem) double #a21caf; + } + `) + }) +}) + +test('using multiple arbitrary props having fractional spacing values', () => { + let config = { + content: [ + { + raw: html`
`, + }, + ], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind base; + @tailwind components; + @tailwind utilities; + ` + + return run(input, config).then((result) => { + return expect(result.css).toMatchFormattedCss(css` + ${defaults} + + .\[height\:_calc\(100vh_-_theme\(spacing\[2\.5\]\)\)\] { + height: calc(100vh - 0.625rem); + } + .\[box-shadow\:_0_calc\(theme\(spacing\[0\.5\]\)_\*_-1\)_theme\(colors\.red\.400\)_inset\] { + box-shadow: 0 calc(0.125rem * -1) #f87171 inset; + } + `) + }) +}) + it('should be possible to read theme values in arbitrary properties (without quotes)', () => { let config = { content: [{ raw: html`
` }],