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

package/src/lib/generateRules.js

@@ -3,19 +3,22 @@ import selectorParser from 'postcss-selector-parser'
 import parseObjectStyles from '../util/parseObjectStyles'
 import isPlainObject from '../util/isPlainObject'
 import prefixSelector from '../util/prefixSelector'
-import { updateAllClasses } from '../util/pluginUtils'
+import { updateAllClasses, filterSelectorsForClass, getMatchingTypes } from '../util/pluginUtils'
 import log from '../util/log'
 import * as sharedState from './sharedState'
 import { formatVariantSelector, finalizeSelector } from '../util/formatVariantSelector'
 import { asClass } from '../util/nameClass'
 import { normalize } from '../util/dataTypes'
-import isValidArbitraryValue from '../util/isValidArbitraryValue'
+import { isValidVariantFormatString, parseVariant } from './setupContextUtils'
+import isValidArbitraryValue from '../util/isSyntacticallyValidPropertyValue'
+import { splitAtTopLevelOnly } from '../util/splitAtTopLevelOnly.js'
+import { flagEnabled } from '../featureFlags'
 
 let classNameParser = selectorParser((selectors) => {
   return selectors.first.filter(({ type }) => type === 'class').pop().value
 })
 
-function getClassNameFromSelector(selector) {
+export function getClassNameFromSelector(selector) {
   return classNameParser.transformSync(selector)
 }
 
@@ -31,13 +34,24 @@ function* candidatePermutations(candidate) {
 
   while (lastIndex >= 0) {
     let dashIdx
+    let wasSlash = false
 
     if (lastIndex === Infinity && candidate.endsWith(']')) {
       let bracketIdx = candidate.indexOf('[')
 
       // If character before `[` isn't a dash or a slash, this isn't a dynamic class
       // eg. string[]
-      dashIdx = ['-', '/'].includes(candidate[bracketIdx - 1]) ? bracketIdx - 1 : -1
+      if (candidate[bracketIdx - 1] === '-') {
+        dashIdx = bracketIdx - 1
+      } else if (candidate[bracketIdx - 1] === '/') {
+        dashIdx = bracketIdx - 1
+        wasSlash = true
+      } else {
+        dashIdx = -1
+      }
+    } else if (lastIndex === Infinity && candidate.includes('/')) {
+      dashIdx = candidate.lastIndexOf('/')
+      wasSlash = true
     } else {
       dashIdx = candidate.lastIndexOf('-', lastIndex)
     }
@@ -47,11 +61,16 @@ function* candidatePermutations(candidate) {
     }
 
     let prefix = candidate.slice(0, dashIdx)
-    let modifier = candidate.slice(dashIdx + 1)
-
-    yield [prefix, modifier]
+    let modifier = candidate.slice(wasSlash ? dashIdx : dashIdx + 1)
 
     lastIndex = dashIdx - 1
+
+    // TODO: This feels a bit hacky
+    if (prefix === '' || modifier === '/') {
+      continue
+    }
+
+    yield [prefix, modifier]
   }
 }
 
@@ -97,12 +116,15 @@ function applyImportant(matches, classCandidate) {
   for (let [meta, rule] of matches) {
     let container = postcss.root({ nodes: [rule.clone()] })
     container.walkRules((r) => {
-      r.selector = updateAllClasses(r.selector, (className) => {
-        if (className === classCandidate) {
-          return `!${className}`
+      r.selector = updateAllClasses(
+        filterSelectorsForClass(r.selector, classCandidate),
+        (className) => {
+          if (className === classCandidate) {
+            return `!${className}`
+          }
+          return className
         }
-        return className
-      })
+      )
       r.walkDecls((d) => (d.important = true))
     })
     result.push([{ ...meta, important: true }, container.nodes[0]])
@@ -125,8 +147,62 @@ function applyVariant(variant, matches, context) {
     return matches
   }
 
+  /** @type {{modifier: string | null, value: string | null}} */
+  let args = { modifier: null, value: sharedState.NONE }
+
+  // Retrieve "modifier"
+  {
+    let match = /(.*)\/(.*)$/g.exec(variant)
+    if (match) {
+      variant = match[1]
+      args.modifier = match[2]
+
+      if (!flagEnabled(context.tailwindConfig, 'generalizedModifiers')) {
+        return []
+      }
+    }
+  }
+
+  // Retrieve "arbitrary value"
+  if (variant.endsWith(']') && !variant.startsWith('[')) {
+    // We either have:
+    //   @[200px]
+    //   group-[:hover]
+    //
+    // But we don't want:
+    //   @-[200px]        (`-` is incorrect)
+    //   group[:hover]    (`-` is missing)
+    let match = /(.)(-?)\[(.*)\]/g.exec(variant)
+    if (match) {
+      let [, char, seperator, value] = match
+      // @-[200px] case
+      if (char === '@' && seperator === '-') return []
+      // group[:hover] case
+      if (char !== '@' && seperator === '') return []
+
+      variant = variant.replace(`${seperator}[${value}]`, '')
+      args.value = value
+    }
+  }
+
+  // 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 = context.offsets.recordVariant(variant)
+
+    context.variantMap.set(variant, [[sort, fn]])
+  }
+
   if (context.variantMap.has(variant)) {
-    let variantFunctionTuples = context.variantMap.get(variant)
+    let isArbitraryVariant = isArbitraryValue(variant)
+    let variantFunctionTuples = context.variantMap.get(variant).slice()
     let result = []
 
     for (let [meta, rule] of matches) {
@@ -137,15 +213,17 @@ function applyVariant(variant, matches, context) {
 
       let container = postcss.root({ nodes: [rule.clone()] })
 
-      for (let [variantSort, variantFunction] of variantFunctionTuples) {
-        let clone = container.clone()
+      for (let [variantSort, variantFunction, containerFromArray] of variantFunctionTuples) {
+        let clone = (containerFromArray ?? container).clone()
         let collectedFormats = []
 
-        let originals = new Map()
-
         function prepareBackup() {
-          if (originals.size > 0) return // Already prepared, chicken out
-          clone.walkRules((rule) => originals.set(rule, rule.selector))
+          // Already prepared, chicken out
+          if (clone.raws.neededBackup) {
+            return
+          }
+          clone.raws.neededBackup = true
+          clone.walkRules((rule) => (rule.raws.originalSelector = rule.selector))
         }
 
         function modifySelectors(modifierFunction) {
@@ -185,25 +263,54 @@ function applyVariant(variant, matches, context) {
             clone.append(wrapper)
           },
           format(selectorFormat) {
-            collectedFormats.push(selectorFormat)
+            collectedFormats.push({
+              format: selectorFormat,
+              isArbitraryVariant,
+            })
           },
+          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([
+              context.offsets.applyParallelOffset(variantSort, idx),
+              variantFunction,
+
+              // If the clone has been modified we have to pass that back
+              // though so each rule can use the modified container
+              clone.clone(),
+            ])
+          }
+          continue
+        }
+
         if (typeof ruleWithVariant === 'string') {
-          collectedFormats.push(ruleWithVariant)
+          collectedFormats.push({
+            format: ruleWithVariant,
+            isArbitraryVariant,
+          })
         }
 
         if (ruleWithVariant === null) {
           continue
         }
 
-        // We filled the `originals`, therefore we assume that somebody touched
+        // We had to backup selectors, therefore we assume that somebody touched
         // `container` or `modifySelectors`. Let's see if they did, so that we
         // can restore the selectors, and collect the format strings.
-        if (originals.size > 0) {
+        if (clone.raws.neededBackup) {
+          delete clone.raws.neededBackup
           clone.walkRules((rule) => {
-            if (!originals.has(rule)) return
-            let before = originals.get(rule)
+            let before = rule.raws.originalSelector
+            if (!before) return
+            delete rule.raws.originalSelector
             if (before === rule.selector) return // No mutation happened
 
             let modified = rule.selector
@@ -229,7 +336,10 @@ function applyVariant(variant, matches, context) {
             //      modified (by plugin): .foo .foo\\:markdown > p
             //    rebuiltBase (internal): .foo\\:markdown > p
             //                    format: .foo &
-            collectedFormats.push(modified.replace(rebuiltBase, '&'))
+            collectedFormats.push({
+              format: modified.replace(rebuiltBase, '&'),
+              isArbitraryVariant,
+            })
             rule.selector = before
           })
         }
@@ -243,7 +353,11 @@ function applyVariant(variant, matches, context) {
         let withOffset = [
           {
             ...meta,
-            sort: variantSort | meta.sort,
+            sort: context.offsets.applyVariantOffset(
+              meta.sort,
+              variantSort,
+              Object.assign(args, context.variantOptions.get(variant))
+            ),
             collectedFormats: (meta.collectedFormats ?? []).concat(collectedFormats),
           },
           clone.nodes[0],
@@ -307,7 +421,7 @@ function isParsableNode(node) {
   let isParsable = true
 
   node.walkDecls((decl) => {
-    if (!isParsableCssValue(decl.name, decl.value)) {
+    if (!isParsableCssValue(decl.prop, decl.value)) {
       isParsable = false
       return false
     }
@@ -353,9 +467,11 @@ function extractArbitraryProperty(classCandidate, context) {
     return null
   }
 
+  let sort = context.offsets.arbitraryProperty()
+
   return [
     [
-      { sort: context.arbitraryPropertiesSort, layer: 'utilities' },
+      { sort, layer: 'utilities' },
       () => ({
         [asClass(classCandidate)]: {
           [property]: normalized,
@@ -407,18 +523,22 @@ function splitWithSeparator(input, separator) {
     return [sharedState.NOT_ON_DEMAND]
   }
 
-  return input.split(new RegExp(`\\${separator}(?![^[]*\\])`, 'g'))
+  return splitAtTopLevelOnly(input, separator)
 }
 
 function* recordCandidates(matches, classCandidate) {
   for (const match of matches) {
-    match[1].raws.tailwind = { ...match[1].raws.tailwind, classCandidate }
+    match[1].raws.tailwind = {
+      ...match[1].raws.tailwind,
+      classCandidate,
+      preserveSource: match[0].options?.preserveSource ?? false,
+    }
 
     yield match
   }
 }
 
-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
@@ -428,6 +548,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) => {
@@ -468,68 +597,133 @@ function* resolveMatches(candidate, context) {
       }
 
       if (matchesPerPlugin.length > 0) {
-        typesByMatches.set(matchesPerPlugin, sort.options?.type)
+        let matchingTypes = Array.from(
+          getMatchingTypes(
+            sort.options?.types ?? [],
+            modifier,
+            sort.options ?? {},
+            context.tailwindConfig
+          )
+        ).map(([_, type]) => type)
+
+        if (matchingTypes.length > 0) {
+          typesByMatches.set(matchesPerPlugin, matchingTypes)
+        }
+
         matches.push(matchesPerPlugin)
       }
     }
 
     if (isArbitraryValue(modifier)) {
-      // When generated arbitrary values are ambiguous, we can't know
-      // which to pick so don't generate any utilities for them
       if (matches.length > 1) {
-        let typesPerPlugin = matches.map((match) => new Set([...(typesByMatches.get(match) ?? [])]))
+        // Partition plugins in 2 categories so that we can start searching in the plugins that
+        // don't have `any` as a type first.
+        let [withAny, withoutAny] = matches.reduce(
+          (group, plugin) => {
+            let hasAnyType = plugin.some(([{ options }]) =>
+              options.types.some(({ type }) => type === 'any')
+            )
 
-        // Remove duplicates, so that we can detect proper unique types for each plugin.
-        for (let pluginTypes of typesPerPlugin) {
-          for (let type of pluginTypes) {
-            let removeFromOwnGroup = false
+            if (hasAnyType) {
+              group[0].push(plugin)
+            } else {
+              group[1].push(plugin)
+            }
+            return group
+          },
+          [[], []]
+        )
 
-            for (let otherGroup of typesPerPlugin) {
-              if (pluginTypes === otherGroup) continue
+        function findFallback(matches) {
+          // If only a single plugin matches, let's take that one
+          if (matches.length === 1) {
+            return matches[0]
+          }
 
-              if (otherGroup.has(type)) {
-                otherGroup.delete(type)
-                removeFromOwnGroup = true
+          // Otherwise, find the plugin that creates a valid rule given the arbitrary value, and
+          // also has the correct type which preferOnConflicts the plugin in case of clashes.
+          return matches.find((rules) => {
+            let matchingTypes = typesByMatches.get(rules)
+            return rules.some(([{ options }, rule]) => {
+              if (!isParsableNode(rule)) {
+                return false
               }
-            }
 
-            if (removeFromOwnGroup) pluginTypes.delete(type)
-          }
+              return options.types.some(
+                ({ type, preferOnConflict }) => matchingTypes.includes(type) && preferOnConflict
+              )
+            })
+          })
         }
 
-        let messages = []
-
-        for (let [idx, group] of typesPerPlugin.entries()) {
-          for (let type of group) {
-            let rules = matches[idx]
-              .map(([, rule]) => rule)
-              .flat()
-              .map((rule) =>
-                rule
-                  .toString()
-                  .split('\n')
-                  .slice(1, -1) // Remove selector and closing '}'
-                  .map((line) => line.trim())
-                  .map((x) => `      ${x}`) // Re-indent
-                  .join('\n')
-              )
-              .join('\n\n')
+        // Try to find a fallback plugin, because we already know that multiple plugins matched for
+        // the given arbitrary value.
+        let fallback = findFallback(withoutAny) ?? findFallback(withAny)
+        if (fallback) {
+          matches = [fallback]
+        }
 
-            messages.push(
-              `  Use \`${candidate.replace('[', `[${type}:`)}\` for \`${rules.trim()}\``
-            )
-            break
+        // We couldn't find a fallback plugin which means that there are now multiple plugins that
+        // generated css for the current candidate. This means that the result is ambiguous and this
+        // should not happen. We won't generate anything right now, so let's report this to the user
+        // by logging some options about what they can do.
+        else {
+          let typesPerPlugin = matches.map(
+            (match) => new Set([...(typesByMatches.get(match) ?? [])])
+          )
+
+          // Remove duplicates, so that we can detect proper unique types for each plugin.
+          for (let pluginTypes of typesPerPlugin) {
+            for (let type of pluginTypes) {
+              let removeFromOwnGroup = false
+
+              for (let otherGroup of typesPerPlugin) {
+                if (pluginTypes === otherGroup) continue
+
+                if (otherGroup.has(type)) {
+                  otherGroup.delete(type)
+                  removeFromOwnGroup = true
+                }
+              }
+
+              if (removeFromOwnGroup) pluginTypes.delete(type)
+            }
           }
-        }
 
-        log.warn([
-          `The class \`${candidate}\` is ambiguous and matches multiple utilities.`,
-          ...messages,
-          `If this is content and not a class, replace it with \`${candidate
-            .replace('[', '[')
-            .replace(']', ']')}\` to silence this warning.`,
-        ])
-        continue
+          let messages = []
+
+          for (let [idx, group] of typesPerPlugin.entries()) {
+            for (let type of group) {
+              let rules = matches[idx]
+                .map(([, rule]) => rule)
+                .flat()
+                .map((rule) =>
+                  rule
+                    .toString()
+                    .split('\n')
+                    .slice(1, -1) // Remove selector and closing '}'
+                    .map((line) => line.trim())
+                    .map((x) => `      ${x}`) // Re-indent
+                    .join('\n')
+                )
+                .join('\n\n')
+
+              messages.push(
+                `  Use \`${candidate.replace('[', `[${type}:`)}\` for \`${rules.trim()}\``
+              )
+              break
+            }
+          }
+
+          log.warn([
+            `The class \`${candidate}\` is ambiguous and matches multiple utilities.`,
+            ...messages,
+            `If this is content and not a class, replace it with \`${candidate
+              .replace('[', '[')
+              .replace(']', ']')}\` to silence this warning.`,
+          ])
+          continue
+        }
       }
 
       matches = matches.map((list) => list.filter((match) => isParsableNode(match[1])))
@@ -551,19 +745,13 @@ function* resolveMatches(candidate, context) {
       match[1].raws.tailwind = { ...match[1].raws.tailwind, candidate }
 
       // Apply final format selector
-      if (match[0].collectedFormats) {
-        let finalFormat = formatVariantSelector('&', ...match[0].collectedFormats)
-        let container = postcss.root({ nodes: [match[1].clone()] })
-        container.walkRules((rule) => {
-          if (inKeyframes(rule)) return
-
-          rule.selector = finalizeSelector(finalFormat, {
-            selector: rule.selector,
-            candidate,
-            context,
-          })
-        })
-        match[1] = container.nodes[0]
+      match = applyFinalFormat(match, { context, candidate, original })
+
+      // Skip rules with invalid selectors
+      // This will cause the candidate to be added to the "not class"
+      // cache skipping it entirely for future builds
+      if (match === null) {
+        continue
       }
 
       yield match
@@ -571,20 +759,105 @@ function* resolveMatches(candidate, context) {
   }
 }
 
+function applyFinalFormat(match, { context, candidate, original }) {
+  if (!match[0].collectedFormats) {
+    return match
+  }
+
+  let isValid = true
+  let finalFormat
+
+  try {
+    finalFormat = formatVariantSelector(match[0].collectedFormats, {
+      context,
+      candidate,
+    })
+  } catch {
+    // The format selector we produced is invalid
+    // This could be because:
+    // - A bug exists
+    // - A plugin introduced an invalid variant selector (ex: `addVariant('foo', '&;foo')`)
+    // - The user used an invalid arbitrary variant (ex: `[&;foo]:underline`)
+    // Either way the build will fail because of this
+    // We would rather that the build pass "silently" given that this could
+    // happen because of picking up invalid things when scanning content
+    // So we'll throw out the candidate instead
+
+    return null
+  }
+
+  let container = postcss.root({ nodes: [match[1].clone()] })
+
+  container.walkRules((rule) => {
+    if (inKeyframes(rule)) {
+      return
+    }
+
+    try {
+      rule.selector = finalizeSelector(rule.selector, finalFormat, {
+        candidate: original,
+        context,
+      })
+    } catch {
+      // If this selector is invalid we also want to skip it
+      // But it's likely that being invalid here means there's a bug in a plugin rather than too loosely matching content
+      isValid = false
+      return false
+    }
+  })
+
+  if (!isValid) {
+    return null
+  }
+
+  match[1] = container.nodes[0]
+
+  return match
+}
+
 function inKeyframes(rule) {
   return rule.parent && rule.parent.type === 'atrule' && rule.parent.name === 'keyframes'
 }
 
+function getImportantStrategy(important) {
+  if (important === true) {
+    return (rule) => {
+      if (inKeyframes(rule)) {
+        return
+      }
+
+      rule.walkDecls((d) => {
+        if (d.parent.type === 'rule' && !inKeyframes(d.parent)) {
+          d.important = true
+        }
+      })
+    }
+  }
+
+  if (typeof important === 'string') {
+    return (rule) => {
+      if (inKeyframes(rule)) {
+        return
+      }
+
+      rule.selectors = rule.selectors.map((selector) => {
+        return `${important} ${selector}`
+      })
+    }
+  }
+}
+
 function generateRules(candidates, context) {
   let allRules = []
+  let strategy = getImportantStrategy(context.tailwindConfig.important)
 
   for (let candidate of candidates) {
     if (context.notClassCache.has(candidate)) {
       continue
     }
 
-    if (context.classCache.has(candidate)) {
-      allRules.push(context.classCache.get(candidate))
+    if (context.candidateRuleCache.has(candidate)) {
+      allRules = allRules.concat(Array.from(context.candidateRuleCache.get(candidate)))
       continue
     }
 
@@ -596,47 +869,27 @@ function generateRules(candidates, context) {
     }
 
     context.classCache.set(candidate, matches)
-    allRules.push(matches)
-  }
 
-  // Strategy based on `tailwindConfig.important`
-  let strategy = ((important) => {
-    if (important === true) {
-      return (rule) => {
-        rule.walkDecls((d) => {
-          if (d.parent.type === 'rule' && !inKeyframes(d.parent)) {
-            d.important = true
-          }
-        })
-      }
-    }
+    let rules = context.candidateRuleCache.get(candidate) ?? new Set()
+    context.candidateRuleCache.set(candidate, rules)
 
-    if (typeof important === 'string') {
-      return (rule) => {
-        rule.selectors = rule.selectors.map((selector) => {
-          return `${important} ${selector}`
-        })
-      }
-    }
-  })(context.tailwindConfig.important)
+    for (const match of matches) {
+      let [{ sort, options }, rule] = match
 
-  return allRules.flat(1).map(([{ sort, layer, options }, rule]) => {
-    if (options.respectImportant) {
-      if (strategy) {
+      if (options.respectImportant && strategy) {
         let container = postcss.root({ nodes: [rule.clone()] })
-        container.walkRules((r) => {
-          if (inKeyframes(r)) {
-            return
-          }
-
-          strategy(r)
-        })
+        container.walkRules(strategy)
         rule = container.nodes[0]
       }
+
+      let newEntry = [sort, rule]
+      rules.add(newEntry)
+      context.ruleCache.add(newEntry)
+      allRules.push(newEntry)
     }
+  }
 
-    return [sort | context.layerOrder[layer], rule]
-  })
+  return allRules
 }
 
 function isArbitraryValue(input) {