tailwindcss 0.0.0-insiders.dddaded → 0.0.0-insiders.de00a62

package/src/lib/defaultExtractor.js

@@ -1,4 +1,3 @@
-import { flagEnabled } from '../featureFlags'
 import * as regex from './regex'
 
 export function defaultExtractor(context) {
@@ -12,16 +11,17 @@ export function defaultExtractor(context) {
     let results = []
 
     for (let pattern of patterns) {
-      results = [...results, ...(content.match(pattern) ?? [])]
+      for (let result of content.match(pattern) ?? []) {
+        results.push(clipAtBalancedParens(result))
+      }
     }
 
-    return results.filter((v) => v !== undefined).map(clipAtBalancedParens)
+    return results
   }
 }
 
 function* buildRegExps(context) {
   let separator = context.tailwindConfig.separator
-  let variantGroupingEnabled = flagEnabled(context.tailwindConfig, 'variantGrouping')
   let prefix =
     context.tailwindConfig.prefix !== ''
       ? regex.optional(regex.pattern([/-?/, regex.escape(context.tailwindConfig.prefix)]))
@@ -35,19 +35,29 @@ function* buildRegExps(context) {
     // This is a targeted fix to continue to allow theme()
     // with square brackets to work in arbitrary properties
     // while fixing a problem with the regex matching too much
-    /\[[^\s:'"`]+:[^\s]+?\[[^\s]+?\][^\s]+?\]/,
+    /\[[^\s:'"`\]]+:[^\s]+?\[[^\s]+\][^\s]+?\]/,
 
     // Utilities
     regex.pattern([
       // Utility Name / Group Name
-      /-?(?:\w+)/,
+      regex.any([
+        /-?(?:\w+)/,
+
+        // This is here to make sure @container supports everything that other utilities do
+        /@(?:\w+)/,
+      ]),
 
       // Normal/Arbitrary values
       regex.optional(
         regex.any([
           regex.pattern([
             // Arbitrary values
-            /-(?:\w+-)*\[[^\s:]+\]/,
+            regex.any([
+              /-(?:\w+-)*\['[^\s]+'\]/,
+              /-(?:\w+-)*\["[^\s]+"\]/,
+              /-(?:\w+-)*\[`[^\s]+`\]/,
+              /-(?:\w+-)*\[(?:[^\s\[\]]+\[[^\s\[\]]+\])*[^\s:\[\]]+\]/,
+            ]),
 
             // Not immediately followed by an `{[(`
             /(?![{([]])/,
@@ -58,7 +68,12 @@ function* buildRegExps(context) {
 
           regex.pattern([
             // Arbitrary values
-            /-(?:\w+-)*\[[^\s]+\]/,
+            regex.any([
+              /-(?:\w+-)*\['[^\s]+'\]/,
+              /-(?:\w+-)*\["[^\s]+"\]/,
+              /-(?:\w+-)*\[`[^\s]+`\]/,
+              /-(?:\w+-)*\[(?:[^\s\[\]]+\[[^\s\[\]]+\])*[^\s\[\]]+\]/,
+            ]),
 
             // Not immediately followed by an `{[(`
             /(?![{([]])/,
@@ -80,12 +95,18 @@ function* buildRegExps(context) {
       // This is here to provide special support for the `@` variant
       regex.pattern([/@\[[^\s"'`]+\](\/[^\s"'`]+)?/, separator]),
 
+      // With variant modifier (e.g.: group-[..]/modifier)
+      regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s"'`]+\]\/\w+/, separator]),
+
       regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s"'`]+\]/, separator]),
       regex.pattern([/[^\s"'`\[\\]+/, separator]),
     ]),
 
     // With quotes allowed
     regex.any([
+      // With variant modifier (e.g.: group-[..]/modifier)
+      regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s`]+\]\/\w+/, separator]),
+
       regex.pattern([/([^\s"'`\[\\]+-)?\[[^\s`]+\]/, separator]),
       regex.pattern([/[^\s`\[\\]+/, separator]),
     ]),
@@ -103,15 +124,7 @@ function* buildRegExps(context) {
 
       prefix,
 
-      variantGroupingEnabled
-        ? regex.any([
-            // Or any of those things but grouped separated by commas
-            regex.pattern([/\(/, utility, regex.zeroOrMore([/,/, utility]), /\)/]),
-
-            // Arbitrary properties, constrained utilities, arbitrary values, etc…
-            utility,
-          ])
-        : utility,
+      utility,
     ])
   }
 

package/src/lib/evaluateTailwindFunctions.js

@@ -1,7 +1,7 @@
 import dlv from 'dlv'
 import didYouMean from 'didyoumean'
 import transformThemeValue from '../util/transformThemeValue'
-import parseValue from 'postcss-value-parser'
+import parseValue from '../value-parser/index'
 import { normalizeScreens } from '../util/normalizeScreens'
 import buildMediaQuery from '../util/buildMediaQuery'
 import { toPath } from '../util/toPath'
@@ -146,6 +146,9 @@ function resolveVNode(node, vNode, functions) {
 }
 
 function resolveFunctions(node, input, functions) {
+  let hasAnyFn = Object.keys(functions).some((fn) => input.includes(`${fn}(`))
+  if (!hasAnyFn) return input
+
   return parseValue(input)
     .walk((vNode) => {
       resolveVNode(node, vNode, functions)

package/src/lib/expandApplyAtRules.js

@@ -553,6 +553,13 @@ function processApply(root, context, localCache) {
                 ? parent.selector.slice(importantSelector.length)
                 : parent.selector
 
+            // If the selector becomes empty after replacing the important selector
+            // This means that it's the same as the parent selector and we don't want to replace it
+            // Otherwise we'll crash
+            if (parentSelector === '') {
+              parentSelector = parent.selector
+            }
+
             rule.selector = replaceSelector(parentSelector, rule.selector, applyCandidate)
 
             // And then re-add it if it was removed

package/src/lib/expandTailwindAtRules.js

@@ -1,5 +1,5 @@
 import fs from 'fs'
-import LRU from 'quick-lru'
+import LRU from '@alloc/quick-lru'
 import * as sharedState from './sharedState'
 import { generateRules } from './generateRules'
 import log from '../util/log'
@@ -98,7 +98,7 @@ function buildStylesheet(rules, context) {
 }
 
 export default function expandTailwindAtRules(context) {
-  return (root) => {
+  return async (root) => {
     let layerNodes = {
       base: null,
       components: null,
@@ -130,7 +130,7 @@ export default function expandTailwindAtRules(context) {
 
     env.DEBUG && console.time('Reading changed files')
 
-    if (env.OXIDE) {
+    if (__OXIDE__) {
       // TODO: Pass through or implement `extractor`
       for (let candidate of require('@tailwindcss/oxide').parseCandidateStringsFromFiles(
         context.changedContent
@@ -145,11 +145,25 @@ export default function expandTailwindAtRules(context) {
       //   getClassCandidatesOxide(file, transformer(content), extractor, candidates, seen)
       // }
     } else {
-      for (let { file, content, extension } of context.changedContent) {
-        let transformer = getTransformer(context.tailwindConfig, extension)
-        let extractor = getExtractor(context, extension)
-        content = file ? fs.readFileSync(file, 'utf8') : content
-        getClassCandidates(transformer(content), extractor, candidates, seen)
+      /** @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)
+        regexParserContent.push([item, { transformer, extractor }])
+      }
+
+      const BATCH_SIZE = 500
+
+      for (let i = 0; i < regexParserContent.length; i += BATCH_SIZE) {
+        let batch = regexParserContent.slice(i, i + BATCH_SIZE)
+        await Promise.all(
+          batch.map(async ([{ file, content }, { transformer, extractor }]) => {
+            content = file ? await fs.promises.readFile(file, 'utf8') : content
+            getClassCandidates(transformer(content), extractor, candidates, seen)
+          })
+        )
       }
     }
 
@@ -162,7 +176,7 @@ export default function expandTailwindAtRules(context) {
 
     env.DEBUG && console.time('Generate rules')
     env.DEBUG && console.time('Sorting candidates')
-    let sortedCandidates = env.OXIDE
+    let sortedCandidates = __OXIDE__
       ? candidates
       : new Set(
           [...candidates].sort((a, z) => {
@@ -251,6 +265,9 @@ export default function expandTailwindAtRules(context) {
       )
     }
 
+    // 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

@@ -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, INTERNAL_FEATURES } from './setupContextUtils'
 import isValidArbitraryValue from '../util/isSyntacticallyValidPropertyValue'
 import { splitAtTopLevelOnly } from '../util/splitAtTopLevelOnly.js'
 import { flagEnabled } from '../featureFlags'
@@ -119,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
@@ -193,13 +203,13 @@ function applyVariant(variant, matches, context) {
     //   group[:hover]    (`-` is missing)
     let match = /(.)(-?)\[(.*)\]/g.exec(variant)
     if (match) {
-      let [, char, seperator, value] = match
+      let [, char, separator, value] = match
       // @-[200px] case
-      if (char === '@' && seperator === '-') return []
+      if (char === '@' && separator === '-') return []
       // group[:hover] case
-      if (char !== '@' && seperator === '') return []
+      if (char !== '@' && separator === '') return []
 
-      variant = variant.replace(`${seperator}[${value}]`, '')
+      variant = variant.replace(`${separator}[${value}]`, '')
       args.value = value
     }
   }
@@ -230,9 +240,16 @@ function applyVariant(variant, matches, context) {
 
   if (context.variantMap.has(variant)) {
     let isArbitraryVariant = isArbitraryValue(variant)
+    let internalFeatures = context.variantOptions.get(variant)?.[INTERNAL_FEATURES] ?? {}
     let variantFunctionTuples = context.variantMap.get(variant).slice()
     let result = []
 
+    let respectPrefix = (() => {
+      if (isArbitraryVariant) return false
+      if (internalFeatures.respectPrefix === false) return false
+      return true
+    })()
+
     for (let [meta, rule] of matches) {
       // Don't generate variants for user css
       if (meta.layer === 'user') {
@@ -293,7 +310,7 @@ function applyVariant(variant, matches, context) {
           format(selectorFormat) {
             collectedFormats.push({
               format: selectorFormat,
-              isArbitraryVariant,
+              respectPrefix,
             })
           },
           args,
@@ -322,7 +339,7 @@ function applyVariant(variant, matches, context) {
         if (typeof ruleWithVariant === 'string') {
           collectedFormats.push({
             format: ruleWithVariant,
-            isArbitraryVariant,
+            respectPrefix,
           })
         }
 
@@ -366,7 +383,7 @@ function applyVariant(variant, matches, context) {
             //                    format: .foo &
             collectedFormats.push({
               format: modified.replace(rebuiltBase, '&'),
-              isArbitraryVariant,
+              respectPrefix,
             })
             rule.selector = before
           })
@@ -489,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 [
     [
@@ -566,7 +583,7 @@ function* recordCandidates(matches, classCandidate) {
   }
 }
 
-function* resolveMatches(candidate, context, original = candidate) {
+function* resolveMatches(candidate, context) {
   let separator = context.tailwindConfig.separator
   let [classCandidate, ...variants] = splitWithSeparator(candidate, separator).reverse()
   let important = false
@@ -576,15 +593,6 @@ function* resolveMatches(candidate, context, original = candidate) {
     classCandidate = classCandidate.slice(1)
   }
 
-  if (flagEnabled(context.tailwindConfig, 'variantGrouping')) {
-    if (classCandidate.startsWith('(') && classCandidate.endsWith(')')) {
-      let base = variants.slice().reverse().join(separator)
-      for (let part of splitAtTopLevelOnly(classCandidate.slice(1, -1), ',')) {
-        yield* resolveMatches(base + separator + part, context, original)
-      }
-    }
-  }
-
   // TODO: Reintroduce this in ways that doesn't break on false positives
   // function sortAgainst(toSort, against) {
   //   return toSort.slice().sort((a, z) => {
@@ -773,7 +781,7 @@ function* resolveMatches(candidate, context, original = candidate) {
       match[1].raws.tailwind = { ...match[1].raws.tailwind, candidate }
 
       // Apply final format selector
-      match = applyFinalFormat(match, { context, candidate, original })
+      match = applyFinalFormat(match, { context, candidate })
 
       // Skip rules with invalid selectors
       // This will cause the candidate to be added to the "not class"
@@ -787,7 +795,7 @@ function* resolveMatches(candidate, context, original = candidate) {
   }
 }
 
-function applyFinalFormat(match, { context, candidate, original }) {
+function applyFinalFormat(match, { context, candidate }) {
   if (!match[0].collectedFormats) {
     return match
   }
@@ -822,10 +830,19 @@ function applyFinalFormat(match, { context, candidate, original }) {
     }
 
     try {
-      rule.selector = finalizeSelector(rule.selector, finalFormat, {
-        candidate: original,
+      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
@@ -838,6 +855,11 @@ function applyFinalFormat(match, { context, candidate, original }) {
     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
@@ -875,7 +897,7 @@ function getImportantStrategy(important) {
   }
 }
 
-function generateRules(candidates, context) {
+function generateRules(candidates, context, isSorting = false) {
   let allRules = []
   let strategy = getImportantStrategy(context.tailwindConfig.important)
 
@@ -910,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,6 +4,14 @@ 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 ??

package/src/lib/offsets.js

@@ -23,7 +23,9 @@ import { remapBitfield } from './remap-bitfield.js'
  * @property {bigint} arbitrary 0n if false, 1n if true
  * @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 it's given *parent* layer. Monotonically increasing.
+ * @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
   }
@@ -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)))
   }
 }

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)