From 6b82ca89bcd7b640348e3fc2885760b9e4474915 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 25 Nov 2021 15:07:43 +0100
Subject: [PATCH] Fix modifiers for arbitrary values (#6199)

* fix modifiers for arbitrary properties

The main issue was that we are splitting on the separator and popping
the last section of to know the _base_ utility. However, in this case it
would be something like `markers]` which is incorrect.

Instead we only split by the separator and ignore the separtor if it
exists between square brackets.

* add tests for modifiers + arbitrary values that contain the separator
---
 src/util/formatVariantSelector.js | 12 +++++++++++-
 tests/arbitrary-values.test.js    | 18 ++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/util/formatVariantSelector.js b/src/util/formatVariantSelector.js
index 06d0f489b..01719b7ec 100644
--- a/src/util/formatVariantSelector.js
+++ b/src/util/formatVariantSelector.js
@@ -30,7 +30,17 @@ export function formatVariantSelector(current, ...others) {
 }
 
 export function finalizeSelector(format, { selector, candidate, context }) {
-  let base = candidate.split(context?.tailwindConfig?.separator ?? ':').pop()
+  let separator = context?.tailwindConfig?.separator ?? ':'
+
+  // Split by the separator, but ignore the separator inside square brackets:
+  //
+  // E.g.: dark:lg:hover:[paint-order:markers]
+  //           ┬  ┬     ┬            ┬
+  //           │  │     │            ╰── We will not split here
+  //           ╰──┴─────┴─────────────── We will split here
+  //
+  let splitter = new RegExp(`\\${separator}(?![^[]*\\])`)
+  let base = candidate.split(splitter).pop()
 
   if (context?.tailwindConfig?.prefix) {
     format = prefixSelector(context.tailwindConfig.prefix, format)
diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js
index 4cbb66828..7856a3b24 100644
--- a/tests/arbitrary-values.test.js
+++ b/tests/arbitrary-values.test.js
@@ -16,6 +16,24 @@ test('arbitrary values', () => {
   })
 })
 
+it('should support modifiers for arbitrary values that contain the separator', () => {
+  let config = {
+    content: [
+      {
+        raw: html` <div class="hover:bg-[url('https://github.com/tailwindlabs.png')]"></div> `,
+      },
+    ],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .hover\:bg-\[url\(\'https\:\/\/github\.com\/tailwindlabs\.png\'\)\]:hover {
+        background-image: url('https://github.com/tailwindlabs.png');
+      }
+    `)
+  })
+})
+
 it('should support arbitrary values for various background utilities', () => {
   let config = {
     content: [