From 7534cbde679de01f7c4820a8f10a1da746d831de Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 3 Jan 2022 12:59:54 +0100
Subject: [PATCH 1/2] properly detect theme value in arbitrary properties

---
 src/lib/defaultExtractor.js        |  1 +
 tests/arbitrary-properties.test.js | 48 ++++++++++++++++++++++++++++++
 tests/default-extractor.test.js    |  9 ++++++
 3 files changed, 58 insertions(+)

diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js
index 88a2f43b470e..8fdd80af31ba 100644
--- a/src/lib/defaultExtractor.js
+++ b/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`
diff --git a/tests/arbitrary-properties.test.js b/tests/arbitrary-properties.test.js
index 7ff008ce4819..3b76cbe34c3f 100644
--- a/tests/arbitrary-properties.test.js
+++ b/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);
+      }
+    `)
+  })
+})
diff --git a/tests/default-extractor.test.js b/tests/default-extractor.test.js
index 151c4addfb9d..9dcd62b07a98 100644
--- a/tests/default-extractor.test.js
+++ b/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>

From 3dd1e1a22603e1632f39b14176eb51829cc1b8de Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 3 Jan 2022 13:02:57 +0100
Subject: [PATCH 2/2] update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d805ec19892e..95603dd65a98 100644
--- a/CHANGELOG.md
+++ b/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