Fix crash showing completions in Intellisense when using a custom sep…

…arator (#13306)

* Fix variant completions in intellisense when using a custom separator

* Update changelog

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Sort arbitrary properties alphabetically across multiple class lists ([#12911](https://github.com/tailwindlabs/tailwindcss/pull/12911))
 - Add `mix-blend-plus-darker` utility ([#12923](https://github.com/tailwindlabs/tailwindcss/pull/12923))
 - Ensure dashes are allowed in variant modifiers ([#13303](https://github.com/tailwindlabs/tailwindcss/pull/13303))
+- Fix crash showing completions in Intellisense when using a custom separator ([#13306](https://github.com/tailwindlabs/tailwindcss/pull/13306))
 
 ## [3.4.1] - 2024-01-05
 

src/lib/setupContextUtils.js

@@ -1044,6 +1044,11 @@ function registerPlugins(plugins, context) {
 
   // Generate a list of available variants with meta information of the type of variant.
   context.getVariants = function getVariants() {
+    // We use a unique, random ID for candidate names to avoid conflicts
+    // We can't use characters like `_`, `:`, `@` or `.` because they might
+    // be used as a separator
+    let id = Math.random().toString(36).substring(7).toUpperCase()
+
     let result = []
     for (let [name, options] of context.variantOptions.entries()) {
       if (options.variantInfo === VARIANT_INFO.Base) continue
@@ -1054,7 +1059,7 @@ function registerPlugins(plugins, context) {
         values: Object.keys(options.values ?? {}),
         hasDash: name !== '@',
         selectors({ modifier, value } = {}) {
-          let candidate = '__TAILWIND_PLACEHOLDER__'
+          let candidate = `TAILWINDPLACEHOLDER${id}`
 
           let rule = postcss.rule({ selector: `.${candidate}` })
           let container = postcss.root({ nodes: [rule.clone()] })