Properly detect theme() value usage in arbitrary properties (#6854)

* properly detect theme value in arbitrary properties

* update changelog

CHANGELOG.md

@@ -12,6 +12,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))
+- Properly detect `theme()` value usage in arbitrary properties ([#6854](https://github.com/tailwindlabs/tailwindcss/pull/6854))
 
 ## [3.0.8] - 2021-12-28
 

src/lib/defaultExtractor.js

@@ -10,6 +10,7 @@ const PATTERNS = [
   /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source, // bg-[url("..."),url("...")]
   /([^<>"'`\s]*\['[^"'`\s]*'\])/.source, // `content-['hello']` but not `content-['hello']']`
   /([^<>"'`\s]*\["[^"'`\s]*"\])/.source, // `content-["hello"]` but not `content-["hello"]"]`
+  /([^<>"'`\s]*\[[^<>"'`\s]*:[^\]\s]*\])/.source, // `[attr:value]`
   /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source, // `[content:'hello']` but not `[content:"hello"]`
   /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source, // `[content:"hello"]` but not `[content:'hello']`
   /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source, // `fill-[#bada55]`, `fill-[#bada55]/50`

tests/arbitrary-properties.test.js

@@ -273,3 +273,51 @@ test('invalid arbitrary property 2', () => {
     expect(result.css).toMatchFormattedCss(css``)
   })
 })
+
+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>` }],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .\[--a\:theme\(colors\.blue\.500\)\] {
+        --a: #3b82f6;
+      }
+      .\[color\:var\(--a\)\] {
+        color: var(--a);
+      }
+    `)
+  })
+})
+
+it('should be possible to read theme values in arbitrary properties (with quotes)', () => {
+  let config = {
+    content: [{ raw: html`<div class="[--a:theme('colors.blue.500')] [color:var(--a)]"></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`
+      .\[--a\:theme\(\'colors\.blue\.500\'\)\] {
+        --a: #3b82f6;
+      }
+      .\[color\:var\(--a\)\] {
+        color: var(--a);
+      }
+    `)
+  })
+})

tests/default-extractor.test.js

@@ -324,6 +324,15 @@ test('arbitrary values with angle brackets in double quotes', async () => {
   expect(extractions).toContain(`hover:focus:content-[">"]`)
 })
 
+test('arbitrary values with theme lookup using quotes', () => {
+  const extractions = defaultExtractor(`
+    <p class="[--y:theme('colors.blue.500')] [color:var(--y)]"></p>
+  `)
+
+  expect(extractions).toContain(`[--y:theme('colors.blue.500')]`)
+  expect(extractions).toContain(`[color:var(--y)]`)
+})
+
 test('special characters', async () => {
   const extractions = defaultExtractor(`
     <div class="<sm:underline md>:font-bold"></div>