handle the prefix inside the group/peer variants

Then add the `NoPrefix` feature to the variant itself, which will skip
prefixing any other class in the generated selector (because we already
took care of prefixing `.group` and `.peer`).

We are using an internal symbol such that:

- We can keep it as a private API
- We don't introduce a breaking change

Author: RobinMalfait

src/corePlugins.js

@@ -21,6 +21,7 @@ import { formatBoxShadowValue, parseBoxShadowValue } from './util/parseBoxShadow
 import { removeAlphaVariables } from './util/removeAlphaVariables'
 import { flagEnabled } from './featureFlags'
 import { normalize } from './util/dataTypes'
+import { Features } from './lib/setupContextUtils'
 
 export let variantPlugins = {
   pseudoElementVariants: ({ addVariant }) => {
@@ -79,7 +80,7 @@ export let variantPlugins = {
     })
   },
 
-  pseudoClassVariants: ({ addVariant, matchVariant, config }) => {
+  pseudoClassVariants: ({ addVariant, matchVariant, config, prefix }) => {
     let pseudoVariants = [
       // Positional
       ['first', '&:first-child'],
@@ -150,12 +151,12 @@ export let variantPlugins = {
     let variants = {
       group: (_, { modifier }) =>
         modifier
-          ? [`:merge(.group\\/${escapeClassName(modifier)})`, ' &']
-          : [`:merge(.group)`, ' &'],
+          ? [`:merge(${prefix('.group')}\\/${escapeClassName(modifier)})`, ' &']
+          : [`:merge(${prefix('.group')})`, ' &'],
       peer: (_, { modifier }) =>
         modifier
-          ? [`:merge(.peer\\/${escapeClassName(modifier)})`, ' ~ &']
-          : [`:merge(.peer)`, ' ~ &'],
+          ? [`:merge(${prefix('.peer')}\\/${escapeClassName(modifier)})`, ' ~ &']
+          : [`:merge(${prefix('.peer')})`, ' ~ &'],
     }
 
     for (let [name, fn] of Object.entries(variants)) {
@@ -187,15 +188,11 @@ export let variantPlugins = {
           }
 
           // Basically this but can handle quotes:
-          // result.replace(/&(\S+)?/g, (_, pseudo = '') => a + `:tw-no-prefix(${pseudo})` + b)
+          // result.replace(/&(\S+)?/g, (_, pseudo = '') => a + pseudo + b)
 
-          let pseudo = result.slice(start + 1, end)
-
-          pseudo = config('prefix') ? `:tw-no-prefix(${pseudo})` : pseudo
-
-          return result.slice(0, start) + a + pseudo + b + result.slice(end)
+          return result.slice(0, start) + a + result.slice(start + 1, end) + b + result.slice(end)
         },
-        { values: Object.fromEntries(pseudoVariants) }
+        { values: Object.fromEntries(pseudoVariants), [Features]: Features.RespectPrefix }
       )
     }
   },

src/lib/generateRules.js

@@ -13,7 +13,7 @@ import {
 } from '../util/formatVariantSelector'
 import { asClass } from '../util/nameClass'
 import { normalize } from '../util/dataTypes'
-import { isValidVariantFormatString, parseVariant } from './setupContextUtils'
+import { isValidVariantFormatString, parseVariant, Features } from './setupContextUtils'
 import isValidArbitraryValue from '../util/isSyntacticallyValidPropertyValue'
 import { splitAtTopLevelOnly } from '../util/splitAtTopLevelOnly.js'
 import { flagEnabled } from '../featureFlags'
@@ -226,9 +226,16 @@ function applyVariant(variant, matches, context) {
 
   if (context.variantMap.has(variant)) {
     let isArbitraryVariant = isArbitraryValue(variant)
+    let features = context.variantOptions.get(variant)?.[Features] ?? Features.None
     let variantFunctionTuples = context.variantMap.get(variant).slice()
     let result = []
 
+    let respectPrefix = (() => {
+      if (isArbitraryVariant) return false
+      if ((features & Features.RespectPrefix) === Features.RespectPrefix) return false
+      return true
+    })()
+
     for (let [meta, rule] of matches) {
       // Don't generate variants for user css
       if (meta.layer === 'user') {
@@ -289,7 +296,7 @@ function applyVariant(variant, matches, context) {
           format(selectorFormat) {
             collectedFormats.push({
               format: selectorFormat,
-              isArbitraryVariant,
+              respectPrefix,
             })
           },
           args,
@@ -318,7 +325,7 @@ function applyVariant(variant, matches, context) {
         if (typeof ruleWithVariant === 'string') {
           collectedFormats.push({
             format: ruleWithVariant,
-            isArbitraryVariant,
+            respectPrefix,
           })
         }
 
@@ -362,7 +369,7 @@ function applyVariant(variant, matches, context) {
             //                    format: .foo &
             collectedFormats.push({
               format: modified.replace(rebuiltBase, '&'),
-              isArbitraryVariant,
+              respectPrefix,
             })
             rule.selector = before
           })

src/lib/setupContextUtils.js

@@ -23,6 +23,14 @@ import { hasContentChanged } from './cacheInvalidation.js'
 import { Offsets } from './offsets.js'
 import { finalizeSelector, formatVariantSelector } from '../util/formatVariantSelector'
 
+export const Features = Object.assign(Symbol(), {
+  // No features are enabled
+  None: 0,
+
+  // Whether or not we should respect the prefix
+  RespectPrefix: 1 << 0,
+})
+
 const VARIANT_TYPES = {
   AddVariant: Symbol.for('ADD_VARIANT'),
   MatchVariant: Symbol.for('MATCH_VARIANT'),
@@ -1110,17 +1118,24 @@ function registerPlugins(plugins, context) {
           }
 
           let isArbitraryVariant = !(value in (options.values ?? {}))
+          let features = options[Features] ?? Features.None
+
+          let respectPrefix = (() => {
+            if (isArbitraryVariant) return false
+            if ((features & Features.RespectPrefix) === Features.RespectPrefix) return false
+            return true
+          })()
 
           formatStrings = formatStrings.map((format) =>
             format.map((str) => ({
               format: str,
-              isArbitraryVariant,
+              respectPrefix,
             }))
           )
 
           manualFormatStrings = manualFormatStrings.map((format) => ({
             format,
-            isArbitraryVariant,
+            respectPrefix,
           }))
 
           let opts = {

src/util/formatVariantSelector.js

@@ -9,7 +9,7 @@ import { movePseudos } from './pseudoElements'
 /** @typedef {import('postcss-selector-parser').Pseudo} Pseudo */
 /** @typedef {import('postcss-selector-parser').Node} Node */
 
-/** @typedef {{format: string, isArbitraryVariant: boolean}[]} RawFormats */
+/** @typedef {{format: string, respectPrefix: boolean}[]} RawFormats */
 /** @typedef {import('postcss-selector-parser').Root} ParsedFormats */
 /** @typedef {RawFormats | ParsedFormats} AcceptedFormats */
 
@@ -29,7 +29,7 @@ export function formatVariantSelector(formats, { context, candidate }) {
 
     return {
       ...format,
-      ast: format.isArbitraryVariant ? ast : prefixSelector(prefix, ast),
+      ast: format.respectPrefix ? prefixSelector(prefix, ast) : ast,
     }
   })
 

src/util/prefixSelector.js

@@ -20,33 +20,14 @@ export default function (prefix, selector, prependNegative = false) {
   /** @type {import('postcss-selector-parser').Root} */
   let ast = typeof selector === 'string' ? parser().astSync(selector) : selector
 
-  // ast.walk bails too early when returning so it's not usable here
-  function prefixClasses(node) {
-    // Here we look for `:tw-no-prefix` which is an *internal-use-only* marker
-    // used to stop traversal so we don't replace any classes inside it
-    if (node.type === 'pseudo' && node.value === ':tw-no-prefix') {
-      node.replaceWith(...node.nodes)
-      return
-    }
-
-    // Prefix any classes we find
-    if (node.type === 'class') {
-      let baseClass = node.value
-      let shouldPlaceNegativeBeforePrefix = prependNegative && baseClass.startsWith('-')
-
-      node.value = shouldPlaceNegativeBeforePrefix
-        ? `-${prefix}${baseClass.slice(1)}`
-        : `${prefix}${baseClass}`
-      return
-    }
-
-    // Keep looking for classes
-    if (node.length) {
-      node.each(prefixClasses)
-    }
-  }
-
-  ast.each(prefixClasses)
+  ast.walkClasses((classSelector) => {
+    let baseClass = classSelector.value
+    let shouldPlaceNegativeBeforePrefix = prependNegative && baseClass.startsWith('-')
+
+    classSelector.value = shouldPlaceNegativeBeforePrefix
+      ? `-${prefix}${baseClass.slice(1)}`
+      : `${prefix}${baseClass}`
+  })
 
   return typeof selector === 'string' ? ast.toString() : ast
 }