Validate theme() works in arbitray values (#6852)

* add tests to ensure theme value inside arbitrary values work

* update changelog

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Improve `DEBUG` flag ([#6797](https://github.com/tailwindlabs/tailwindcss/pull/6797), [#6804](https://github.com/tailwindlabs/tailwindcss/pull/6804))
 - Ensure we can use `<` and `>` characters in modifiers ([#6851](https://github.com/tailwindlabs/tailwindcss/pull/6851))
+- Validate `theme()` works in arbitrary values ([#6852](https://github.com/tailwindlabs/tailwindcss/pull/6852))
 
 ## [3.0.8] - 2021-12-28
 

tests/arbitrary-values.test.js

@@ -293,3 +293,49 @@ it('should support unescaped underscores in URLs', () => {
     `)
   })
 })
+
+it('should be possible to read theme values in arbitrary values (without quotes)', () => {
+  let config = {
+    content: [{ raw: html`<div class="w-[theme(spacing.1)] w-[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-\[theme\(spacing\.1\)\] {
+        width: calc(1 * 0.25rem);
+      }
+      .w-\[theme\(spacing\[0\.5\]\)\] {
+        width: calc(0.5 * 0.25rem);
+      }
+    `)
+  })
+})
+
+it('should be possible to read theme values in arbitrary values (with quotes)', () => {
+  let config = {
+    content: [{ raw: html`<div class="w-[theme('spacing.1')] w-[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-\[theme\(\'spacing\.1\'\)\] {
+        width: calc(1 * 0.25rem);
+      }
+      .w-\[theme\(\'spacing\[0\.5\]\'\)\] {
+        width: calc(0.5 * 0.25rem);
+      }
+    `)
+  })
+})