Fix extraction of multi-word utilities with arbitrary values and quotes (#8604)

* 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

@@ -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
 

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 `{[(`
             /(?![{([]])/,

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