Avoid splitting class within arbitrary values

src/core/lib/convertClassName.ts

@@ -1,12 +1,11 @@
 import replaceThemeValue from './util/replaceThemeValue'
 import isShortCss from './util/isShortCss'
 import splitOnFirst from './util/splitOnFirst'
+import { splitAtTopLevelOnly } from './util/twImports'
 import type { CoreContext } from 'core/types'
 // eslint-disable-next-line import/no-relative-parent-imports
 import { SPACE_ID, SPACE_ID_TEMP_ALL } from '../constants'
 
-const SPLIT_COLON_AVOID_WITHIN_SQUARE_BRACKETS =
-  /:(?=(?:(?:(?!]).)*\[)|[^[\]]*$)/g
 const ARBITRARY_VARIANTS = /(?<=\[)(.+?)(?=]:)/g
 const ALL_COMMAS = /,/g
 
@@ -22,7 +21,7 @@ function convertShortCssToArbitraryProperty(
     isShortCssOnly,
   }: ConvertShortCssToArbitraryPropertyParameters
 ): string {
-  const splitArray = className.split(SPLIT_COLON_AVOID_WITHIN_SQUARE_BRACKETS)
+  const splitArray = [...splitAtTopLevelOnly(className, ':')]
 
   const lastValue = splitArray.slice(-1)[0]
 
@@ -84,9 +83,7 @@ function convertClassName(
   if (className.endsWith('!')) {
     debug('trailing bang found', className)
 
-    const splitArray = className
-      .slice(0, -1)
-      .split(SPLIT_COLON_AVOID_WITHIN_SQUARE_BRACKETS)
+    const splitArray = [...splitAtTopLevelOnly(className.slice(0, -1), ':')]
     // Place a ! before the class
     splitArray.splice(-1, 1, `!${splitArray[splitArray.length - 1]}`)
     className = splitArray.join(':')

src/core/lib/util/twImports.ts

@@ -16,6 +16,8 @@ import { default as resolveTailwindConfigRaw } from 'tailwindcss/lib/util/resolv
 // @ts-expect-error Types added below
 import { default as getAllConfigsRaw } from 'tailwindcss/lib/util/getAllConfigs'
 // @ts-expect-error Types added below
+import { splitAtTopLevelOnly as splitAtTopLevelOnlyRaw } from 'tailwindcss/lib/util/splitAtTopLevelOnly'
+// @ts-expect-error Types added below
 import unescapeRaw from 'postcss-selector-parser/dist/util/unesc'
 
 const toPath = toPathRaw as (path: string[] | string) => string[]
@@ -37,6 +39,10 @@ const resolveTailwindConfig = resolveTailwindConfigRaw as (
 const getAllConfigs = getAllConfigsRaw as (
   config: Record<string, unknown[]>
 ) => TailwindConfig[]
+const splitAtTopLevelOnly = splitAtTopLevelOnlyRaw as (
+  input: string,
+  separator: string
+) => string[]
 const unescape = unescapeRaw as (string: string) => string
 
 export {
@@ -47,5 +53,6 @@ export {
   transformThemeValue,
   resolveTailwindConfig,
   getAllConfigs,
+  splitAtTopLevelOnly,
   unescape,
 }

src/suggestions/index.ts

@@ -15,10 +15,7 @@ import type {
   TailwindConfig,
 } from './types'
 // eslint-disable-next-line import/no-relative-parent-imports
-import { createCoreContext, getStyles } from '../core'
-
-const COLONS_OUTSIDE_BRACKETS =
-  /:(?=(?:(?:(?!\)).)*\()|[^()]*$)(?=(?:(?:(?!]).)*\[)|[^[\]]*$)/g
+import { createCoreContext, getStyles, splitAtTopLevelOnly } from '../core'
 
 const ALL_SPACE_IDS = /{{SPACE}}/g
 
@@ -36,6 +33,7 @@ function getVariantSuggestions(
   context: ClassErrorContext
 ): string | undefined {
   const coreContext = createCoreContext({
+    tailwindConfig: context?.tailwindConfig,
     CustomError: MacroError as typeof Error,
   })
   const { unmatched } = getStyles(className, coreContext)
@@ -60,7 +58,7 @@ function getVariantSuggestions(
 function getClassError(rawClass: string, context: ClassErrorContext): string {
   const input = rawClass.replace(ALL_SPACE_IDS, ' ')
 
-  const classPieces = input.split(COLONS_OUTSIDE_BRACKETS)
+  const classPieces = [...splitAtTopLevelOnly(input, ':')]
 
   for (const validator of validators) {
     const error = validator(classPieces, context)