tailwindcss 3.2.4 → 3.2.5

package/src/util/dataTypes.js

@@ -10,6 +10,9 @@ function isCSSFunction(value) {
   return cssFunctions.some((fn) => new RegExp(`^${fn}\\(.*\\)`).test(value))
 }
 
+const placeholder = '--tw-placeholder'
+const placeholderRe = new RegExp(placeholder, 'g')
+
 // This is not a data type, but rather a function that can normalize the
 // correct values.
 export function normalize(value, isRoot = true) {
@@ -45,10 +48,14 @@ export function normalize(value, isRoot = true) {
   // Add spaces around operators inside math functions like calc() that do not follow an operator
   // or '('.
   value = value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
-    return match.replace(
-      /(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g,
-      '$1 $2 '
-    )
+    let vars = []
+    return match
+      .replace(/var\((--.+?)[,)]/g, (match, g1) => {
+        vars.push(g1)
+        return match.replace(g1, placeholder)
+      })
+      .replace(/(-?\d*\.?\d(?!\b-\d.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, '$1 $2 ')
+      .replace(placeholderRe, () => vars.shift())
   })
 
   return value
@@ -66,6 +73,9 @@ export function percentage(value) {
   return (value.endsWith('%') && number(value.slice(0, -1))) || isCSSFunction(value)
 }
 
+// Please refer to MDN when updating this list:
+// https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
+// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries#container_query_length_units
 let lengthUnits = [
   'cm',
   'mm',
@@ -79,10 +89,25 @@ let lengthUnits = [
   'ch',
   'rem',
   'lh',
+  'rlh',
   'vw',
   'vh',
   'vmin',
   'vmax',
+  'vb',
+  'vi',
+  'svw',
+  'svh',
+  'lvw',
+  'lvh',
+  'dvw',
+  'dvh',
+  'cqw',
+  'cqh',
+  'cqi',
+  'cqb',
+  'cqmin',
+  'cqmax',
 ]
 let lengthUnitsPattern = `(?:${lengthUnits.join('|')})`
 export function length(value) {

package/src/util/formatVariantSelector.js

@@ -3,30 +3,57 @@ import unescape from 'postcss-selector-parser/dist/util/unesc'
 import escapeClassName from '../util/escapeClassName'
 import prefixSelector from '../util/prefixSelector'
 
+/** @typedef {import('postcss-selector-parser').Root} Root */
+/** @typedef {import('postcss-selector-parser').Selector} Selector */
+/** @typedef {import('postcss-selector-parser').Pseudo} Pseudo */
+/** @typedef {import('postcss-selector-parser').Node} Node */
+
+/** @typedef {{format: string, isArbitraryVariant: boolean}[]} RawFormats */
+/** @typedef {import('postcss-selector-parser').Root} ParsedFormats */
+/** @typedef {RawFormats | ParsedFormats} AcceptedFormats */
+
 let MERGE = ':merge'
-let PARENT = '&'
-
-export let selectorFunctions = new Set([MERGE])
-
-export function formatVariantSelector(current, ...others) {
-  for (let other of others) {
-    let incomingValue = resolveFunctionArgument(other, MERGE)
-    if (incomingValue !== null) {
-      let existingValue = resolveFunctionArgument(current, MERGE, incomingValue)
-      if (existingValue !== null) {
-        let existingTarget = `${MERGE}(${incomingValue})`
-        let splitIdx = other.indexOf(existingTarget)
-        let addition = other.slice(splitIdx + existingTarget.length).split(' ')[0]
-
-        current = current.replace(existingTarget, existingTarget + addition)
-        continue
-      }
+
+/**
+ * @param {RawFormats} formats
+ * @param {{context: any, candidate: string, base: string | null}} options
+ * @returns {ParsedFormats | null}
+ */
+export function formatVariantSelector(formats, { context, candidate }) {
+  let prefix = context?.tailwindConfig.prefix ?? ''
+
+  // Parse the format selector into an AST
+  let parsedFormats = formats.map((format) => {
+    let ast = selectorParser().astSync(format.format)
+
+    return {
+      ...format,
+      ast: format.isArbitraryVariant ? ast : prefixSelector(prefix, ast),
     }
+  })
 
-    current = other.replace(PARENT, current)
+  // We start with the candidate selector
+  let formatAst = selectorParser.root({
+    nodes: [
+      selectorParser.selector({
+        nodes: [selectorParser.className({ value: escapeClassName(candidate) })],
+      }),
+    ],
+  })
+
+  // And iteratively merge each format selector into the candidate selector
+  for (let { ast } of parsedFormats) {
+    // 1. Handle :merge() special pseudo-class
+    ;[formatAst, ast] = handleMergePseudo(formatAst, ast)
+
+    // 2. Merge the format selector into the current selector AST
+    ast.walkNesting((nesting) => nesting.replaceWith(...formatAst.nodes[0].nodes))
+
+    // 3. Keep going!
+    formatAst = ast
   }
 
-  return current
+  return formatAst
 }
 
 /**
@@ -35,11 +62,11 @@ export function formatVariantSelector(current, ...others) {
  * Technically :is(), :not(), :has(), etc… can have combinators but those are nested
  * inside the relevant node and won't be picked up so they're fine to ignore
  *
- * @param {import('postcss-selector-parser').Node} node
- * @returns {import('postcss-selector-parser').Node[]}
+ * @param {Node} node
+ * @returns {Node[]}
  **/
 function simpleSelectorForNode(node) {
-  /** @type {import('postcss-selector-parser').Node[]} */
+  /** @type {Node[]} */
   let nodes = []
 
   // Walk backwards until we hit a combinator node (or the start)
@@ -60,8 +87,8 @@ function simpleSelectorForNode(node) {
  * Resorts the nodes in a selector to ensure they're in the correct order
  * Tags go before classes, and pseudo classes go after classes
  *
- * @param {import('postcss-selector-parser').Selector} sel
- * @returns {import('postcss-selector-parser').Selector}
+ * @param {Selector} sel
+ * @returns {Selector}
  **/
 function resortSelector(sel) {
   sel.sort((a, b) => {
@@ -81,6 +108,18 @@ function resortSelector(sel) {
   return sel
 }
 
+/**
+ * Remove extraneous selectors that do not include the base class/candidate
+ *
+ * Example:
+ * Given the utility `.a, .b { color: red}`
+ * Given the candidate `sm:b`
+ *
+ * The final selector should be `.sm\:b` and not `.a, .sm\:b`
+ *
+ * @param {Selector} ast
+ * @param {string} base
+ */
 function eliminateIrrelevantSelectors(sel, base) {
   let hasClassesMatchingCandidate = false
 
@@ -104,41 +143,26 @@ function eliminateIrrelevantSelectors(sel, base) {
   // TODO: Can we do this for :matches, :is, and :where?
 }
 
-export function finalizeSelector(
-  format,
-  {
-    selector,
-    candidate,
-    context,
-    isArbitraryVariant,
-
-    // Split by the separator, but ignore the separator inside square brackets:
-    //
-    // E.g.: dark:lg:hover:[paint-order:markers]
-    //           ┬  ┬     ┬            ┬
-    //           │  │     │            ╰── We will not split here
-    //           ╰──┴─────┴─────────────── We will split here
-    //
-    base = candidate
-      .split(new RegExp(`\\${context?.tailwindConfig?.separator ?? ':'}(?![^[]*\\])`))
-      .pop(),
-  }
-) {
-  let ast = selectorParser().astSync(selector)
-
-  // We explicitly DO NOT prefix classes in arbitrary variants
-  if (context?.tailwindConfig?.prefix && !isArbitraryVariant) {
-    format = prefixSelector(context.tailwindConfig.prefix, format)
-  }
-
-  format = format.replace(PARENT, `.${escapeClassName(candidate)}`)
-
-  let formatAst = selectorParser().astSync(format)
+/**
+ * @param {string} current
+ * @param {AcceptedFormats} formats
+ * @param {{context: any, candidate: string, base: string | null}} options
+ * @returns {string}
+ */
+export function finalizeSelector(current, formats, { context, candidate, base }) {
+  let separator = context?.tailwindConfig?.separator ?? ':'
+
+  // Split by the separator, but ignore the separator inside square brackets:
+  //
+  // E.g.: dark:lg:hover:[paint-order:markers]
+  //           ┬  ┬     ┬            ┬
+  //           │  │     │            ╰── We will not split here
+  //           ╰──┴─────┴─────────────── We will split here
+  //
+  base = base ?? candidate.split(new RegExp(`\\${separator}(?![^[]*\\])`)).pop()
 
-  // Remove extraneous selectors that do not include the base class/candidate being matched against
-  // For example if we have a utility defined `.a, .b { color: red}`
-  // And the formatted variant is sm:b then we want the final selector to be `.sm\:b` and not `.a, .sm\:b`
-  ast.each((sel) => eliminateIrrelevantSelectors(sel, base))
+  // Parse the selector into an AST
+  let selector = selectorParser().astSync(current)
 
   // Normalize escaped classes, e.g.:
   //
@@ -151,18 +175,31 @@ export function finalizeSelector(
   //   base in selector: bg-\\[rgb\\(255\\,0\\,0\\)\\]
   //       escaped base: bg-\\[rgb\\(255\\2c 0\\2c 0\\)\\]
   //
-  ast.walkClasses((node) => {
+  selector.walkClasses((node) => {
     if (node.raws && node.value.includes(base)) {
       node.raws.value = escapeClassName(unescape(node.raws.value))
     }
   })
 
+  // Remove extraneous selectors that do not include the base candidate
+  selector.each((sel) => eliminateIrrelevantSelectors(sel, base))
+
+  // If there are no formats that means there were no variants added to the candidate
+  // so we can just return the selector as-is
+  let formatAst = Array.isArray(formats)
+    ? formatVariantSelector(formats, { context, candidate })
+    : formats
+
+  if (formatAst === null) {
+    return selector.toString()
+  }
+
   let simpleStart = selectorParser.comment({ value: '/*__simple__*/' })
   let simpleEnd = selectorParser.comment({ value: '/*__simple__*/' })
 
   // We can safely replace the escaped base now, since the `base` section is
   // now in a normalized escaped value.
-  ast.walkClasses((node) => {
+  selector.walkClasses((node) => {
     if (node.value !== base) {
       return
     }
@@ -181,7 +218,7 @@ export function finalizeSelector(
     parent.insertAfter(simpleSelector[simpleSelector.length - 1], simpleEnd)
 
     for (let child of formatNodes) {
-      parent.insertBefore(simpleSelector[0], child)
+      parent.insertBefore(simpleSelector[0], child.clone())
     }
 
     node.remove()
@@ -200,47 +237,86 @@ export function finalizeSelector(
     simpleEnd.remove()
   })
 
-  // This will make sure to move pseudo's to the correct spot (the end for
-  // pseudo elements) because otherwise the selector will never work
-  // anyway.
-  //
-  // E.g.:
-  //  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
-  //  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
-  //
-  // `::before:hover` doesn't work, which means that we can make it work for you by flipping the order.
-  function collectPseudoElements(selector) {
-    let nodes = []
-
-    for (let node of selector.nodes) {
-      if (isPseudoElement(node)) {
-        nodes.push(node)
-        selector.removeChild(node)
-      }
-
-      if (node?.nodes) {
-        nodes.push(...collectPseudoElements(node))
-      }
+  // Remove unnecessary pseudo selectors that we used as placeholders
+  selector.walkPseudos((p) => {
+    if (p.value === MERGE) {
+      p.replaceWith(p.nodes)
     }
+  })
 
-    return nodes
-  }
-
-  // Remove unnecessary pseudo selectors that we used as placeholders
-  ast.each((selector) => {
-    selector.walkPseudos((p) => {
-      if (selectorFunctions.has(p.value)) {
-        p.replaceWith(p.nodes)
-      }
-    })
-
-    let pseudoElements = collectPseudoElements(selector)
+  // Move pseudo elements to the end of the selector (if necessary)
+  selector.each((sel) => {
+    let pseudoElements = collectPseudoElements(sel)
     if (pseudoElements.length > 0) {
-      selector.nodes.push(pseudoElements.sort(sortSelector))
+      sel.nodes.push(pseudoElements.sort(sortSelector))
+    }
+  })
+
+  return selector.toString()
+}
+
+/**
+ *
+ * @param {Selector} selector
+ * @param {Selector} format
+ */
+export function handleMergePseudo(selector, format) {
+  /** @type {{pseudo: Pseudo, value: string}[]} */
+  let merges = []
+
+  // Find all :merge() pseudo-classes in `selector`
+  selector.walkPseudos((pseudo) => {
+    if (pseudo.value === MERGE) {
+      merges.push({
+        pseudo,
+        value: pseudo.nodes[0].toString(),
+      })
     }
   })
 
-  return ast.toString()
+  // Find all :merge() "attachments" in `format` and attach them to the matching selector in `selector`
+  format.walkPseudos((pseudo) => {
+    if (pseudo.value !== MERGE) {
+      return
+    }
+
+    let value = pseudo.nodes[0].toString()
+
+    // Does `selector` contain a :merge() pseudo-class with the same value?
+    let existing = merges.find((merge) => merge.value === value)
+
+    // Nope so there's nothing to do
+    if (!existing) {
+      return
+    }
+
+    // Everything after `:merge()` up to the next combinator is what is attached to the merged selector
+    let attachments = []
+    let next = pseudo.next()
+    while (next && next.type !== 'combinator') {
+      attachments.push(next)
+      next = next.next()
+    }
+
+    let combinator = next
+
+    existing.pseudo.parent.insertAfter(
+      existing.pseudo,
+      selectorParser.selector({ nodes: attachments.map((node) => node.clone()) })
+    )
+
+    pseudo.remove()
+    attachments.forEach((node) => node.remove())
+
+    // What about this case:
+    // :merge(.group):focus > &
+    // :merge(.group):hover &
+    if (combinator && combinator.type === 'combinator') {
+      combinator.remove()
+    }
+  })
+
+  return [selector, format]
 }
 
 // Note: As a rule, double colons (::) should be used instead of a single colon
@@ -250,7 +326,49 @@ export function finalizeSelector(
 let pseudoElementsBC = [':before', ':after', ':first-line', ':first-letter']
 
 // These pseudo-elements _can_ be combined with other pseudo selectors AND the order does matter.
-let pseudoElementExceptions = ['::file-selector-button']
+let pseudoElementExceptions = [
+  '::file-selector-button',
+
+  // Webkit scroll bar pseudo elements can be combined with user-action pseudo classes
+  '::-webkit-scrollbar',
+  '::-webkit-scrollbar-button',
+  '::-webkit-scrollbar-thumb',
+  '::-webkit-scrollbar-track',
+  '::-webkit-scrollbar-track-piece',
+  '::-webkit-scrollbar-corner',
+  '::-webkit-resizer',
+]
+
+/**
+ * This will make sure to move pseudo's to the correct spot (the end for
+ * pseudo elements) because otherwise the selector will never work
+ * anyway.
+ *
+ * E.g.:
+ *  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
+ *  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
+ *
+ * `::before:hover` doesn't work, which means that we can make it work for you by flipping the order.
+ *
+ * @param {Selector} selector
+ **/
+function collectPseudoElements(selector) {
+  /** @type {Node[]} */
+  let nodes = []
+
+  for (let node of selector.nodes) {
+    if (isPseudoElement(node)) {
+      nodes.push(node)
+      selector.removeChild(node)
+    }
+
+    if (node?.nodes) {
+      nodes.push(...collectPseudoElements(node))
+    }
+  }
+
+  return nodes
+}
 
 // This will make sure to move pseudo's to the correct spot (the end for
 // pseudo elements) because otherwise the selector will never work
@@ -292,28 +410,3 @@ function isPseudoElement(node) {
 
   return node.value.startsWith('::') || pseudoElementsBC.includes(node.value)
 }
-
-function resolveFunctionArgument(haystack, needle, arg) {
-  let startIdx = haystack.indexOf(arg ? `${needle}(${arg})` : needle)
-  if (startIdx === -1) return null
-
-  // Start inside the `(`
-  startIdx += needle.length + 1
-
-  let target = ''
-  let count = 0
-
-  for (let char of haystack.slice(startIdx)) {
-    if (char !== '(' && char !== ')') {
-      target += char
-    } else if (char === '(') {
-      target += char
-      count++
-    } else if (char === ')') {
-      if (--count < 0) break // unbalanced
-      target += char
-    }
-  }
-
-  return target
-}

package/src/util/{isValidArbitraryValue.js → isSyntacticallyValidPropertyValue.js}

@@ -15,7 +15,7 @@ let quotes = new Set(['"', "'", '`'])
 // E.g.: w-[this-is]w-[weird-and-invalid]
 // E.g.: w-[this-is\\]w-\\[weird-but-valid]
 // E.g.: content-['this-is-also-valid]-weirdly-enough']
-export default function isValidArbitraryValue(value) {
+export default function isSyntacticallyValidPropertyValue(value) {
   let stack = []
   let inQuotes = false
 

package/src/util/negateValue.js

@@ -1,4 +1,4 @@
-export default function (value) {
+export default function negateValue(value) {
   value = `${value}`
 
   if (value === '0') {

package/src/util/pluginUtils.js

@@ -133,18 +133,14 @@ export function parseColorFormat(value) {
   return value
 }
 
-export function asColor(
-  _,
-  options = {},
-  { tailwindConfig = {}, utilityModifier, rawModifier } = {}
-) {
-  if (options.values?.[rawModifier] !== undefined) {
-    return parseColorFormat(options.values?.[rawModifier])
+export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
+  if (options.values?.[modifier] !== undefined) {
+    return parseColorFormat(options.values?.[modifier])
   }
 
   // TODO: Hoist this up to getMatchingTypes or something
   // We do this here because we need the alpha value (if any)
-  let [color, alpha] = splitUtilityModifier(rawModifier)
+  let [color, alpha] = splitUtilityModifier(modifier)
 
   if (alpha !== undefined) {
     let normalizedColor =
@@ -167,7 +163,7 @@ export function asColor(
     return withAlphaValue(normalizedColor, tailwindConfig.theme.opacity[alpha])
   }
 
-  return asValue(rawModifier, options, { rawModifier, utilityModifier, validate: validateColor })
+  return asValue(modifier, options, { validate: validateColor })
 }
 
 export function asLookupValue(modifier, options = {}) {
@@ -175,8 +171,8 @@ export function asLookupValue(modifier, options = {}) {
 }
 
 function guess(validate) {
-  return (modifier, options, extras) => {
-    return asValue(modifier, options, { ...extras, validate })
+  return (modifier, options) => {
+    return asValue(modifier, options, { validate })
   }
 }
 
@@ -208,6 +204,20 @@ function splitAtFirst(input, delim) {
 }
 
 export function coerceValue(types, modifier, options, tailwindConfig) {
+  if (options.values && modifier in options.values) {
+    for (let { type } of types ?? []) {
+      let result = typeMap[type](modifier, options, {
+        tailwindConfig,
+      })
+
+      if (result === undefined) {
+        continue
+      }
+
+      return [result, type, null]
+    }
+  }
+
   if (isArbitraryValue(modifier)) {
     let arbitraryValue = modifier.slice(1, -1)
     let [explicitType, value] = splitAtFirst(arbitraryValue, ':')
@@ -280,17 +290,10 @@ export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
         utilityModifier = utilityModifier.slice(1, -1)
       }
     }
-
-    let result = asValue(rawModifier, options, { rawModifier, utilityModifier, tailwindConfig })
-    if (result !== undefined) {
-      yield [result, 'any', null]
-    }
   }
 
-  for (const { type } of types ?? []) {
+  for (let { type } of types ?? []) {
     let result = typeMap[type](modifier, options, {
-      rawModifier,
-      utilityModifier,
       tailwindConfig,
     })
 

package/src/util/prefixSelector.js

@@ -1,14 +1,32 @@
 import parser from 'postcss-selector-parser'
 
+/**
+ * @template {string | import('postcss-selector-parser').Root} T
+ *
+ * Prefix all classes in the selector with the given prefix
+ *
+ * It can take either a string or a selector AST and will return the same type
+ *
+ * @param {string} prefix
+ * @param {T} selector
+ * @param {boolean} prependNegative
+ * @returns {T}
+ */
 export default function (prefix, selector, prependNegative = false) {
-  return parser((selectors) => {
-    selectors.walkClasses((classSelector) => {
-      let baseClass = classSelector.value
-      let shouldPlaceNegativeBeforePrefix = prependNegative && baseClass.startsWith('-')
-
-      classSelector.value = shouldPlaceNegativeBeforePrefix
-        ? `-${prefix}${baseClass.slice(1)}`
-        : `${prefix}${baseClass}`
-    })
-  }).processSync(selector)
+  if (prefix === '') {
+    return selector
+  }
+
+  let ast = typeof selector === 'string' ? parser().astSync(selector) : selector
+
+  ast.walkClasses((classSelector) => {
+    let baseClass = classSelector.value
+    let shouldPlaceNegativeBeforePrefix = prependNegative && baseClass.startsWith('-')
+
+    classSelector.value = shouldPlaceNegativeBeforePrefix
+      ? `-${prefix}${baseClass.slice(1)}`
+      : `${prefix}${baseClass}`
+  })
+
+  return typeof selector === 'string' ? ast.toString() : ast
 }

package/src/util/resolveConfig.js

@@ -1,7 +1,6 @@
 import negateValue from './negateValue'
 import corePluginList from '../corePluginList'
 import configurePlugins from './configurePlugins'
-import defaultConfig from '../../stubs/defaultConfig.stub'
 import colors from '../public/colors'
 import { defaults } from './defaults'
 import { toPath } from './toPath'
@@ -260,7 +259,6 @@ export default function resolveConfig(configs) {
       prefix: '',
       important: false,
       separator: ':',
-      variantOrder: defaultConfig.variantOrder,
     },
   ]