From a9c7e52a59d9532974891a53ff0dc1fe25c5ae94 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Sun, 12 Jun 2022 10:10:10 -0400
Subject: [PATCH] Fix extraction of multi-word utilities with arbitrary values
 and quotes (#8604)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix extraction of multi-word utilityies with arbitrary values and quotes

* Update  changelog

* Fix changelog entry

This wasn’t in 3.1.2 oops
---
 CHANGELOG.md                    | 4 ++--
 src/lib/defaultExtractor.js     | 4 ++--
 tests/default-extractor.test.js | 8 ++++++++
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 136efcafc..2c065711e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+- Fix extraction of multi-word utilities with arbitrary values and quotes ([#8604](https://github.com/tailwindlabs/tailwindcss/pull/8604))
+- Fix casing of import of `corePluginList` type definition ([#8587](https://github.com/tailwindlabs/tailwindcss/pull/8587))
 
 ## [3.1.2] - 2022-06-10
 
@@ -15,7 +16,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Ensure `\` is a valid arbitrary variant token ([#8576](https://github.com/tailwindlabs/tailwindcss/pull/8576))
 - Enable `postcss-import` in the CLI by default in watch mode ([#8574](https://github.com/tailwindlabs/tailwindcss/pull/8574), [#8580](https://github.com/tailwindlabs/tailwindcss/pull/8580))
-- Fix casing of import of `corePluginList` type definition ([#8587](https://github.com/tailwindlabs/tailwindcss/pull/8587))
 
 ## [3.1.1] - 2022-06-09
 
diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js
index fa2cc92b8..9106bd593 100644
--- a/src/lib/defaultExtractor.js
+++ b/src/lib/defaultExtractor.js
@@ -37,7 +37,7 @@ function* buildRegExps(context) {
         regex.any([
           regex.pattern([
             // Arbitrary values
-            /-\[[^\s:]+\]/,
+            /-(?:\w+-)*\[[^\s:]+\]/,
 
             // Not immediately followed by an `{[(`
             /(?![{([]])/,
@@ -48,7 +48,7 @@ function* buildRegExps(context) {
 
           regex.pattern([
             // Arbitrary values
-            /-\[[^\s]+\]/,
+            /-(?:\w+-)*\[[^\s]+\]/,
 
             // Not immediately followed by an `{[(`
             /(?![{([]])/,
diff --git a/tests/default-extractor.test.js b/tests/default-extractor.test.js
index 75abf4cae..d23dfd9cc 100644
--- a/tests/default-extractor.test.js
+++ b/tests/default-extractor.test.js
@@ -468,3 +468,11 @@ test('classes in slim templates', async () => {
   expect(extractions).toContain('italic')
   expect(extractions).toContain('text-gray-500')
 })
+
+test('multi-word + arbitrary values + quotes', async () => {
+  const extractions = defaultExtractor(`
+    grid-cols-['repeat(2)']
+  `)
+
+  expect(extractions).toContain(`grid-cols-['repeat(2)']`)
+})