From c5e6074d2378372a7c412254153f021f4a7c6e1b Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 14 Feb 2022 15:03:51 -0500
Subject: [PATCH] Support arbitrary values + calc + theme with quotes

---
 src/lib/defaultExtractor.js     |  2 ++
 tests/arbitrary-values.test.js  | 29 +++++++++++++++++++++++++++++
 tests/default-extractor.test.js |  4 ++++
 3 files changed, 35 insertions(+)

diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js
index 8fdd80af31ba..fe720f86780f 100644
--- a/src/lib/defaultExtractor.js
+++ b/src/lib/defaultExtractor.js
@@ -8,6 +8,8 @@ const PATTERNS = [
   /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source, // bg-[url("...")]
   /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source, // bg-[url('...'),url('...')]
   /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source, // bg-[url("..."),url("...")]
+  /([^<>"'`\s]*\[[^<>"'`\s]*\('[^"`\s]*'\)+\])/.source, // h-[calc(100%-theme('spacing.1'))]
+  /([^<>"'`\s]*\[[^<>"'`\s]*\("[^'`\s]*"\)+\])/.source, // h-[calc(100%-theme("spacing.1"))]
   /([^<>"'`\s]*\['[^"'`\s]*'\])/.source, // `content-['hello']` but not `content-['hello']']`
   /([^<>"'`\s]*\["[^"'`\s]*"\])/.source, // `content-["hello"]` but not `content-["hello"]"]`
   /([^<>"'`\s]*\[[^<>"'`\s]*:[^\]\s]*\])/.source, // `[attr:value]`
diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js
index da779bdf0be3..c8fbf352c58e 100644
--- a/tests/arbitrary-values.test.js
+++ b/tests/arbitrary-values.test.js
@@ -341,3 +341,32 @@ it('should be possible to read theme values in arbitrary values (with quotes)',
     `)
   })
 })
+
+it('should be possible to read theme values in arbitrary values (with quotes) when inside calc or similar functions', () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div
+          class="w-[calc(100%-theme('spacing.1'))] w-[calc(100%-theme('spacing[0.5]'))]"
+        ></div>`,
+      },
+    ],
+    theme: {
+      spacing: {
+        0.5: 'calc(.5 * .25rem)',
+        1: 'calc(1 * .25rem)',
+      },
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .w-\[calc\(100\%-theme\(\'spacing\.1\'\)\)\] {
+        width: calc(100% - calc(1 * 0.25rem));
+      }
+      .w-\[calc\(100\%-theme\(\'spacing\[0\.5\]\'\)\)\] {
+        width: calc(100% - calc(0.5 * 0.25rem));
+      }
+    `)
+  })
+})
diff --git a/tests/default-extractor.test.js b/tests/default-extractor.test.js
index 9dcd62b07a98..35d06b0551d3 100644
--- a/tests/default-extractor.test.js
+++ b/tests/default-extractor.test.js
@@ -26,6 +26,8 @@ const input =
   <div class="hover:font-bold"></div>
   <div class="content-['>']"></div>
   <div class="[--y:theme(colors.blue.500)]">
+  <div class="w-[calc(100%-theme('spacing.1'))]">
+  <div class='w-[calc(100%-theme("spacing.2"))]'>
 
   <script>
     let classes01 = ["text-[10px]"]
@@ -90,6 +92,8 @@ const includes = [
   `hover:test`,
   `overflow-scroll`,
   `[--y:theme(colors.blue.500)]`,
+  `w-[calc(100%-theme('spacing.1'))]`,
+  `w-[calc(100%-theme("spacing.2"))]`,
 ]
 
 const excludes = [