From 0b311f5fad7f0da1b3ffa4157b55df9c9fe7e44d Mon Sep 17 00:00:00 2001
From: Ankan Bag <91788199+akbng@users.noreply.github.com>
Date: Tue, 1 Nov 2022 20:49:45 +0530
Subject: [PATCH 1/4] remove redundant closing bracket in regex pattern

---
 src/lib/defaultExtractor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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([

From f302f3add001aa42e18893b8162d73c8490fb36f Mon Sep 17 00:00:00 2001
From: Ankan Bag <91788199+akbng@users.noreply.github.com>
Date: Tue, 1 Nov 2022 20:51:36 +0530
Subject: [PATCH 2/4] test fractional spacing values in theme function

---
 tests/arbitrary-properties.test.js | 61 ++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/tests/arbitrary-properties.test.js b/tests/arbitrary-properties.test.js
index a7d1b5bbf72d..17ba9079db53 100644
--- a/tests/arbitrary-properties.test.js
+++ b/tests/arbitrary-properties.test.js
@@ -296,6 +296,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>` }],

From bdcdf01e175e9a4968f3095e6abb361795cd57cc Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 3 Nov 2022 11:04:31 +0100
Subject: [PATCH 3/4] add test that ensures arbitrary properties are separate

---
 tests/arbitrary-properties.test.js | 31 ++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/tests/arbitrary-properties.test.js b/tests/arbitrary-properties.test.js
index 17ba9079db53..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`<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: [

From e67eb017c8e5e3dc98863051009e7ebbfee07759 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 3 Nov 2022 11:05:33 +0100
Subject: [PATCH 4/4] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c30c0166b271..2d8ebec31a2d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Escape special characters in resolved content base paths ([#9650](https://github.com/tailwindlabs/tailwindcss/pull/9650))
 - Don't reuse container for array returning variant functions ([#9644](https://github.com/tailwindlabs/tailwindcss/pull/9644))
+- Fix fractional values not being parsed properly inside arbitrary properties ([#9705](https://github.com/tailwindlabs/tailwindcss/pull/9705))
 
 ## [3.2.1] - 2022-10-21