tailwindcss 3.0.24 → 3.1.0

package/src/lib/expandApplyAtRules.js

@@ -8,18 +8,39 @@ import escapeClassName from '../util/escapeClassName'
 /** @typedef {Map<string, [any, import('postcss').Rule[]]>} ApplyCache */
 
 function extractClasses(node) {
-  let classes = new Set()
+  /** @type {Map<string, Set<string>>} */
+  let groups = new Map()
+
   let container = postcss.root({ nodes: [node.clone()] })
 
   container.walkRules((rule) => {
     parser((selectors) => {
       selectors.walkClasses((classSelector) => {
+        let parentSelector = classSelector.parent.toString()
+
+        let classes = groups.get(parentSelector)
+        if (!classes) {
+          groups.set(parentSelector, (classes = new Set()))
+        }
+
         classes.add(classSelector.value)
       })
     }).processSync(rule.selector)
   })
 
-  return Array.from(classes)
+  let normalizedGroups = Array.from(groups.values(), (classes) => Array.from(classes))
+  let classes = normalizedGroups.flat()
+
+  return Object.assign(classes, { groups: normalizedGroups })
+}
+
+let selectorExtractor = parser((root) => root.nodes.map((node) => node.toString()))
+
+/**
+ * @param {string} ruleSelectors
+ */
+function extractSelectors(ruleSelectors) {
+  return selectorExtractor.transformSync(ruleSelectors)
 }
 
 function extractBaseCandidates(candidates, separator) {
@@ -252,222 +273,260 @@ function processApply(root, context, localCache) {
   })
 
   // Start the @apply process if we have rules with @apply in them
-  if (applies.length > 0) {
-    // Fill up some caches!
-    let applyClassCache = combineCaches([localCache, buildApplyCache(applyCandidates, context)])
-
-    /**
-     * When we have an apply like this:
-     *
-     * .abc {
-     *    @apply hover:font-bold;
-     * }
-     *
-     * What we essentially will do is resolve to this:
-     *
-     * .abc {
-     *    @apply .hover\:font-bold:hover {
-     *      font-weight: 500;
-     *    }
-     * }
-     *
-     * Notice that the to-be-applied class is `.hover\:font-bold:hover` and that the utility candidate was `hover:font-bold`.
-     * What happens in this function is that we prepend a `.` and escape the candidate.
-     * This will result in `.hover\:font-bold`
-     * Which means that we can replace `.hover\:font-bold` with `.abc` in `.hover\:font-bold:hover` resulting in `.abc:hover`
-     */
-    // TODO: Should we use postcss-selector-parser for this instead?
-    function replaceSelector(selector, utilitySelectors, candidate) {
-      let needle = `.${escapeClassName(candidate)}`
-      let utilitySelectorsList = utilitySelectors.split(/\s*\,(?![^(]*\))\s*/g)
-
-      return selector
-        .split(/\s*\,(?![^(]*\))\s*/g)
-        .map((s) => {
-          let replaced = []
-
-          for (let utilitySelector of utilitySelectorsList) {
-            let replacedSelector = utilitySelector.replace(needle, s)
-            if (replacedSelector === utilitySelector) {
-              continue
-            }
-            replaced.push(replacedSelector)
+  if (applies.length === 0) {
+    return
+  }
+
+  // Fill up some caches!
+  let applyClassCache = combineCaches([localCache, buildApplyCache(applyCandidates, context)])
+
+  /**
+   * When we have an apply like this:
+   *
+   * .abc {
+   *    @apply hover:font-bold;
+   * }
+   *
+   * What we essentially will do is resolve to this:
+   *
+   * .abc {
+   *    @apply .hover\:font-bold:hover {
+   *      font-weight: 500;
+   *    }
+   * }
+   *
+   * Notice that the to-be-applied class is `.hover\:font-bold:hover` and that the utility candidate was `hover:font-bold`.
+   * What happens in this function is that we prepend a `.` and escape the candidate.
+   * This will result in `.hover\:font-bold`
+   * Which means that we can replace `.hover\:font-bold` with `.abc` in `.hover\:font-bold:hover` resulting in `.abc:hover`
+   */
+  // TODO: Should we use postcss-selector-parser for this instead?
+  function replaceSelector(selector, utilitySelectors, candidate) {
+    let needle = `.${escapeClassName(candidate)}`
+    let needles = [...new Set([needle, needle.replace(/\\2c /g, '\\,')])]
+    let utilitySelectorsList = extractSelectors(utilitySelectors)
+
+    return extractSelectors(selector)
+      .map((s) => {
+        let replaced = []
+
+        for (let utilitySelector of utilitySelectorsList) {
+          let replacedSelector = utilitySelector
+          for (const needle of needles) {
+            replacedSelector = replacedSelector.replace(needle, s)
           }
-          return replaced.join(', ')
-        })
-        .join(', ')
-    }
+          if (replacedSelector === utilitySelector) {
+            continue
+          }
+          replaced.push(replacedSelector)
+        }
+        return replaced.join(', ')
+      })
+      .join(', ')
+  }
 
-    let perParentApplies = new Map()
+  let perParentApplies = new Map()
 
-    // Collect all apply candidates and their rules
-    for (let apply of applies) {
-      let candidates = perParentApplies.get(apply.parent) || []
+  // Collect all apply candidates and their rules
+  for (let apply of applies) {
+    let [candidates] = perParentApplies.get(apply.parent) || [[], apply.source]
 
-      perParentApplies.set(apply.parent, [candidates, apply.source])
+    perParentApplies.set(apply.parent, [candidates, apply.source])
 
-      let [applyCandidates, important] = extractApplyCandidates(apply.params)
+    let [applyCandidates, important] = extractApplyCandidates(apply.params)
 
-      if (apply.parent.type === 'atrule') {
-        if (apply.parent.name === 'screen') {
-          const screenType = apply.parent.params
+    if (apply.parent.type === 'atrule') {
+      if (apply.parent.name === 'screen') {
+        const screenType = apply.parent.params
 
-          throw apply.error(
-            `@apply is not supported within nested at-rules like @screen. We suggest you write this as @apply ${applyCandidates
-              .map((c) => `${screenType}:${c}`)
-              .join(' ')} instead.`
-          )
-        }
+        throw apply.error(
+          `@apply is not supported within nested at-rules like @screen. We suggest you write this as @apply ${applyCandidates
+            .map((c) => `${screenType}:${c}`)
+            .join(' ')} instead.`
+        )
+      }
+
+      throw apply.error(
+        `@apply is not supported within nested at-rules like @${apply.parent.name}. You can fix this by un-nesting @${apply.parent.name}.`
+      )
+    }
 
+    for (let applyCandidate of applyCandidates) {
+      if ([prefix(context, 'group'), prefix(context, 'peer')].includes(applyCandidate)) {
+        // TODO: Link to specific documentation page with error code.
+        throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`)
+      }
+
+      if (!applyClassCache.has(applyCandidate)) {
         throw apply.error(
-          `@apply is not supported within nested at-rules like @${apply.parent.name}. You can fix this by un-nesting @${apply.parent.name}.`
+          `The \`${applyCandidate}\` class does not exist. If \`${applyCandidate}\` is a custom class, make sure it is defined within a \`@layer\` directive.`
         )
       }
 
-      for (let applyCandidate of applyCandidates) {
-        if ([prefix(context, 'group'), prefix(context, 'peer')].includes(applyCandidate)) {
-          // TODO: Link to specific documentation page with error code.
-          throw apply.error(`@apply should not be used with the '${applyCandidate}' utility`)
-        }
+      let rules = applyClassCache.get(applyCandidate)
 
-        if (!applyClassCache.has(applyCandidate)) {
-          throw apply.error(
-            `The \`${applyCandidate}\` class does not exist. If \`${applyCandidate}\` is a custom class, make sure it is defined within a \`@layer\` directive.`
+      candidates.push([applyCandidate, important, rules])
+    }
+  }
+
+  for (const [parent, [candidates, atApplySource]] of perParentApplies) {
+    let siblings = []
+
+    for (let [applyCandidate, important, rules] of candidates) {
+      let potentialApplyCandidates = [
+        applyCandidate,
+        ...extractBaseCandidates([applyCandidate], context.tailwindConfig.separator),
+      ]
+
+      for (let [meta, node] of rules) {
+        let parentClasses = extractClasses(parent)
+        let nodeClasses = extractClasses(node)
+
+        // When we encounter a rule like `.dark .a, .b { … }` we only want to be left with `[.dark, .a]` if the base applyCandidate is `.a` or with `[.b]` if the base applyCandidate is `.b`
+        // So we've split them into groups
+        nodeClasses = nodeClasses.groups
+          .filter((classList) =>
+            classList.some((className) => potentialApplyCandidates.includes(className))
+          )
+          .flat()
+
+        // Add base utility classes from the @apply node to the list of
+        // classes to check whether it intersects and therefore results in a
+        // circular dependency or not.
+        //
+        // E.g.:
+        // .foo {
+        //   @apply hover:a; // This applies "a" but with a modifier
+        // }
+        //
+        // We only have to do that with base classes of the `node`, not of the `parent`
+        // E.g.:
+        // .hover\:foo {
+        //   @apply bar;
+        // }
+        // .bar {
+        //   @apply foo;
+        // }
+        //
+        // This should not result in a circular dependency because we are
+        // just applying `.foo` and the rule above is `.hover\:foo` which is
+        // unrelated. However, if we were to apply `hover:foo` then we _did_
+        // have to include this one.
+        nodeClasses = nodeClasses.concat(
+          extractBaseCandidates(nodeClasses, context.tailwindConfig.separator)
+        )
+
+        let intersects = parentClasses.some((selector) => nodeClasses.includes(selector))
+        if (intersects) {
+          throw node.error(
+            `You cannot \`@apply\` the \`${applyCandidate}\` utility here because it creates a circular dependency.`
           )
         }
 
-        let rules = applyClassCache.get(applyCandidate)
+        let root = postcss.root({ nodes: [node.clone()] })
 
-        candidates.push([applyCandidate, important, rules])
-      }
-    }
+        // Make sure every node in the entire tree points back at the @apply rule that generated it
+        root.walk((node) => {
+          node.source = atApplySource
+        })
 
-    for (const [parent, [candidates, atApplySource]] of perParentApplies) {
-      let siblings = []
-
-      for (let [applyCandidate, important, rules] of candidates) {
-        for (let [meta, node] of rules) {
-          let parentClasses = extractClasses(parent)
-          let nodeClasses = extractClasses(node)
-
-          // Add base utility classes from the @apply node to the list of
-          // classes to check whether it intersects and therefore results in a
-          // circular dependency or not.
-          //
-          // E.g.:
-          // .foo {
-          //   @apply hover:a; // This applies "a" but with a modifier
-          // }
-          //
-          // We only have to do that with base classes of the `node`, not of the `parent`
-          // E.g.:
-          // .hover\:foo {
-          //   @apply bar;
-          // }
-          // .bar {
-          //   @apply foo;
-          // }
-          //
-          // This should not result in a circular dependency because we are
-          // just applying `.foo` and the rule above is `.hover\:foo` which is
-          // unrelated. However, if we were to apply `hover:foo` then we _did_
-          // have to include this one.
-          nodeClasses = nodeClasses.concat(
-            extractBaseCandidates(nodeClasses, context.tailwindConfig.separator)
-          )
+        let canRewriteSelector =
+          node.type !== 'atrule' || (node.type === 'atrule' && node.name !== 'keyframes')
+
+        if (canRewriteSelector) {
+          root.walkRules((rule) => {
+            // Let's imagine you have the following structure:
+            //
+            // .foo {
+            //   @apply bar;
+            // }
+            //
+            // @supports (a: b) {
+            //   .bar {
+            //     color: blue
+            //   }
+            //
+            //   .something-unrelated {}
+            // }
+            //
+            // In this case we want to apply `.bar` but it happens to be in
+            // an atrule node. We clone that node instead of the nested one
+            // because we still want that @supports rule to be there once we
+            // applied everything.
+            //
+            // However it happens to be that the `.something-unrelated` is
+            // also in that same shared @supports atrule. This is not good,
+            // and this should not be there. The good part is that this is
+            // a clone already and it can be safely removed. The question is
+            // how do we know we can remove it. Basically what we can do is
+            // match it against the applyCandidate that you want to apply. If
+            // it doesn't match the we can safely delete it.
+            //
+            // If we didn't do this, then the `replaceSelector` function
+            // would have replaced this with something that didn't exist and
+            // therefore it removed the selector altogether. In this specific
+            // case it would result in `{}` instead of `.something-unrelated {}`
+            if (!extractClasses(rule).some((candidate) => candidate === applyCandidate)) {
+              rule.remove()
+              return
+            }
 
-          let intersects = parentClasses.some((selector) => nodeClasses.includes(selector))
-          if (intersects) {
-            throw node.error(
-              `You cannot \`@apply\` the \`${applyCandidate}\` utility here because it creates a circular dependency.`
-            )
-          }
+            // Strip the important selector from the parent selector if at the beginning
+            let importantSelector =
+              typeof context.tailwindConfig.important === 'string'
+                ? context.tailwindConfig.important
+                : null
 
-          let root = postcss.root({ nodes: [node.clone()] })
+            // We only want to move the "important" selector if this is a Tailwind-generated utility
+            // We do *not* want to do this for user CSS that happens to be structured the same
+            let isGenerated = parent.raws.tailwind !== undefined
 
-          // Make sure every node in the entire tree points back at the @apply rule that generated it
-          root.walk((node) => {
-            node.source = atApplySource
-          })
+            let parentSelector =
+              isGenerated && importantSelector && parent.selector.indexOf(importantSelector) === 0
+                ? parent.selector.slice(importantSelector.length)
+                : parent.selector
 
-          let canRewriteSelector =
-            node.type !== 'atrule' || (node.type === 'atrule' && node.name !== 'keyframes')
-
-          if (canRewriteSelector) {
-            root.walkRules((rule) => {
-              // Let's imagine you have the following structure:
-              //
-              // .foo {
-              //   @apply bar;
-              // }
-              //
-              // @supports (a: b) {
-              //   .bar {
-              //     color: blue
-              //   }
-              //
-              //   .something-unrelated {}
-              // }
-              //
-              // In this case we want to apply `.bar` but it happens to be in
-              // an atrule node. We clone that node instead of the nested one
-              // because we still want that @supports rule to be there once we
-              // applied everything.
-              //
-              // However it happens to be that the `.something-unrelated` is
-              // also in that same shared @supports atrule. This is not good,
-              // and this should not be there. The good part is that this is
-              // a clone already and it can be safely removed. The question is
-              // how do we know we can remove it. Basically what we can do is
-              // match it against the applyCandidate that you want to apply. If
-              // it doesn't match the we can safely delete it.
-              //
-              // If we didn't do this, then the `replaceSelector` function
-              // would have replaced this with something that didn't exist and
-              // therefore it removed the selector altogether. In this specific
-              // case it would result in `{}` instead of `.something-unrelated {}`
-              if (!extractClasses(rule).some((candidate) => candidate === applyCandidate)) {
-                rule.remove()
-                return
-              }
-
-              rule.selector = replaceSelector(parent.selector, rule.selector, applyCandidate)
-
-              rule.walkDecls((d) => {
-                d.important = meta.important || important
-              })
-            })
-          }
+            rule.selector = replaceSelector(parentSelector, rule.selector, applyCandidate)
+
+            // And then re-add it if it was removed
+            if (importantSelector && parentSelector !== parent.selector) {
+              rule.selector = `${importantSelector} ${rule.selector}`
+            }
 
-          // Insert it
-          siblings.push([
-            // Ensure that when we are sorting, that we take the layer order into account
-            { ...meta, sort: meta.sort | context.layerOrder[meta.layer] },
-            root.nodes[0],
-          ])
+            rule.walkDecls((d) => {
+              d.important = meta.important || important
+            })
+          })
         }
+
+        // Insert it
+        siblings.push([
+          // Ensure that when we are sorting, that we take the layer order into account
+          { ...meta, sort: meta.sort | context.layerOrder[meta.layer] },
+          root.nodes[0],
+        ])
       }
+    }
 
-      // Inject the rules, sorted, correctly
-      let nodes = siblings.sort(([a], [z]) => bigSign(a.sort - z.sort)).map((s) => s[1])
+    // Inject the rules, sorted, correctly
+    let nodes = siblings.sort(([a], [z]) => bigSign(a.sort - z.sort)).map((s) => s[1])
 
-      // `parent` refers to the node at `.abc` in: .abc { @apply mt-2 }
-      parent.after(nodes)
-    }
+    // `parent` refers to the node at `.abc` in: .abc { @apply mt-2 }
+    parent.after(nodes)
+  }
 
-    for (let apply of applies) {
-      // If there are left-over declarations, just remove the @apply
-      if (apply.parent.nodes.length > 1) {
-        apply.remove()
-      } else {
-        // The node is empty, drop the full node
-        apply.parent.remove()
-      }
+  for (let apply of applies) {
+    // If there are left-over declarations, just remove the @apply
+    if (apply.parent.nodes.length > 1) {
+      apply.remove()
+    } else {
+      // The node is empty, drop the full node
+      apply.parent.remove()
     }
-
-    // Do it again, in case we have other `@apply` rules
-    processApply(root, context, localCache)
   }
+
+  // Do it again, in case we have other `@apply` rules
+  processApply(root, context, localCache)
 }
 
 export default function expandApplyAtRules(context) {

package/src/lib/expandTailwindAtRules.js

@@ -17,14 +17,14 @@ const builtInTransformers = {
   svelte: (content) => content.replace(/(?:^|\s)class:/g, ' '),
 }
 
-function getExtractor(tailwindConfig, fileExtension) {
-  let extractors = tailwindConfig.content.extract
+function getExtractor(context, fileExtension) {
+  let extractors = context.tailwindConfig.content.extract
 
   return (
     extractors[fileExtension] ||
     extractors.DEFAULT ||
     builtInExtractors[fileExtension] ||
-    builtInExtractors.DEFAULT
+    builtInExtractors.DEFAULT(context)
   )
 }
 
@@ -165,7 +165,7 @@ export default function expandTailwindAtRules(context) {
 
     for (let { content, extension } of context.changedContent) {
       let transformer = getTransformer(context.tailwindConfig, extension)
-      let extractor = getExtractor(context.tailwindConfig, extension)
+      let extractor = getExtractor(context, extension)
       getClassCandidates(transformer(content), extractor, candidates, seen)
     }
 

package/src/lib/generateRules.js

@@ -9,7 +9,10 @@ import * as sharedState from './sharedState'
 import { formatVariantSelector, finalizeSelector } from '../util/formatVariantSelector'
 import { asClass } from '../util/nameClass'
 import { normalize } from '../util/dataTypes'
+import { isValidVariantFormatString, parseVariant } from './setupContextUtils'
 import isValidArbitraryValue from '../util/isValidArbitraryValue'
+import { splitAtTopLevelOnly } from '../util/splitAtTopLevelOnly.js'
+import { flagEnabled } from '../featureFlags'
 
 let classNameParser = selectorParser((selectors) => {
   return selectors.first.filter(({ type }) => type === 'class').pop().value
@@ -125,8 +128,31 @@ function applyVariant(variant, matches, context) {
     return matches
   }
 
+  let args
+
+  // Find partial arbitrary variants
+  if (variant.endsWith(']') && !variant.startsWith('[')) {
+    args = variant.slice(variant.lastIndexOf('[') + 1, -1)
+    variant = variant.slice(0, variant.indexOf(args) - 1 /* - */ - 1 /* [ */)
+  }
+
+  // Register arbitrary variants
+  if (isArbitraryValue(variant) && !context.variantMap.has(variant)) {
+    let selector = normalize(variant.slice(1, -1))
+
+    if (!isValidVariantFormatString(selector)) {
+      return []
+    }
+
+    let fn = parseVariant(selector)
+
+    let sort = Array.from(context.variantOrder.values()).pop() << 1n
+    context.variantMap.set(variant, [[sort, fn]])
+    context.variantOrder.set(variant, sort)
+  }
+
   if (context.variantMap.has(variant)) {
-    let variantFunctionTuples = context.variantMap.get(variant)
+    let variantFunctionTuples = context.variantMap.get(variant).slice()
     let result = []
 
     for (let [meta, rule] of matches) {
@@ -187,8 +213,29 @@ function applyVariant(variant, matches, context) {
           format(selectorFormat) {
             collectedFormats.push(selectorFormat)
           },
+          args,
         })
 
+        // It can happen that a list of format strings is returned from within the function. In that
+        // case, we have to process them as well. We can use the existing `variantSort`.
+        if (Array.isArray(ruleWithVariant)) {
+          for (let [idx, variantFunction] of ruleWithVariant.entries()) {
+            // This is a little bit scary since we are pushing to an array of items that we are
+            // currently looping over. However, you can also think of it like a processing queue
+            // where you keep handling jobs until everything is done and each job can queue more
+            // jobs if needed.
+            variantFunctionTuples.push([
+              // TODO: This could have potential bugs if we shift the sort order from variant A far
+              // enough into the sort space of variant B. The chances are low, but if this happens
+              // then this might be the place too look at. One potential solution to this problem is
+              // reserving additional X places for these 'unknown' variants in between.
+              variantSort | BigInt(idx << ruleWithVariant.length),
+              variantFunction,
+            ])
+          }
+          continue
+        }
+
         if (typeof ruleWithVariant === 'string') {
           collectedFormats.push(ruleWithVariant)
         }
@@ -382,7 +429,11 @@ function* resolveMatchedPlugins(classCandidate, context) {
   const twConfigPrefix = context.tailwindConfig.prefix
 
   const twConfigPrefixLen = twConfigPrefix.length
-  if (candidatePrefix[twConfigPrefixLen] === '-') {
+
+  const hasMatchingPrefix =
+    candidatePrefix.startsWith(twConfigPrefix) || candidatePrefix.startsWith(`-${twConfigPrefix}`)
+
+  if (candidatePrefix[twConfigPrefixLen] === '-' && hasMatchingPrefix) {
     negative = true
     candidatePrefix = twConfigPrefix + candidatePrefix.slice(twConfigPrefixLen + 1)
   }
@@ -403,7 +454,7 @@ function splitWithSeparator(input, separator) {
     return [sharedState.NOT_ON_DEMAND]
   }
 
-  return input.split(new RegExp(`\\${separator}(?![^[]*\\])`, 'g'))
+  return Array.from(splitAtTopLevelOnly(input, separator))
 }
 
 function* recordCandidates(matches, classCandidate) {
@@ -414,7 +465,7 @@ function* recordCandidates(matches, classCandidate) {
   }
 }
 
-function* resolveMatches(candidate, context) {
+function* resolveMatches(candidate, context, original = candidate) {
   let separator = context.tailwindConfig.separator
   let [classCandidate, ...variants] = splitWithSeparator(candidate, separator).reverse()
   let important = false
@@ -424,6 +475,15 @@ function* resolveMatches(candidate, context) {
     classCandidate = classCandidate.slice(1)
   }
 
+  if (flagEnabled(context.tailwindConfig, 'variantGrouping')) {
+    if (classCandidate.startsWith('(') && classCandidate.endsWith(')')) {
+      let base = variants.slice().reverse().join(separator)
+      for (let part of splitAtTopLevelOnly(classCandidate.slice(1, -1), ',')) {
+        yield* resolveMatches(base + separator + part, context, original)
+      }
+    }
+  }
+
   // TODO: Reintroduce this in ways that doesn't break on false positives
   // function sortAgainst(toSort, against) {
   //   return toSort.slice().sort((a, z) => {
@@ -555,7 +615,11 @@ function* resolveMatches(candidate, context) {
 
           rule.selector = finalizeSelector(finalFormat, {
             selector: rule.selector,
-            candidate,
+            candidate: original,
+            base: candidate
+              .split(new RegExp(`\\${context?.tailwindConfig?.separator ?? ':'}(?![^[]*\\])`))
+              .pop(),
+
             context,
           })
         })