Fix incorrectly generated CSS when using square brackets inside arbitrary properties (#11709)

* ensure nested square brackets are handled properly inside arbitrary properties

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow variant to be an at-rule without a prelude ([#11589](https://github.com/tailwindlabs/tailwindcss/pull/11589))
 - Improve normalisation of `calc()`-like functions ([#11686](https://github.com/tailwindlabs/tailwindcss/pull/11686))
 - Skip `calc()` normalisation in nested `theme()` calls ([#11705](https://github.com/tailwindlabs/tailwindcss/pull/11705))
+- Fix incorrectly generated CSS when using square brackets inside arbitrary properties ([#11709](https://github.com/tailwindlabs/tailwindcss/pull/11709))
 
 ### Added
 

src/util/formatVariantSelector.js

@@ -3,6 +3,7 @@ import unescape from 'postcss-selector-parser/dist/util/unesc'
 import escapeClassName from '../util/escapeClassName'
 import prefixSelector from '../util/prefixSelector'
 import { movePseudos } from './pseudoElements'
+import { splitAtTopLevelOnly } from './splitAtTopLevelOnly'
 
 /** @typedef {import('postcss-selector-parser').Root} Root */
 /** @typedef {import('postcss-selector-parser').Selector} Selector */
@@ -160,7 +161,7 @@ export function finalizeSelector(current, formats, { context, candidate, base })
   //           │  │     │            ╰── We will not split here
   //           ╰──┴─────┴─────────────── We will split here
   //
-  base = base ?? candidate.split(new RegExp(`\\${separator}(?![^[]*\\])`)).pop()
+  base = base ?? splitAtTopLevelOnly(candidate, separator).pop()
 
   // Parse the selector into an AST
   let selector = selectorParser().astSync(current)

tests/evaluateTailwindFunctions.test.js

@@ -1389,3 +1389,30 @@ describe('context dependent', () => {
     })
   })
 })
+
+test('it should handle square brackets inside `theme`, inside arbitrary properties', () => {
+  let config = {
+    content: [
+      {
+        raw: html` <div class="bg-[--color] sm:[--color:_theme(colors.green[400])]"></div> `,
+      },
+    ],
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return runFull(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .bg-\[--color\] {
+        background-color: var(--color);
+      }
+      @media (min-width: 640px) {
+        .sm\:\[--color\:_theme\(colors\.green\[400\]\)\] {
+          --color: #4ade80;
+        }
+      }
+    `)
+  })
+})