tailwindcss 0.0.0-insiders.bd970d0 → 0.0.0-insiders.bda8421

package/src/lib/expandTailwindAtRules.js

@@ -1,12 +1,10 @@
 import fs from 'fs'
 import LRU from '@alloc/quick-lru'
-import { parseCandidateStrings, IO, Parsing } from '@tailwindcss/oxide'
 import * as sharedState from './sharedState'
 import { generateRules } from './generateRules'
 import log from '../util/log'
 import cloneNodes from '../util/cloneNodes'
 import { defaultExtractor } from './defaultExtractor'
-import { flagEnabled } from '../featureFlags'
 
 let env = sharedState.env
 
@@ -26,10 +24,7 @@ function getExtractor(context, fileExtension) {
     extractors[fileExtension] ||
     extractors.DEFAULT ||
     builtInExtractors[fileExtension] ||
-    // Because we call `DEFAULT(context)`, the returning function is always a new function without a
-    // stable identity. Marking it with `DEFAULT_EXTRACTOR` allows us to check if it is the default
-    // extractor without relying on the function identity.
-    Object.assign(builtInExtractors.DEFAULT(context), { DEFAULT_EXTRACTOR: true })
+    builtInExtractors.DEFAULT(context)
   )
 }
 
@@ -135,43 +130,21 @@ export default function expandTailwindAtRules(context) {
 
     env.DEBUG && console.time('Reading changed files')
 
-    if (flagEnabled(context.tailwindConfig, 'oxideParser')) {
-      let rustParserContent = []
-      let regexParserContent = []
+    /** @type {[item: {file?: string, content?: string}, meta: {transformer: any, extractor: any}][]} */
+    let regexParserContent = []
 
-      for (let item of context.changedContent) {
-        let transformer = getTransformer(context.tailwindConfig, item.extension)
-        let extractor = getExtractor(context, item.extension)
-
-        if (transformer === builtInTransformers.DEFAULT && extractor?.DEFAULT_EXTRACTOR === true) {
-          rustParserContent.push(item)
-        } else {
-          regexParserContent.push([item, { transformer, extractor }])
-        }
-      }
+    for (let item of context.changedContent) {
+      let transformer = getTransformer(context.tailwindConfig, item.extension)
+      let extractor = getExtractor(context, item.extension)
+      regexParserContent.push([item, { transformer, extractor }])
+    }
 
-      if (rustParserContent.length > 0) {
-        for (let candidate of parseCandidateStrings(
-          rustParserContent,
-          IO.Parallel | Parsing.Parallel
-        )) {
-          candidates.add(candidate)
-        }
-      }
+    const BATCH_SIZE = 500
 
-      if (regexParserContent.length > 0) {
-        await Promise.all(
-          regexParserContent.map(async ([{ file, content }, { transformer, extractor }]) => {
-            content = file ? await fs.promises.readFile(file, 'utf8') : content
-            getClassCandidates(transformer(content), extractor, candidates, seen)
-          })
-        )
-      }
-    } else {
+    for (let i = 0; i < regexParserContent.length; i += BATCH_SIZE) {
+      let batch = regexParserContent.slice(i, i + BATCH_SIZE)
       await Promise.all(
-        context.changedContent.map(async ({ file, content, extension }) => {
-          let transformer = getTransformer(context.tailwindConfig, extension)
-          let extractor = getExtractor(context, extension)
+        batch.map(async ([{ file, content }, { transformer, extractor }]) => {
           content = file ? await fs.promises.readFile(file, 'utf8') : content
           getClassCandidates(transformer(content), extractor, candidates, seen)
         })
@@ -187,9 +160,6 @@ export default function expandTailwindAtRules(context) {
 
     env.DEBUG && console.time('Generate rules')
     env.DEBUG && console.time('Sorting candidates')
-    // TODO: only sort if we are not using the oxide parser (flagEnabled(context.tailwindConfig,
-    // 'oxideParser')) AND if we got all the candidates form the oxideParser alone. This will not
-    // be the case currently if you have custom transformers / extractors.
     let sortedCandidates = new Set(
       [...candidates].sort((a, z) => {
         if (a === z) return 0
@@ -270,23 +240,16 @@ export default function expandTailwindAtRules(context) {
       )
       layerNodes.variants.remove()
     } else if (variantNodes.length > 0) {
-      let cloned = cloneNodes(variantNodes, undefined, {
-        layer: 'variants',
-      })
-
-      cloned.forEach((node) => {
-        let parentLayer = node.raws.tailwind?.parentLayer ?? null
-
-        node.walk((n) => {
-          if (!n.source) {
-            n.source = layerNodes[parentLayer].source
-          }
+      root.append(
+        cloneNodes(variantNodes, root.source, {
+          layer: 'variants',
         })
-      })
-
-      root.append(cloned)
+      )
     }
 
+    // TODO: Why is the root node having no source location for `end` possible?
+    root.source.end = root.source.end ?? root.source.start
+
     // If we've got a utility layer and no utilities are generated there's likely something wrong
     const hasUtilityVariants = variantNodes.some(
       (node) => node.raws.tailwind?.parentLayer === 'utilities'

package/src/lib/generateRules.js

@@ -16,6 +16,7 @@ import { normalize } from '../util/dataTypes'
 import { isValidVariantFormatString, parseVariant, INTERNAL_FEATURES } from './setupContextUtils'
 import isValidArbitraryValue from '../util/isSyntacticallyValidPropertyValue'
 import { splitAtTopLevelOnly } from '../util/splitAtTopLevelOnly.js'
+import { flagEnabled } from '../featureFlags'
 import { applyImportantSelector } from '../util/applyImportantSelector'
 
 let classNameParser = selectorParser((selectors) => {
@@ -44,7 +45,7 @@ function* candidatePermutations(candidate) {
       let bracketIdx = candidate.indexOf('[')
 
       // If character before `[` isn't a dash or a slash, this isn't a dynamic class
-      // e.g. string[]
+      // eg. string[]
       if (candidate[bracketIdx - 1] === '-') {
         dashIdx = bracketIdx - 1
       } else if (candidate[bracketIdx - 1] === '/') {
@@ -118,10 +119,20 @@ function applyImportant(matches, classCandidate) {
 
   let result = []
 
+  function isInKeyframes(rule) {
+    return rule.parent && rule.parent.type === 'atrule' && rule.parent.name === 'keyframes'
+  }
+
   for (let [meta, rule] of matches) {
     let container = postcss.root({ nodes: [rule.clone()] })
 
     container.walkRules((r) => {
+      // Declarations inside keyframes cannot be marked as important
+      // They will be ignored by the browser
+      if (isInKeyframes(r)) {
+        return
+      }
+
       let ast = selectorParser().astSync(r.selector)
 
       // Remove extraneous selectors that do not include the base candidate
@@ -174,6 +185,10 @@ function applyVariant(variant, matches, context) {
     if (modifiers.length && !context.variantMap.has(variant)) {
       variant = baseVariant
       args.modifier = modifiers[0]
+
+      if (!flagEnabled(context.tailwindConfig, 'generalizedModifiers')) {
+        return []
+      }
     }
   }
 
@@ -461,9 +476,9 @@ function isParsableNode(node) {
 }
 
 function isParsableCssValue(property, value) {
-  // We don't want to treat [https://example.com] as a custom property
+  // We don't want to to treat [https://example.com] as a custom property
   // Even though, according to the CSS grammar, it's a totally valid CSS declaration
-  // So we short-circuit here by checking if the custom property looks like a URL
+  // So we short-circuit here by checking if the custom property looks like a url
   if (looksLikeUri(`${property}:${value}`)) {
     return false
   }
@@ -491,13 +506,13 @@ function extractArbitraryProperty(classCandidate, context) {
     return null
   }
 
-  let normalized = normalize(value)
+  let normalized = normalize(value, { property })
 
   if (!isParsableCssValue(property, normalized)) {
     return null
   }
 
-  let sort = context.offsets.arbitraryProperty()
+  let sort = context.offsets.arbitraryProperty(classCandidate)
 
   return [
     [
@@ -815,10 +830,19 @@ function applyFinalFormat(match, { context, candidate }) {
     }
 
     try {
-      rule.selector = finalizeSelector(rule.selector, finalFormat, {
+      let selector = finalizeSelector(rule.selector, finalFormat, {
         candidate,
         context,
       })
+
+      // Finalize Selector determined that this candidate is irrelevant
+      // TODO: This elimination should happen earlier so this never happens
+      if (selector === null) {
+        rule.remove()
+        return
+      }
+
+      rule.selector = selector
     } catch {
       // If this selector is invalid we also want to skip it
       // But it's likely that being invalid here means there's a bug in a plugin rather than too loosely matching content
@@ -831,6 +855,11 @@ function applyFinalFormat(match, { context, candidate }) {
     return null
   }
 
+  // If all rules have been eliminated we can skip this candidate entirely
+  if (container.nodes.length === 0) {
+    return null
+  }
+
   match[1] = container.nodes[0]
 
   return match
@@ -868,7 +897,7 @@ function getImportantStrategy(important) {
   }
 }
 
-function generateRules(candidates, context) {
+function generateRules(candidates, context, isSorting = false) {
   let allRules = []
   let strategy = getImportantStrategy(context.tailwindConfig.important)
 
@@ -903,7 +932,9 @@ function generateRules(candidates, context) {
         rule = container.nodes[0]
       }
 
-      let newEntry = [sort, rule]
+      // Note: We have to clone rules during sorting
+      // so we eliminate some shared mutable state
+      let newEntry = [sort, isSorting ? rule.clone() : rule]
       rules.add(newEntry)
       context.ruleCache.add(newEntry)
       allRules.push(newEntry)

package/src/lib/load-config.ts

@@ -4,12 +4,25 @@ import { transform } from 'sucrase'
 import { Config } from '../../types/config'
 
 let jiti: ReturnType<typeof jitiFactory> | null = null
+
+// @internal
+// This WILL be removed in some future release
+// If you rely on this your stuff WILL break
+export function useCustomJiti(_jiti: () => ReturnType<typeof jitiFactory>) {
+  jiti = _jiti()
+}
+
 function lazyJiti() {
   return (
     jiti ??
     (jiti = jitiFactory(__filename, {
       interopDefault: true,
       transform: (opts) => {
+        // Sucrase can't transform import.meta so we have to use Babel
+        if (opts.source.includes('import.meta')) {
+          return require('jiti/dist/babel.js')(opts)
+        }
+
         return transform(opts.source, {
           transforms: ['typescript', 'imports'],
         })

package/src/lib/normalizeTailwindDirectives.js

@@ -10,6 +10,33 @@ export default function normalizeTailwindDirectives(root) {
       applyDirectives.add(atRule)
     }
 
+    if (atRule.name === 'import') {
+      if (atRule.params === '"tailwindcss/base"' || atRule.params === "'tailwindcss/base'") {
+        atRule.name = 'tailwind'
+        atRule.params = 'base'
+      } else if (
+        atRule.params === '"tailwindcss/components"' ||
+        atRule.params === "'tailwindcss/components'"
+      ) {
+        atRule.name = 'tailwind'
+        atRule.params = 'components'
+      } else if (
+        atRule.params === '"tailwindcss/utilities"' ||
+        atRule.params === "'tailwindcss/utilities'"
+      ) {
+        atRule.name = 'tailwind'
+        atRule.params = 'utilities'
+      } else if (
+        atRule.params === '"tailwindcss/screens"' ||
+        atRule.params === "'tailwindcss/screens'" ||
+        atRule.params === '"tailwindcss/variants"' ||
+        atRule.params === "'tailwindcss/variants'"
+      ) {
+        atRule.name = 'tailwind'
+        atRule.params = 'variants'
+      }
+    }
+
     if (atRule.name === 'tailwind') {
       if (atRule.params === 'screens') {
         atRule.params = 'variants'

package/src/lib/offsets.js

@@ -24,6 +24,8 @@ import { remapBitfield } from './remap-bitfield.js'
  * @property {bigint} variants Dynamic size. 1 bit per registered variant. 0n means no variants
  * @property {bigint} parallelIndex Rule index for the parallel variant. 0 if not applicable.
  * @property {bigint} index Index of the rule / utility in its given *parent* layer. Monotonically increasing.
+ * @property {bigint} propertyOffset Offset for the arbitrary property. Only valid after sorting.
+ * @property {string} property Name/Value of the arbitrary property.
  * @property {VariantOption[]} options Some information on how we can sort arbitrary variants
  */
 
@@ -88,17 +90,21 @@ export class Offsets {
       variants: 0n,
       parallelIndex: 0n,
       index: this.offsets[layer]++,
+      propertyOffset: 0n,
+      property: '',
       options: [],
     }
   }
 
   /**
+   * @param {string} name
    * @returns {RuleOffset}
    */
-  arbitraryProperty() {
+  arbitraryProperty(name) {
     return {
       ...this.create('utilities'),
       arbitrary: 1n,
+      property: name,
     }
   }
 
@@ -262,6 +268,11 @@ export class Offsets {
       return a.arbitrary - b.arbitrary
     }
 
+    // Always sort arbitrary properties alphabetically
+    if (a.propertyOffset !== b.propertyOffset) {
+      return a.propertyOffset - b.propertyOffset
+    }
+
     // Sort utilities, components, etc… in the order they were registered
     return a.index - b.index
   }
@@ -302,7 +313,7 @@ export class Offsets {
     let mapping = this.recalculateVariantOffsets()
 
     // No arbitrary variants? Nothing to do.
-    // Everything already in order? Nothing to do.
+    // Everyhing already in order? Nothing to do.
     if (mapping.length === 0) {
       return list
     }
@@ -320,14 +331,62 @@ export class Offsets {
     })
   }
 
+  /**
+   * @template T
+   * @param {[RuleOffset, T][]} list
+   * @returns {[RuleOffset, T][]}
+   */
+  sortArbitraryProperties(list) {
+    // Collect all known arbitrary properties
+    let known = new Set()
+
+    for (let [offset] of list) {
+      if (offset.arbitrary === 1n) {
+        known.add(offset.property)
+      }
+    }
+
+    // No arbitrary properties? Nothing to do.
+    if (known.size === 0) {
+      return list
+    }
+
+    // Sort the properties alphabetically
+    let properties = Array.from(known).sort()
+
+    // Create a map from the property name to its offset
+    let offsets = new Map()
+
+    let offset = 1n
+    for (let property of properties) {
+      offsets.set(property, offset++)
+    }
+
+    // Apply the sorted offsets to the list
+    return list.map((item) => {
+      let [offset, rule] = item
+
+      offset = {
+        ...offset,
+        propertyOffset: offsets.get(offset.property) ?? 0n,
+      }
+
+      return [offset, rule]
+    })
+  }
+
   /**
    * @template T
    * @param {[RuleOffset, T][]} list
    * @returns {[RuleOffset, T][]}
    */
   sort(list) {
+    // Sort arbitrary variants so they're in alphabetical order
     list = this.remapArbitraryVariantOffsets(list)
 
+    // Sort arbitrary properties so they're in alphabetical order
+    list = this.sortArbitraryProperties(list)
+
     return list.sort(([a], [b]) => bigSign(this.compare(a, b)))
   }
 }
@@ -354,7 +413,7 @@ function max(nums) {
  * Using `.sort()` without a custom compare function is faster
  * But you can only use that if you're sorting an array of
  * only strings. If you're sorting strings inside objects
- * or arrays, you need to use a custom compare function.
+ * or arrays, you need must use a custom compare function.
  *
  * @param {string} a
  * @param {string} b

package/src/lib/resolveDefaultsAtRules.js

@@ -104,8 +104,12 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
             // we consider them separately because merging the declarations into
             // a single rule will cause browsers that do not understand the
             // vendor prefix to throw out the whole rule
+            // Additionally if a selector contains `:has` we also consider
+            // it separately because FF only recently gained support for it
             let selectorGroupName =
-              selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__'
+              selector.includes(':-') || selector.includes('::-') || selector.includes(':has')
+                ? selector
+                : '__DEFAULT__'
 
             let selectors = selectorGroups.get(selectorGroupName) ?? new Set()
             selectorGroups.set(selectorGroupName, selectors)

package/src/lib/setupContextUtils.js

@@ -21,6 +21,7 @@ import isSyntacticallyValidPropertyValue from '../util/isSyntacticallyValidPrope
 import { generateRules, getClassNameFromSelector } from './generateRules'
 import { hasContentChanged } from './cacheInvalidation.js'
 import { Offsets } from './offsets.js'
+import { flagEnabled } from '../featureFlags.js'
 import { finalizeSelector, formatVariantSelector } from '../util/formatVariantSelector'
 
 export const INTERNAL_FEATURES = Symbol()
@@ -147,43 +148,45 @@ function getClasses(selector, mutate) {
   return parser.transformSync(selector)
 }
 
+/**
+ * Ignore everything inside a :not(...). This allows you to write code like
+ * `div:not(.foo)`. If `.foo` is never found in your code, then we used to
+ * not generated it. But now we will ignore everything inside a `:not`, so
+ * that it still gets generated.
+ *
+ * @param {selectorParser.Root} selectors
+ */
+function ignoreNot(selectors) {
+  selectors.walkPseudos((pseudo) => {
+    if (pseudo.value === ':not') {
+      pseudo.remove()
+    }
+  })
+}
+
 function extractCandidates(node, state = { containsNonOnDemandable: false }, depth = 0) {
   let classes = []
+  let selectors = []
 
-  // Handle normal rules
   if (node.type === 'rule') {
-    // Ignore everything inside a :not(...). This allows you to write code like
-    // `div:not(.foo)`. If `.foo` is never found in your code, then we used to
-    // not generated it. But now we will ignore everything inside a `:not`, so
-    // that it still gets generated.
-    function ignoreNot(selectors) {
-      selectors.walkPseudos((pseudo) => {
-        if (pseudo.value === ':not') {
-          pseudo.remove()
-        }
-      })
-    }
+    // Handle normal rules
+    selectors.push(...node.selectors)
+  } else if (node.type === 'atrule') {
+    // Handle at-rules (which contains nested rules)
+    node.walkRules((rule) => selectors.push(...rule.selectors))
+  }
 
-    for (let selector of node.selectors) {
-      let classCandidates = getClasses(selector, ignoreNot)
-      // At least one of the selectors contains non-"on-demandable" candidates.
-      if (classCandidates.length === 0) {
-        state.containsNonOnDemandable = true
-      }
+  for (let selector of selectors) {
+    let classCandidates = getClasses(selector, ignoreNot)
 
-      for (let classCandidate of classCandidates) {
-        classes.push(classCandidate)
-      }
+    // At least one of the selectors contains non-"on-demandable" candidates.
+    if (classCandidates.length === 0) {
+      state.containsNonOnDemandable = true
     }
-  }
 
-  // Handle at-rules (which contains nested rules)
-  else if (node.type === 'atrule') {
-    node.walkRules((rule) => {
-      for (let classCandidate of rule.selectors.flatMap((selector) => getClasses(selector))) {
-        classes.push(classCandidate)
-      }
-    })
+    for (let classCandidate of classCandidates) {
+      classes.push(classCandidate)
+    }
   }
 
   if (depth === 0) {
@@ -435,8 +438,10 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
             },
           }
 
+          let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')
+
           let ruleSets = []
-            .concat(rule(value, extras))
+            .concat(modifiersEnabled ? rule(value, extras) : rule(value))
             .filter(Boolean)
             .map((declaration) => ({
               [nameClass(identifier, modifier)]: declaration,
@@ -513,8 +518,10 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
             },
           }
 
+          let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')
+
           let ruleSets = []
-            .concat(rule(value, extras))
+            .concat(modifiersEnabled ? rule(value, extras) : rule(value))
             .filter(Boolean)
             .map((declaration) => ({
               [nameClass(identifier, modifier)]: declaration,
@@ -582,13 +589,18 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
       let id = options?.id ?? ++variantIdentifier
       let isSpecial = variant === '@'
 
+      let modifiersEnabled = flagEnabled(tailwindConfig, 'generalizedModifiers')
+
       for (let [key, value] of Object.entries(options?.values ?? {})) {
         if (key === 'DEFAULT') continue
 
         api.addVariant(
           isSpecial ? `${variant}${key}` : `${variant}-${key}`,
           ({ args, container }) => {
-            return variantFn(value, { modifier: args?.modifier, container })
+            return variantFn(
+              value,
+              modifiersEnabled ? { modifier: args?.modifier, container } : { container }
+            )
           },
 
           {
@@ -616,7 +628,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
               : // Falling back to args if it is a string, otherwise '' for older intellisense
                 // (JetBrains) plugins.
                 args?.value ?? (typeof args === 'string' ? args : ''),
-            { modifier: args?.modifier, container }
+            modifiersEnabled ? { modifier: args?.modifier, container } : { container }
           )
         },
         {
@@ -721,7 +733,7 @@ function collectLayerPlugins(root) {
 }
 
 function resolvePlugins(context, root) {
-  let corePluginList = Object.entries(corePlugins)
+  let corePluginList = Object.entries({ ...variantPlugins, ...corePlugins })
     .map(([name, plugin]) => {
       if (!context.tailwindConfig.corePlugins.includes(name)) {
         return null
@@ -744,6 +756,7 @@ function resolvePlugins(context, root) {
   // TODO: This is a workaround for backwards compatibility, since custom variants
   // were historically sorted before screen/stackable variants.
   let beforeVariants = [
+    variantPlugins['childVariant'],
     variantPlugins['pseudoElementVariants'],
     variantPlugins['pseudoClassVariants'],
     variantPlugins['hasVariants'],
@@ -752,15 +765,37 @@ function resolvePlugins(context, root) {
   ]
   let afterVariants = [
     variantPlugins['supportsVariants'],
-    variantPlugins['directionVariants'],
     variantPlugins['reducedMotionVariants'],
     variantPlugins['prefersContrastVariants'],
-    variantPlugins['darkVariants'],
-    variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
     variantPlugins['orientationVariants'],
+    variantPlugins['directionVariants'],
+    variantPlugins['darkVariants'],
+    variantPlugins['forcedColorsVariants'],
+    variantPlugins['printVariant'],
   ]
 
+  // This is a compatibility fix for the pre 3.4 dark mode behavior
+  // `class` retains the old behavior, but `selector` keeps the new behavior
+  let isLegacyDarkMode =
+    context.tailwindConfig.darkMode === 'class' ||
+    (Array.isArray(context.tailwindConfig.darkMode) &&
+      context.tailwindConfig.darkMode[0] === 'class')
+
+  if (isLegacyDarkMode) {
+    afterVariants = [
+      variantPlugins['supportsVariants'],
+      variantPlugins['reducedMotionVariants'],
+      variantPlugins['prefersContrastVariants'],
+      variantPlugins['darkVariants'],
+      variantPlugins['screenVariants'],
+      variantPlugins['orientationVariants'],
+      variantPlugins['directionVariants'],
+      variantPlugins['forcedColorsVariants'],
+      variantPlugins['printVariant'],
+    ]
+  }
+
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]
 }
 
@@ -936,7 +971,7 @@ function registerPlugins(plugins, context) {
 
     // Sort all classes in order
     // Non-tailwind classes won't be generated and will be left as `null`
-    let rules = generateRules(new Set(sorted), context)
+    let rules = generateRules(new Set(sorted), context, true)
     rules = context.offsets.sort(rules)
 
     let idx = BigInt(parasiteUtilities.length)
@@ -1009,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
@@ -1019,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()] })