Support arbitrary values + calc + theme with quotes (#7462)

* Support arbitrary values + calc + theme with quotes

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Remove opacity variables from `:visited` pseudo class ([#7458](https://github.com/tailwindlabs/tailwindcss/pull/7458))
+- Support arbitrary values + calc + theme with quotes ([#7462](https://github.com/tailwindlabs/tailwindcss/pull/7462))
 
 ## [3.0.22] - 2022-02-11
 

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]`

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));
+      }
+    `)
+  })
+})

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