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

package/src/util/formatVariantSelector.js

@@ -3,33 +3,153 @@ 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])
+/**
+ * @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),
+    }
+  })
+
+  // 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 formatAst
+}
+
+/**
+ * Given any node in a selector this gets the "simple" selector it's a part of
+ * A simple selector is just a list of nodes without any combinators
+ * 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 {Node} node
+ * @returns {Node[]}
+ **/
+function simpleSelectorForNode(node) {
+  /** @type {Node[]} */
+  let nodes = []
+
+  // Walk backwards until we hit a combinator node (or the start)
+  while (node.prev() && node.prev().type !== 'combinator') {
+    node = node.prev()
+  }
+
+  // Now record all non-combinator nodes until we hit one (or the end)
+  while (node && node.type !== 'combinator') {
+    nodes.push(node)
+    node = node.next()
+  }
 
-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]
+  return nodes
+}
 
-        current = current.replace(existingTarget, existingTarget + addition)
-        continue
-      }
+/**
+ * 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 {Selector} sel
+ * @returns {Selector}
+ **/
+function resortSelector(sel) {
+  sel.sort((a, b) => {
+    if (a.type === 'tag' && b.type === 'class') {
+      return -1
+    } else if (a.type === 'class' && b.type === 'tag') {
+      return 1
+    } else if (a.type === 'class' && b.type === 'pseudo' && b.value.startsWith('::')) {
+      return -1
+    } else if (a.type === 'pseudo' && a.value.startsWith('::') && b.type === 'class') {
+      return 1
     }
 
-    current = other.replace(PARENT, current)
+    return sel.index(a) - sel.index(b)
+  })
+
+  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
+
+  sel.walk((child) => {
+    if (child.type === 'class' && child.value === base) {
+      hasClassesMatchingCandidate = true
+      return false // Stop walking
+    }
+  })
+
+  if (!hasClassesMatchingCandidate) {
+    sel.remove()
   }
 
-  return current
+  // We do NOT recursively eliminate sub selectors that don't have the base class
+  // as this is NOT a safe operation. For example, if we have:
+  // `.space-x-2 > :not([hidden]) ~ :not([hidden])`
+  // We cannot remove the [hidden] from the :not() because it would change the
+  // meaning of the selector.
+
+  // TODO: Can we do this for :matches, :is, and :where?
 }
 
-export function finalizeSelector(format, { selector, candidate, context }) {
+/**
+ * @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:
@@ -39,14 +159,10 @@ export function finalizeSelector(format, { selector, candidate, context }) {
   //           │  │     │            ╰── We will not split here
   //           ╰──┴─────┴─────────────── We will split here
   //
-  let splitter = new RegExp(`\\${separator}(?![^[]*\\])`)
-  let base = candidate.split(splitter).pop()
+  base = base ?? candidate.split(new RegExp(`\\${separator}(?![^[]*\\])`)).pop()
 
-  if (context?.tailwindConfig?.prefix) {
-    format = prefixSelector(context.tailwindConfig.prefix, format)
-  }
-
-  format = format.replace(PARENT, `.${escapeClassName(candidate)}`)
+  // Parse the selector into an AST
+  let selector = selectorParser().astSync(current)
 
   // Normalize escaped classes, e.g.:
   //
@@ -59,65 +175,148 @@ export function finalizeSelector(format, { selector, candidate, context }) {
   //   base in selector: bg-\\[rgb\\(255\\,0\\,0\\)\\]
   //       escaped base: bg-\\[rgb\\(255\\2c 0\\2c 0\\)\\]
   //
-  selector = selectorParser((selectors) => {
-    return selectors.walkClasses((node) => {
-      if (node.raws && node.value.includes(base)) {
-        node.raws.value = escapeClassName(unescape(node.raws.value))
-      }
+  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))
 
-      return node
-    })
-  }).processSync(selector)
+  // 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.
-  selector = selector.replace(`.${escapeClassName(base)}`, format)
+  selector.walkClasses((node) => {
+    if (node.value !== base) {
+      return
+    }
+
+    let parent = node.parent
+    let formatNodes = formatAst.nodes[0].nodes
+
+    // Perf optimization: if the parent is a single class we can just replace it and be done
+    if (parent.nodes.length === 1) {
+      node.replaceWith(...formatNodes)
+      return
+    }
+
+    let simpleSelector = simpleSelectorForNode(node)
+    parent.insertBefore(simpleSelector[0], simpleStart)
+    parent.insertAfter(simpleSelector[simpleSelector.length - 1], simpleEnd)
+
+    for (let child of formatNodes) {
+      parent.insertBefore(simpleSelector[0], child)
+    }
+
+    node.remove()
+
+    // Re-sort the simple selector to ensure it's in the correct order
+    simpleSelector = simpleSelectorForNode(simpleStart)
+    let firstNode = parent.index(simpleStart)
+
+    parent.nodes.splice(
+      firstNode,
+      simpleSelector.length,
+      ...resortSelector(selectorParser.selector({ nodes: simpleSelector })).nodes
+    )
+
+    simpleStart.remove()
+    simpleEnd.remove()
+  })
 
   // Remove unnecessary pseudo selectors that we used as placeholders
-  return selectorParser((selectors) => {
-    return selectors.map((selector) => {
-      selector.walkPseudos((p) => {
-        if (selectorFunctions.has(p.value)) {
-          p.replaceWith(p.nodes)
-        }
-
-        return p
+  selector.walkPseudos((p) => {
+    if (p.value === MERGE) {
+      p.replaceWith(p.nodes)
+    }
+  })
+
+  // Move pseudo elements to the end of the selector (if necessary)
+  selector.each((sel) => {
+    let pseudoElements = collectPseudoElements(sel)
+    if (pseudoElements.length > 0) {
+      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(),
       })
+    }
+  })
+
+  // 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()) })
+    )
 
-      // 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))
-          }
-        }
-
-        return nodes
-      }
-
-      let pseudoElements = collectPseudoElements(selector)
-      if (pseudoElements.length > 0) {
-        selector.nodes.push(pseudoElements.sort(sortSelector))
-      }
-
-      return selector
-    })
-  }).processSync(selector)
+    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
@@ -127,7 +326,49 @@ export function finalizeSelector(format, { selector, candidate, context }) {
 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
@@ -169,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/getAllConfigs.js

@@ -9,6 +9,25 @@ export default function getAllConfigs(config) {
 
   const features = {
     // Add experimental configs here...
+    respectDefaultRingColorOpacity: {
+      theme: {
+        ringColor: ({ theme }) => ({
+          DEFAULT: '#3b82f67f',
+          ...theme('colors'),
+        }),
+      },
+    },
+
+    disableColorOpacityUtilitiesByDefault: {
+      corePlugins: {
+        backgroundOpacity: false,
+        borderOpacity: false,
+        divideOpacity: false,
+        placeholderOpacity: false,
+        ringOpacity: false,
+        textOpacity: false,
+      },
+    },
   }
 
   const experimentals = Object.keys(features)

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

@@ -3,7 +3,7 @@ import colors from 'picocolors'
 let alreadyShown = new Set()
 
 function log(type, messages, key) {
-  if (process.env.JEST_WORKER_ID !== undefined) return
+  if (typeof process !== 'undefined' && process.env.JEST_WORKER_ID) return
 
   if (key && alreadyShown.has(key)) return
   if (key) alreadyShown.add(key)

package/src/util/nameClass.js

@@ -22,5 +22,9 @@ export function formatClass(classPrefix, key) {
     return `-${classPrefix}${key}`
   }
 
+  if (key.startsWith('/')) {
+    return `${classPrefix}${key}`
+  }
+
   return `${classPrefix}-${key}`
 }

package/src/util/negateValue.js

@@ -10,7 +10,15 @@ export default function (value) {
     return value.replace(/^[+-]?/, (sign) => (sign === '-' ? '' : '-'))
   }
 
-  if (value.includes('var(') || value.includes('calc(')) {
-    return `calc(${value} * -1)`
+  // What functions we support negating numeric values for
+  // var() isn't inherently a numeric function but we support it anyway
+  // The trigonometric functions are omitted because you'll need to use calc(…) with them _anyway_
+  // to produce generally useful results and that will be covered already
+  let numericFunctions = ['var', 'calc', 'min', 'max', 'clamp']
+
+  for (const fn of numericFunctions) {
+    if (value.includes(`${fn}(`)) {
+      return `calc(${value} * -1)`
+    }
   }
 }

package/src/util/normalizeConfig.js

@@ -56,9 +56,11 @@ export function normalizeConfig(config) {
 
     // When `config.content` is an object
     if (typeof config.content === 'object' && config.content !== null) {
-      // Only `files`, `extract` and `transform` can exist in `config.content`
+      // Only `files`, `relative`, `extract`, and `transform` can exist in `config.content`
       if (
-        Object.keys(config.content).some((key) => !['files', 'extract', 'transform'].includes(key))
+        Object.keys(config.content).some(
+          (key) => !['files', 'relative', 'extract', 'transform'].includes(key)
+        )
       ) {
         return false
       }
@@ -112,6 +114,14 @@ export function normalizeConfig(config) {
         ) {
           return false
         }
+
+        // `config.content.relative` is optional and can be a boolean
+        if (
+          typeof config.content.relative !== 'boolean' &&
+          typeof config.content.relative !== 'undefined'
+        ) {
+          return false
+        }
       }
 
       return true
@@ -140,6 +150,24 @@ export function normalizeConfig(config) {
     return []
   })()
 
+  // Normalize the `blocklist`
+  config.blocklist = (() => {
+    let { blocklist } = config
+
+    if (Array.isArray(blocklist)) {
+      if (blocklist.every((item) => typeof item === 'string')) {
+        return blocklist
+      }
+
+      log.warn('blocklist-invalid', [
+        'The `blocklist` option must be an array of strings.',
+        'https://tailwindcss.com/docs/content-configuration#discarding-classes',
+      ])
+    }
+
+    return []
+  })()
+
   // Normalize prefix option
   if (typeof config.prefix === 'function') {
     log.warn('prefix-function', [
@@ -154,6 +182,16 @@ export function normalizeConfig(config) {
 
   // Normalize the `content`
   config.content = {
+    relative: (() => {
+      let { content } = config
+
+      if (content?.relative) {
+        return content.relative
+      }
+
+      return config.future?.relativeContentPathsByDefault ?? false
+    })(),
+
     files: (() => {
       let { content, purge } = config
 
@@ -258,13 +296,5 @@ export function normalizeConfig(config) {
     }
   }
 
-  if (config.content.files.length === 0) {
-    log.warn('content-problems', [
-      'The `content` option in your Tailwind CSS configuration is missing or empty.',
-      'Configure your content sources or your generated CSS will be missing styles.',
-      'https://tailwindcss.com/docs/content-configuration',
-    ])
-  }
-
   return config
 }