tailwindcss 0.0.0-insiders.7c337f2 → 0.0.0-insiders.7d8eb21

package/src/lib/offsets.js

@@ -0,0 +1,351 @@
+// @ts-check
+
+import bigSign from '../util/bigSign'
+import { remapBitfield } from './remap-bitfield.js'
+
+/**
+ * @typedef {'base' | 'defaults' | 'components' | 'utilities' | 'variants' | 'user'} Layer
+ */
+
+/**
+ * @typedef {object} VariantOption
+ * @property {number} id An unique identifier to identify `matchVariant`
+ * @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)
+ */
+
+/**
+ * @typedef {object} RuleOffset
+ * @property {Layer} layer The layer that this rule belongs to
+ * @property {Layer} parentLayer The layer that this rule originally belonged to. Only different from layer if this is a variant.
+ * @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 {VariantOption[]} options Some information on how we can sort arbitrary variants
+ */
+
+export class Offsets {
+  constructor() {
+    /**
+     * Offsets for the next rule in a given layer
+     *
+     * @type {Record<Layer, bigint>}
+     */
+    this.offsets = {
+      defaults: 0n,
+      base: 0n,
+      components: 0n,
+      utilities: 0n,
+      variants: 0n,
+      user: 0n,
+    }
+
+    /**
+     * Positions for a given layer
+     *
+     * @type {Record<Layer, bigint>}
+     */
+    this.layerPositions = {
+      defaults: 0n,
+      base: 1n,
+      components: 2n,
+      utilities: 3n,
+
+      // There isn't technically a "user" layer, but we need to give it a position
+      // Because it's used for ordering user-css from @apply
+      user: 4n,
+
+      variants: 5n,
+    }
+
+    /**
+     * The total number of functions currently registered across all variants (including arbitrary variants)
+     *
+     * @type {bigint}
+     */
+    this.reservedVariantBits = 0n
+
+    /**
+     * Positions for a given variant
+     *
+     * @type {Map<string, bigint>}
+     */
+    this.variantOffsets = new Map()
+  }
+
+  /**
+   * @param {Layer} layer
+   * @returns {RuleOffset}
+   */
+  create(layer) {
+    return {
+      layer,
+      parentLayer: layer,
+      arbitrary: 0n,
+      variants: 0n,
+      parallelIndex: 0n,
+      index: this.offsets[layer]++,
+      options: [],
+    }
+  }
+
+  /**
+   * @returns {RuleOffset}
+   */
+  arbitraryProperty() {
+    return {
+      ...this.create('utilities'),
+      arbitrary: 1n,
+    }
+  }
+
+  /**
+   * Get the offset for a variant
+   *
+   * @param {string} variant
+   * @param {number} index
+   * @returns {RuleOffset}
+   */
+  forVariant(variant, index = 0) {
+    let offset = this.variantOffsets.get(variant)
+    if (offset === undefined) {
+      throw new Error(`Cannot find offset for unknown variant ${variant}`)
+    }
+
+    return {
+      ...this.create('variants'),
+      variants: offset << BigInt(index),
+    }
+  }
+
+  /**
+   * @param {RuleOffset} rule
+   * @param {RuleOffset} variant
+   * @param {VariantOption} options
+   * @returns {RuleOffset}
+   */
+  applyVariantOffset(rule, variant, options) {
+    return {
+      ...rule,
+      layer: 'variants',
+      parentLayer: rule.layer === 'variants' ? rule.parentLayer : rule.layer,
+      variants: rule.variants | variant.variants,
+      options: options.sort ? [].concat(options, rule.options) : rule.options,
+
+      // TODO: Technically this is wrong. We should be handling parallel index on a per variant basis.
+      // We'll take the max of all the parallel indexes for now.
+      // @ts-ignore
+      parallelIndex: max([rule.parallelIndex, variant.parallelIndex]),
+    }
+  }
+
+  /**
+   * @param {RuleOffset} offset
+   * @param {number} parallelIndex
+   * @returns {RuleOffset}
+   */
+  applyParallelOffset(offset, parallelIndex) {
+    return {
+      ...offset,
+      parallelIndex: BigInt(parallelIndex),
+    }
+  }
+
+  /**
+   * Each variant gets 1 bit per function / rule registered.
+   * This is because multiple variants can be applied to a single rule and we need to know which ones are present and which ones are not.
+   * Additionally, every unique group of variants is grouped together in the stylesheet.
+   *
+   * This grouping is order-independent. For instance, we do not differentiate between `hover:focus` and `focus:hover`.
+   *
+   * @param {string[]} variants
+   * @param {(name: string) => number} getLength
+   */
+  recordVariants(variants, getLength) {
+    for (let variant of variants) {
+      this.recordVariant(variant, getLength(variant))
+    }
+  }
+
+  /**
+   * The same as `recordVariants` but for a single arbitrary variant at runtime.
+   * @param {string} variant
+   * @param {number} fnCount
+   *
+   * @returns {RuleOffset} The highest offset for this variant
+   */
+  recordVariant(variant, fnCount = 1) {
+    this.variantOffsets.set(variant, 1n << this.reservedVariantBits)
+
+    // Ensure space is reserved for each "function" in the parallel variant
+    // by offsetting the next variant by the number of parallel variants
+    // in the one we just added.
+
+    // Single functions that return parallel variants are NOT handled separately here
+    // They're offset by 1 (or the number of functions) as usual
+    // And each rule returned is tracked separately since the functions are evaluated lazily.
+    // @see `RuleOffset.parallelIndex`
+    this.reservedVariantBits += BigInt(fnCount)
+
+    return {
+      ...this.create('variants'),
+      variants: this.variantOffsets.get(variant),
+    }
+  }
+
+  /**
+   * @param {RuleOffset} a
+   * @param {RuleOffset} b
+   * @returns {bigint}
+   */
+  compare(a, b) {
+    // Sort layers together
+    if (a.layer !== b.layer) {
+      return this.layerPositions[a.layer] - this.layerPositions[b.layer]
+    }
+
+    // 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 result = aOptions.sort(
+          {
+            value: aOptions.value,
+            modifier: aOptions.modifier,
+          },
+          {
+            value: bOptions.value,
+            modifier: bOptions.modifier,
+          }
+        )
+        if (result !== 0) return result
+      }
+    }
+
+    // Sort variants in the order they were registered
+    if (a.variants !== b.variants) {
+      return a.variants - b.variants
+    }
+
+    // Make sure each rule returned by a parallel variant is sorted in ascending order
+    if (a.parallelIndex !== b.parallelIndex) {
+      return a.parallelIndex - b.parallelIndex
+    }
+
+    // Always sort arbitrary properties after other utilities
+    if (a.arbitrary !== b.arbitrary) {
+      return a.arbitrary - b.arbitrary
+    }
+
+    // Sort utilities, components, etc… in the order they were registered
+    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)))
+  }
+}
+
+/**
+ *
+ * @param {bigint[]} nums
+ * @returns {bigint|null}
+ */
+function max(nums) {
+  let max = null
+
+  for (const num of nums) {
+    max = max ?? num
+    max = max > num ? max : num
+  }
+
+  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/regex.js

@@ -0,0 +1,74 @@
+const REGEX_SPECIAL = /[\\^$.*+?()[\]{}|]/g
+const REGEX_HAS_SPECIAL = RegExp(REGEX_SPECIAL.source)
+
+/**
+ * @param {string|RegExp|Array<string|RegExp>} source
+ */
+function toSource(source) {
+  source = Array.isArray(source) ? source : [source]
+
+  source = source.map((item) => (item instanceof RegExp ? item.source : item))
+
+  return source.join('')
+}
+
+/**
+ * @param {string|RegExp|Array<string|RegExp>} source
+ */
+export function pattern(source) {
+  return new RegExp(toSource(source), 'g')
+}
+
+/**
+ * @param {string|RegExp|Array<string|RegExp>} source
+ */
+export function withoutCapturing(source) {
+  return new RegExp(`(?:${toSource(source)})`, 'g')
+}
+
+/**
+ * @param {Array<string|RegExp>} sources
+ */
+export function any(sources) {
+  return `(?:${sources.map(toSource).join('|')})`
+}
+
+/**
+ * @param {string|RegExp} source
+ */
+export function optional(source) {
+  return `(?:${toSource(source)})?`
+}
+
+/**
+ * @param {string|RegExp|Array<string|RegExp>} source
+ */
+export function zeroOrMore(source) {
+  return `(?:${toSource(source)})*`
+}
+
+/**
+ * Generate a RegExp that matches balanced brackets for a given depth
+ * We have to specify a depth because JS doesn't support recursive groups using ?R
+ *
+ * Based on https://stackoverflow.com/questions/17759004/how-to-match-string-within-parentheses-nested-in-java/17759264#17759264
+ *
+ * @param {string|RegExp|Array<string|RegExp>} source
+ */
+export function nestedBrackets(open, close, depth = 1) {
+  return withoutCapturing([
+    escape(open),
+    /[^\s]*/,
+    depth === 1
+      ? `[^${escape(open)}${escape(close)}\s]*`
+      : any([`[^${escape(open)}${escape(close)}\s]*`, nestedBrackets(open, close, depth - 1)]),
+    /[^\s]*/,
+    escape(close),
+  ])
+}
+
+export function escape(string) {
+  return string && REGEX_HAS_SPECIAL.test(string)
+    ? string.replace(REGEX_SPECIAL, '\\$&')
+    : string || ''
+}

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
+}

package/src/lib/resolveDefaultsAtRules.js

@@ -91,56 +91,73 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
       rule.remove()
     })
 
-    for (let universal of universals) {
-      /** @type {Map<string, Set<string>>} */
-      let selectorGroups = new Map()
+    if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
+      for (let universal of universals) {
+        /** @type {Map<string, Set<string>>} */
+        let selectorGroups = new Map()
+
+        let rules = variableNodeMap.get(universal.params) ?? []
+
+        for (let rule of rules) {
+          for (let selector of extractElementSelector(rule.selector)) {
+            // If selector contains a vendor prefix after a pseudo element or class,
+            // 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
+            let selectorGroupName =
+              selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__'
+
+            let selectors = selectorGroups.get(selectorGroupName) ?? new Set()
+            selectorGroups.set(selectorGroupName, selectors)
+
+            selectors.add(selector)
+          }
+        }
 
-      let rules = variableNodeMap.get(universal.params) ?? []
+        if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
+          if (selectorGroups.size === 0) {
+            universal.remove()
+            continue
+          }
 
-      for (let rule of rules) {
-        for (let selector of extractElementSelector(rule.selector)) {
-          // If selector contains a vendor prefix after a pseudo element or class,
-          // 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
-          let selectorGroupName =
-            selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__'
+          for (let [, selectors] of selectorGroups) {
+            let universalRule = postcss.rule({
+              source: universal.source,
+            })
 
-          let selectors = selectorGroups.get(selectorGroupName) ?? new Set()
-          selectorGroups.set(selectorGroupName, selectors)
+            universalRule.selectors = [...selectors]
 
-          selectors.add(selector)
+            universalRule.append(universal.nodes.map((node) => node.clone()))
+            universal.before(universalRule)
+          }
         }
-      }
 
-      if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
-        if (selectorGroups.size === 0) {
-          universal.remove()
-          continue
-        }
-
-        for (let [, selectors] of selectorGroups) {
-          let universalRule = postcss.rule({
-            source: universal.source,
-          })
+        universal.remove()
+      }
+    } else if (universals.size) {
+      let universalRule = postcss.rule({
+        selectors: ['*', '::before', '::after'],
+      })
 
-          universalRule.selectors = [...selectors]
+      for (let universal of universals) {
+        universalRule.append(universal.nodes)
 
-          universalRule.append(universal.nodes.map((node) => node.clone()))
+        if (!universalRule.parent) {
           universal.before(universalRule)
         }
-      } else {
-        let universalRule = postcss.rule({
-          source: universal.source,
-        })
 
-        universalRule.selectors = ['*', '::before', '::after']
+        if (!universalRule.source) {
+          universalRule.source = universal.source
+        }
 
-        universalRule.append(universal.nodes)
-        universal.before(universalRule)
+        universal.remove()
       }
 
-      universal.remove()
+      let backdropRule = universalRule.clone({
+        selectors: ['::backdrop'],
+      })
+
+      universalRule.after(backdropRule)
     }
   }
 }