tailwindcss 0.0.0-insiders.fda68f7 → 0.0.0-oxide.6bf5e56

package/src/lib/normalizeTailwindDirectives.js

@@ -3,8 +3,13 @@ import log from '../util/log'
 export default function normalizeTailwindDirectives(root) {
   let tailwindDirectives = new Set()
   let layerDirectives = new Set()
+  let applyDirectives = new Set()
 
   root.walkAtRules((atRule) => {
+    if (atRule.name === 'apply') {
+      applyDirectives.add(atRule)
+    }
+
     if (atRule.name === 'import') {
       if (atRule.params === '"tailwindcss/base"' || atRule.params === "'tailwindcss/base'") {
         atRule.name = 'tailwind'
@@ -41,8 +46,10 @@ export default function normalizeTailwindDirectives(root) {
 
     if (['layer', 'responsive', 'variants'].includes(atRule.name)) {
       if (['responsive', 'variants'].includes(atRule.name)) {
-        log.warn([
-          `'@${atRule.name}' is deprecated, use '@layer utilities' or '@layer components' instead.`,
+        log.warn(`${atRule.name}-at-rule-deprecated`, [
+          `The \`@${atRule.name}\` directive has been deprecated in Tailwind CSS v3.0.`,
+          `Use \`@layer utilities\` or \`@layer components\` instead.`,
+          'https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer',
         ])
       }
       layerDirectives.add(atRule)
@@ -73,5 +80,5 @@ export default function normalizeTailwindDirectives(root) {
     }
   }
 
-  return tailwindDirectives
+  return { tailwindDirectives, applyDirectives }
 }

package/src/lib/offsets.js

@@ -0,0 +1,270 @@
+// @ts-check
+
+import bigSign from '../util/bigSign'
+
+/**
+ * @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: 1n << this.reservedVariantBits,
+    }
+  }
+
+  /**
+   * @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
+  }
+
+  /**
+   * @template T
+   * @param {[RuleOffset, T][]} list
+   * @returns {[RuleOffset, T][]}
+   */
+  sort(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
+}

package/src/lib/partitionApplyAtRules.js

@@ -0,0 +1,52 @@
+function partitionRules(root) {
+  if (!root.walkAtRules) return
+
+  let applyParents = new Set()
+
+  root.walkAtRules('apply', (rule) => {
+    applyParents.add(rule.parent)
+  })
+
+  if (applyParents.size === 0) {
+    return
+  }
+
+  for (let rule of applyParents) {
+    let nodeGroups = []
+    let lastGroup = []
+
+    for (let node of rule.nodes) {
+      if (node.type === 'atrule' && node.name === 'apply') {
+        if (lastGroup.length > 0) {
+          nodeGroups.push(lastGroup)
+          lastGroup = []
+        }
+        nodeGroups.push([node])
+      } else {
+        lastGroup.push(node)
+      }
+    }
+
+    if (lastGroup.length > 0) {
+      nodeGroups.push(lastGroup)
+    }
+
+    if (nodeGroups.length === 1) {
+      continue
+    }
+
+    for (let group of [...nodeGroups].reverse()) {
+      let clone = rule.clone({ nodes: [] })
+      clone.append(group)
+      rule.after(clone)
+    }
+
+    rule.remove()
+  }
+}
+
+export default function expandApplyAtRules() {
+  return (root) => {
+    partitionRules(root)
+  }
+}

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/resolveDefaultsAtRules.js

@@ -2,42 +2,58 @@ import postcss from 'postcss'
 import selectorParser from 'postcss-selector-parser'
 import { flagEnabled } from '../featureFlags'
 
+let getNode = {
+  id(node) {
+    return selectorParser.attribute({
+      attribute: 'id',
+      operator: '=',
+      value: node.value,
+      quoteMark: '"',
+    })
+  },
+}
+
 function minimumImpactSelector(nodes) {
-  let pseudos = nodes.filter((n) => n.type === 'pseudo')
-  let [bestNode] = nodes
-
-  for (let [type, getNode = (n) => n] of [
-    ['class'],
-    [
-      'id',
-      (n) =>
-        selectorParser.attribute({
-          attribute: 'id',
-          operator: '=',
-          value: n.value,
-          quoteMark: '"',
-        }),
-    ],
-    ['attribute'],
-  ]) {
-    let match = nodes.find((n) => n.type === type)
-
-    if (match) {
-      bestNode = getNode(match)
-      break
-    }
+  let rest = nodes
+    .filter((node) => {
+      // Keep non-pseudo nodes
+      if (node.type !== 'pseudo') return true
+
+      // Keep pseudo nodes that have subnodes
+      // E.g.: `:not()` contains subnodes inside the parentheses
+      if (node.nodes.length > 0) return true
+
+      // Keep pseudo `elements`
+      // This implicitly means that we ignore pseudo `classes`
+      return (
+        node.value.startsWith('::') ||
+        [':before', ':after', ':first-line', ':first-letter'].includes(node.value)
+      )
+    })
+    .reverse()
+
+  let searchFor = new Set(['tag', 'class', 'id', 'attribute'])
+
+  let splitPointIdx = rest.findIndex((n) => searchFor.has(n.type))
+  if (splitPointIdx === -1) return rest.reverse().join('').trim()
+
+  let node = rest[splitPointIdx]
+  let bestNode = getNode[node.type] ? getNode[node.type](node) : node
+
+  rest = rest.slice(0, splitPointIdx)
+
+  let combinatorIdx = rest.findIndex((n) => n.type === 'combinator' && n.value === '>')
+  if (combinatorIdx !== -1) {
+    rest.splice(0, combinatorIdx)
+    rest.unshift(selectorParser.universal())
   }
 
-  return [bestNode, ...pseudos].join('').trim()
+  return [bestNode, ...rest.reverse()].join('').trim()
 }
 
-let elementSelectorParser = selectorParser((selectors) => {
+export let elementSelectorParser = selectorParser((selectors) => {
   return selectors.map((s) => {
-    let nodes = s
-      .split((n) => n.type === 'combinator')
-      .pop()
-      .filter((n) => n.type !== 'pseudo' || n.value.startsWith('::'))
-
+    let nodes = s.split((n) => n.type === 'combinator' && n.value === ' ').pop()
     return minimumImpactSelector(nodes)
   })
 })
@@ -55,6 +71,8 @@ function extractElementSelector(selector) {
 export default function resolveDefaultsAtRules({ tailwindConfig }) {
   return (root) => {
     let variableNodeMap = new Map()
+
+    /** @type {Set<import('postcss').AtRule>} */
     let universals = new Set()
 
     root.walkAtRules('defaults', (rule) => {
@@ -73,33 +91,73 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
       rule.remove()
     })
 
-    for (let universal of universals) {
-      let selectors = new Set()
+    if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
+      for (let universal of universals) {
+        /** @type {Map<string, Set<string>>} */
+        let selectorGroups = new Map()
+
+        let rules = variableNodeMap.get(universal.params) ?? []
 
-      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__'
 
-      for (let rule of rules) {
-        for (let selector of extractElementSelector(rule.selector)) {
-          selectors.add(selector)
+            let selectors = selectorGroups.get(selectorGroupName) ?? new Set()
+            selectorGroups.set(selectorGroupName, selectors)
+
+            selectors.add(selector)
+          }
+        }
+
+        if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
+          if (selectorGroups.size === 0) {
+            universal.remove()
+            continue
+          }
+
+          for (let [, selectors] of selectorGroups) {
+            let universalRule = postcss.rule({
+              source: universal.source,
+            })
+
+            universalRule.selectors = [...selectors]
+
+            universalRule.append(universal.nodes.map((node) => node.clone()))
+            universal.before(universalRule)
+          }
         }
-      }
 
-      if (selectors.size === 0) {
         universal.remove()
-        continue
       }
+    } else if (universals.size) {
+      let universalRule = postcss.rule({
+        selectors: ['*', '::before', '::after'],
+      })
 
-      let universalRule = postcss.rule()
+      for (let universal of universals) {
+        universalRule.append(universal.nodes)
 
-      if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
-        universalRule.selectors = [...selectors]
-      } else {
-        universalRule.selectors = ['*', '::before', '::after']
+        if (!universalRule.parent) {
+          universal.before(universalRule)
+        }
+
+        if (!universalRule.source) {
+          universalRule.source = universal.source
+        }
+
+        universal.remove()
       }
 
-      universalRule.append(universal.nodes)
-      universal.before(universalRule)
-      universal.remove()
+      let backdropRule = universalRule.clone({
+        selectors: ['::backdrop'],
+      })
+
+      universalRule.after(backdropRule)
     }
   }
 }