Fix fractional values not being parsed properly inside arbitrary properties (#9705)

* remove redundant closing bracket in regex pattern

* test fractional spacing values in theme function

* add test that ensures arbitrary properties are separate

* update changelog

Co-authored-by: Robin Malfait <[email protected]>

Author: akbng

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
 

src/lib/defaultExtractor.js

@@ -29,7 +29,7 @@ function* buildRegExps(context) {
 
   let utility = regex.any([
     // Arbitrary properties
-    /\[[^\s:'"`]+:[^\s\]]+\]/,
+    /\[[^\s:'"`]+:[^\s]+\]/,
 
     // Utilities
     regex.pattern([

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`<div class="[foo:bar] [bar:baz]"></div>`,
+      },
+    ],
+    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`<div
+          class="[border:_calc(5vw_-_theme(spacing[2.5]))_double_theme('colors.fuchsia.700')]"
+        ></div>`,
+      },
+    ],
+    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`<div
+          class="[height:_calc(100vh_-_theme(spacing[2.5]))] [box-shadow:_0_calc(theme(spacing[0.5])_*_-1)_theme(colors.red.400)_inset]"
+        ></div>`,
+      },
+    ],
+    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`<div class="[--a:theme(colors.blue.500)] [color:var(--a)]"></div>` }],