tailwindcss 3.2.4 → 3.2.6

package/src/lib/expandTailwindAtRules.js

@@ -1,3 +1,4 @@
+import fs from 'fs'
 import LRU from 'quick-lru'
 import * as sharedState from './sharedState'
 import { generateRules } from './generateRules'
@@ -124,15 +125,32 @@ export default function expandTailwindAtRules(context) {
     // ---
 
     // Find potential rules in changed files
-    let candidates = new Set([sharedState.NOT_ON_DEMAND])
+    let candidates = new Set([...(context.candidates ?? []), sharedState.NOT_ON_DEMAND])
     let seen = new Set()
 
     env.DEBUG && console.time('Reading changed files')
 
-    for (let { content, extension } of context.changedContent) {
-      let transformer = getTransformer(context.tailwindConfig, extension)
-      let extractor = getExtractor(context, extension)
-      getClassCandidates(transformer(content), extractor, candidates, seen)
+    if (env.OXIDE) {
+      // TODO: Pass through or implement `extractor`
+      for (let candidate of require('@tailwindcss/oxide').parseCandidateStringsFromFiles(
+        context.changedContent
+        // Object.assign({}, builtInTransformers, context.tailwindConfig.content.transform)
+      )) {
+        candidates.add(candidate)
+      }
+
+      // for (let { file, content, extension } of context.changedContent) {
+      //   let transformer = getTransformer(context.tailwindConfig, extension)
+      //   let extractor = getExtractor(context, extension)
+      //   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)
+      }
     }
 
     env.DEBUG && console.timeEnd('Reading changed files')
@@ -143,7 +161,18 @@ export default function expandTailwindAtRules(context) {
     let classCacheCount = context.classCache.size
 
     env.DEBUG && console.time('Generate rules')
-    generateRules(candidates, context)
+    env.DEBUG && console.time('Sorting candidates')
+    let sortedCandidates = env.OXIDE
+      ? candidates
+      : new Set(
+          [...candidates].sort((a, z) => {
+            if (a === z) return 0
+            if (a < z) return -1
+            return 1
+          })
+        )
+    env.DEBUG && console.timeEnd('Sorting candidates')
+    generateRules(sortedCandidates, context)
     env.DEBUG && console.timeEnd('Generate rules')
 
     // We only ever add to the classCache, so if it didn't grow, there is nothing new.

package/src/lib/generateRules.js

@@ -10,7 +10,7 @@ import { formatVariantSelector, finalizeSelector } from '../util/formatVariantSe
 import { asClass } from '../util/nameClass'
 import { normalize } from '../util/dataTypes'
 import { isValidVariantFormatString, parseVariant } from './setupContextUtils'
-import isValidArbitraryValue from '../util/isValidArbitraryValue'
+import isValidArbitraryValue from '../util/isSyntacticallyValidPropertyValue'
 import { splitAtTopLevelOnly } from '../util/splitAtTopLevelOnly.js'
 import { flagEnabled } from '../featureFlags'
 
@@ -152,10 +152,18 @@ function applyVariant(variant, matches, context) {
 
   // Retrieve "modifier"
   {
-    let match = /(.*)\/(.*)$/g.exec(variant)
-    if (match) {
-      variant = match[1]
-      args.modifier = match[2]
+    let [baseVariant, ...modifiers] = splitAtTopLevelOnly(variant, '/')
+
+    // This is a hack to support variants with `/` in them, like `ar-1/10/20:text-red-500`
+    // In this case 1/10 is a value but /20 is a modifier
+    if (modifiers.length > 1) {
+      baseVariant = baseVariant + '/' + modifiers.slice(0, -1).join('/')
+      modifiers = modifiers.slice(-1)
+    }
+
+    if (modifiers.length && !context.variantMap.has(variant)) {
+      variant = baseVariant
+      args.modifier = modifiers[0]
 
       if (!flagEnabled(context.tailwindConfig, 'generalizedModifiers')) {
         return []
@@ -201,6 +209,7 @@ function applyVariant(variant, matches, context) {
   }
 
   if (context.variantMap.has(variant)) {
+    let isArbitraryVariant = isArbitraryValue(variant)
     let variantFunctionTuples = context.variantMap.get(variant).slice()
     let result = []
 
@@ -262,7 +271,10 @@ function applyVariant(variant, matches, context) {
             clone.append(wrapper)
           },
           format(selectorFormat) {
-            collectedFormats.push(selectorFormat)
+            collectedFormats.push({
+              format: selectorFormat,
+              isArbitraryVariant,
+            })
           },
           args,
         })
@@ -288,7 +300,10 @@ function applyVariant(variant, matches, context) {
         }
 
         if (typeof ruleWithVariant === 'string') {
-          collectedFormats.push(ruleWithVariant)
+          collectedFormats.push({
+            format: ruleWithVariant,
+            isArbitraryVariant,
+          })
         }
 
         if (ruleWithVariant === null) {
@@ -329,7 +344,10 @@ function applyVariant(variant, matches, context) {
             //      modified (by plugin): .foo .foo\\:markdown > p
             //    rebuiltBase (internal): .foo\\:markdown > p
             //                    format: .foo &
-            collectedFormats.push(modified.replace(rebuiltBase, '&'))
+            collectedFormats.push({
+              format: modified.replace(rebuiltBase, '&'),
+              isArbitraryVariant,
+            })
             rule.selector = before
           })
         }
@@ -349,7 +367,6 @@ function applyVariant(variant, matches, context) {
               Object.assign(args, context.variantOptions.get(variant))
             ),
             collectedFormats: (meta.collectedFormats ?? []).concat(collectedFormats),
-            isArbitraryVariant: isArbitraryValue(variant),
           },
           clone.nodes[0],
         ]
@@ -412,7 +429,7 @@ function isParsableNode(node) {
   let isParsable = true
 
   node.walkDecls((decl) => {
-    if (!isParsableCssValue(decl.name, decl.value)) {
+    if (!isParsableCssValue(decl.prop, decl.value)) {
       isParsable = false
       return false
     }
@@ -736,24 +753,13 @@ function* resolveMatches(candidate, context, original = candidate) {
       match[1].raws.tailwind = { ...match[1].raws.tailwind, candidate }
 
       // Apply final format selector
-      if (match[0].collectedFormats) {
-        let finalFormat = formatVariantSelector('&', ...match[0].collectedFormats)
-        let container = postcss.root({ nodes: [match[1].clone()] })
-        container.walkRules((rule) => {
-          if (inKeyframes(rule)) return
-
-          rule.selector = finalizeSelector(finalFormat, {
-            selector: rule.selector,
-            candidate: original,
-            base: candidate
-              .split(new RegExp(`\\${context?.tailwindConfig?.separator ?? ':'}(?![^[]*\\])`))
-              .pop(),
-            isArbitraryVariant: match[0].isArbitraryVariant,
-
-            context,
-          })
-        })
-        match[1] = container.nodes[0]
+      match = applyFinalFormat(match, { context, candidate, original })
+
+      // Skip rules with invalid selectors
+      // This will cause the candidate to be added to the "not class"
+      // cache skipping it entirely for future builds
+      if (match === null) {
+        continue
       }
 
       yield match
@@ -761,6 +767,62 @@ function* resolveMatches(candidate, context, original = candidate) {
   }
 }
 
+function applyFinalFormat(match, { context, candidate, original }) {
+  if (!match[0].collectedFormats) {
+    return match
+  }
+
+  let isValid = true
+  let finalFormat
+
+  try {
+    finalFormat = formatVariantSelector(match[0].collectedFormats, {
+      context,
+      candidate,
+    })
+  } catch {
+    // The format selector we produced is invalid
+    // This could be because:
+    // - A bug exists
+    // - A plugin introduced an invalid variant selector (ex: `addVariant('foo', '&;foo')`)
+    // - The user used an invalid arbitrary variant (ex: `[&;foo]:underline`)
+    // Either way the build will fail because of this
+    // We would rather that the build pass "silently" given that this could
+    // happen because of picking up invalid things when scanning content
+    // So we'll throw out the candidate instead
+
+    return null
+  }
+
+  let container = postcss.root({ nodes: [match[1].clone()] })
+
+  container.walkRules((rule) => {
+    if (inKeyframes(rule)) {
+      return
+    }
+
+    try {
+      rule.selector = finalizeSelector(rule.selector, finalFormat, {
+        candidate: original,
+        context,
+      })
+    } 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
+      isValid = false
+      return false
+    }
+  })
+
+  if (!isValid) {
+    return null
+  }
+
+  match[1] = container.nodes[0]
+
+  return match
+}
+
 function inKeyframes(rule) {
   return rule.parent && rule.parent.type === 'atrule' && rule.parent.name === 'keyframes'
 }

package/src/lib/offsets.js

@@ -1,6 +1,7 @@
 // @ts-check
 
 import bigSign from '../util/bigSign'
+import { remapBitfield } from './remap-bitfield.js'
 
 /**
  * @typedef {'base' | 'defaults' | 'components' | 'utilities' | 'variants' | 'user'} Layer
@@ -12,6 +13,7 @@ import bigSign from '../util/bigSign'
  * @property {function | undefined} sort The sort function
  * @property {string|null} value The value we want to compare
  * @property {string|null} modifier The modifier that was used (if any)
+ * @property {bigint} variant The variant bitmask
  */
 
 /**
@@ -126,6 +128,8 @@ export class Offsets {
    * @returns {RuleOffset}
    */
   applyVariantOffset(rule, variant, options) {
+    options.variant = variant.variants
+
     return {
       ...rule,
       layer: 'variants',
@@ -190,7 +194,7 @@ export class Offsets {
 
     return {
       ...this.create('variants'),
-      variants: 1n << this.reservedVariantBits,
+      variants: this.variantOffsets.get(variant),
     }
   }
 
@@ -205,11 +209,30 @@ export class Offsets {
       return this.layerPositions[a.layer] - this.layerPositions[b.layer]
     }
 
+    // When sorting the `variants` layer, we need to sort based on the parent layer as well within
+    // this variants layer.
+    if (a.parentLayer !== b.parentLayer) {
+      return this.layerPositions[a.parentLayer] - this.layerPositions[b.parentLayer]
+    }
+
     // Sort based on the sorting function
     for (let aOptions of a.options) {
       for (let bOptions of b.options) {
         if (aOptions.id !== bOptions.id) continue
         if (!aOptions.sort || !bOptions.sort) continue
+
+        let maxFnVariant = max([aOptions.variant, bOptions.variant]) ?? 0n
+
+        // Create a mask of 0s from bits 1..N where N represents the mask of the Nth bit
+        let mask = ~(maxFnVariant | (maxFnVariant - 1n))
+        let aVariantsAfterFn = a.variants & mask
+        let bVariantsAfterFn = b.variants & mask
+
+        // If the variants the same, we _can_ sort them
+        if (aVariantsAfterFn !== bVariantsAfterFn) {
+          continue
+        }
+
         let result = aOptions.sort(
           {
             value: aOptions.value,
@@ -243,12 +266,68 @@ export class Offsets {
     return a.index - b.index
   }
 
+  /**
+   * Arbitrary variants are recorded in the order they're encountered.
+   * This means that the order is not stable between environments and sets of content files.
+   *
+   * In order to make the order stable, we need to remap the arbitrary variant offsets to
+   * be in alphabetical order starting from the offset of the first arbitrary variant.
+   */
+  recalculateVariantOffsets() {
+    // Sort the variants by their name
+    let variants = Array.from(this.variantOffsets.entries())
+      .filter(([v]) => v.startsWith('['))
+      .sort(([a], [z]) => fastCompare(a, z))
+
+    // Sort the list of offsets
+    // This is not necessarily a discrete range of numbers which is why
+    // we're using sort instead of creating a range from min/max
+    let newOffsets = variants.map(([, offset]) => offset).sort((a, z) => bigSign(a - z))
+
+    // Create a map from the old offsets to the new offsets in the new sort order
+    /** @type {[bigint, bigint][]} */
+    let mapping = variants.map(([, oldOffset], i) => [oldOffset, newOffsets[i]])
+
+    // Remove any variants that will not move letting us skip
+    // remapping if everything happens to be in order
+    return mapping.filter(([a, z]) => a !== z)
+  }
+
+  /**
+   * @template T
+   * @param {[RuleOffset, T][]} list
+   * @returns {[RuleOffset, T][]}
+   */
+  remapArbitraryVariantOffsets(list) {
+    let mapping = this.recalculateVariantOffsets()
+
+    // No arbitrary variants? Nothing to do.
+    // Everyhing already in order? Nothing to do.
+    if (mapping.length === 0) {
+      return list
+    }
+
+    // Remap every variant offset in the list
+    return list.map((item) => {
+      let [offset, rule] = item
+
+      offset = {
+        ...offset,
+        variants: remapBitfield(offset.variants, mapping),
+      }
+
+      return [offset, rule]
+    })
+  }
+
   /**
    * @template T
    * @param {[RuleOffset, T][]} list
    * @returns {[RuleOffset, T][]}
    */
   sort(list) {
+    list = this.remapArbitraryVariantOffsets(list)
+
     return list.sort(([a], [b]) => bigSign(this.compare(a, b)))
   }
 }
@@ -268,3 +347,27 @@ function max(nums) {
 
   return max
 }
+
+/**
+ * A fast ASCII order string comparison function.
+ *
+ * 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 must use a custom compare function.
+ *
+ * @param {string} a
+ * @param {string} b
+ */
+function fastCompare(a, b) {
+  let aLen = a.length
+  let bLen = b.length
+  let minLen = aLen < bLen ? aLen : bLen
+
+  for (let i = 0; i < minLen; i++) {
+    let cmp = a.charCodeAt(i) - b.charCodeAt(i)
+    if (cmp !== 0) return cmp
+  }
+
+  return aLen - bLen
+}

package/src/lib/remap-bitfield.js

@@ -0,0 +1,82 @@
+// @ts-check
+
+/**
+ * We must remap all the old bits to new bits for each set variant
+ * Only arbitrary variants are considered as those are the only
+ * ones that need to be re-sorted at this time
+ *
+ * An iterated process that removes and sets individual bits simultaneously
+ * will not work because we may have a new bit that is also a later old bit
+ * This means that we would be removing a previously set bit which we don't
+ * want to do
+ *
+ * For example (assume `bN` = `1<<N`)
+ * Given the "total" mapping `[[b1, b3], [b2, b4], [b3, b1], [b4, b2]]`
+ * The mapping is "total" because:
+ * 1. Every input and output is accounted for
+ * 2. All combinations are unique
+ * 3. No one input maps to multiple outputs and vice versa
+ * And, given an offset with all bits set:
+ * V = b1 | b2 | b3 | b4
+ *
+ * Let's explore the issue with removing and setting bits simultaneously:
+ * V & ~b1 | b3 = b2 | b3 | b4
+ * V & ~b2 | b4 = b3 | b4
+ * V & ~b3 | b1 = b1 | b4
+ * V & ~b4 | b2 = b1 | b2
+ *
+ * As you can see, we end up with the wrong result.
+ * This is because we're removing a bit that was previously set.
+ * And, thus the final result is missing b3 and b4.
+ *
+ * Now, let's explore the issue with removing the bits first:
+ * V & ~b1 = b2 | b3 | b4
+ * V & ~b2 = b3 | b4
+ * V & ~b3 = b4
+ * V & ~b4 = 0
+ *
+ * And then setting the bits:
+ * V | b3 = b3
+ * V | b4 = b3 | b4
+ * V | b1 = b1 | b3 | b4
+ * V | b2 = b1 | b2 | b3 | b4
+ *
+ * We get the correct result because we're not removing any bits that were
+ * previously set thus properly remapping the bits to the new order
+ *
+ * To collect this into a single operation that can be done simultaneously
+ * we must first create a mask for the old bits that are set and a mask for
+ * the new bits that are set. Then we can remove the old bits and set the new
+ * bits simultaneously in a "single" operation like so:
+ * OldMask = b1 | b2 | b3 | b4
+ * NewMask = b3 | b4 | b1 | b2
+ *
+ * So this:
+ * V & ~oldMask | newMask
+ *
+ * Expands to this:
+ * V & ~b1 & ~b2 & ~b3 & ~b4 | b3 | b4 | b1 | b2
+ *
+ * Which becomes this:
+ * b1 | b2 | b3 | b4
+ *
+ * Which is the correct result!
+ *
+ * @param {bigint} num
+ * @param {[bigint, bigint][]} mapping
+ */
+export function remapBitfield(num, mapping) {
+  // Create masks for the old and new bits that are set
+  let oldMask = 0n
+  let newMask = 0n
+  for (let [oldBit, newBit] of mapping) {
+    if (num & oldBit) {
+      oldMask = oldMask | oldBit
+      newMask = newMask | newBit
+    }
+  }
+
+  // Remove all old bits
+  // Set all new bits
+  return (num & ~oldMask) | newMask
+}