Fix modifiers for arbitrary values (tailwindlabs#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

Author: RobinMalfait

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)

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: [