tailwindcss 3.0.23 → 3.0.24

package/src/lib/expandApplyAtRules.js

@@ -5,6 +5,8 @@ import { resolveMatches } from './generateRules'
 import bigSign from '../util/bigSign'
 import escapeClassName from '../util/escapeClassName'
 
+/** @typedef {Map<string, [any, import('postcss').Rule[]]>} ApplyCache */
+
 function extractClasses(node) {
   let classes = new Set()
   let container = postcss.root({ nodes: [node.clone()] })
@@ -35,6 +37,131 @@ function prefix(context, selector) {
   return typeof prefix === 'function' ? prefix(selector) : prefix + selector
 }
 
+function* pathToRoot(node) {
+  yield node
+  while (node.parent) {
+    yield node.parent
+    node = node.parent
+  }
+}
+
+/**
+ * Only clone the node itself and not its children
+ *
+ * @param {*} node
+ * @param {*} overrides
+ * @returns
+ */
+function shallowClone(node, overrides = {}) {
+  let children = node.nodes
+  node.nodes = []
+
+  let tmp = node.clone(overrides)
+
+  node.nodes = children
+
+  return tmp
+}
+
+/**
+ * Clone just the nodes all the way to the top that are required to represent
+ * this singular rule in the tree.
+ *
+ * For example, if we have CSS like this:
+ * ```css
+ * @media (min-width: 768px) {
+ *   @supports (display: grid) {
+ *     .foo {
+ *       display: grid;
+ *       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ *     }
+ *   }
+ *
+ *   @supports (backdrop-filter: blur(1px)) {
+ *     .bar {
+ *       backdrop-filter: blur(1px);
+ *     }
+ *   }
+ *
+ *   .baz {
+ *     color: orange;
+ *   }
+ * }
+ * ```
+ *
+ * And we're cloning `.bar` it'll return a cloned version of what's required for just that single node:
+ *
+ * ```css
+ * @media (min-width: 768px) {
+ *   @supports (backdrop-filter: blur(1px)) {
+ *     .bar {
+ *       backdrop-filter: blur(1px);
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @param {import('postcss').Node} node
+ */
+function nestedClone(node) {
+  for (let parent of pathToRoot(node)) {
+    if (node === parent) {
+      continue
+    }
+
+    if (parent.type === 'root') {
+      break
+    }
+
+    node = shallowClone(parent, {
+      nodes: [node],
+    })
+  }
+
+  return node
+}
+
+/**
+ * @param {import('postcss').Root} root
+ */
+function buildLocalApplyCache(root, context) {
+  /** @type {ApplyCache} */
+  let cache = new Map()
+
+  let highestOffset = context.layerOrder.user >> 4n
+
+  root.walkRules((rule, idx) => {
+    // Ignore rules generated by Tailwind
+    for (let node of pathToRoot(rule)) {
+      if (node.raws.tailwind?.layer !== undefined) {
+        return
+      }
+    }
+
+    // Clone what's required to represent this singular rule in the tree
+    let container = nestedClone(rule)
+
+    for (let className of extractClasses(rule)) {
+      let list = cache.get(className) || []
+      cache.set(className, list)
+
+      list.push([
+        {
+          layer: 'user',
+          sort: BigInt(idx) + highestOffset,
+          important: false,
+        },
+        container,
+      ])
+    }
+  })
+
+  return cache
+}
+
+/**
+ * @returns {ApplyCache}
+ */
 function buildApplyCache(applyCandidates, context) {
   for (let candidate of applyCandidates) {
     if (context.notClassCache.has(candidate) || context.applyClassCache.has(candidate)) {
@@ -62,6 +189,43 @@ function buildApplyCache(applyCandidates, context) {
   return context.applyClassCache
 }
 
+/**
+ * Build a cache only when it's first used
+ *
+ * @param {() => ApplyCache} buildCacheFn
+ * @returns {ApplyCache}
+ */
+function lazyCache(buildCacheFn) {
+  let cache = null
+
+  return {
+    get: (name) => {
+      cache = cache || buildCacheFn()
+
+      return cache.get(name)
+    },
+    has: (name) => {
+      cache = cache || buildCacheFn()
+
+      return cache.has(name)
+    },
+  }
+}
+
+/**
+ * Take a series of multiple caches and merge
+ * them so they act like one large cache
+ *
+ * @param {ApplyCache[]} caches
+ * @returns {ApplyCache}
+ */
+function combineCaches(caches) {
+  return {
+    get: (name) => caches.flatMap((cache) => cache.get(name) || []),
+    has: (name) => caches.some((cache) => cache.has(name)),
+  }
+}
+
 function extractApplyCandidates(params) {
   let candidates = params.split(/[\s\t\n]+/g)
 
@@ -72,7 +236,7 @@ function extractApplyCandidates(params) {
   return [candidates, false]
 }
 
-function processApply(root, context) {
+function processApply(root, context, localCache) {
   let applyCandidates = new Set()
 
   // Collect all @apply rules and candidates
@@ -90,7 +254,7 @@ function processApply(root, context) {
   // Start the @apply process if we have rules with @apply in them
   if (applies.length > 0) {
     // Fill up some caches!
-    let applyClassCache = buildApplyCache(applyCandidates, context)
+    let applyClassCache = combineCaches([localCache, buildApplyCache(applyCandidates, context)])
 
     /**
      * When we have an apply like this:
@@ -140,7 +304,7 @@ function processApply(root, context) {
     for (let apply of applies) {
       let candidates = perParentApplies.get(apply.parent) || []
 
-      perParentApplies.set(apply.parent, candidates)
+      perParentApplies.set(apply.parent, [candidates, apply.source])
 
       let [applyCandidates, important] = extractApplyCandidates(apply.params)
 
@@ -178,7 +342,7 @@ function processApply(root, context) {
       }
     }
 
-    for (const [parent, candidates] of perParentApplies) {
+    for (const [parent, [candidates, atApplySource]] of perParentApplies) {
       let siblings = []
 
       for (let [applyCandidate, important, rules] of candidates) {
@@ -220,6 +384,12 @@ function processApply(root, context) {
           }
 
           let root = postcss.root({ nodes: [node.clone()] })
+
+          // Make sure every node in the entire tree points back at the @apply rule that generated it
+          root.walk((node) => {
+            node.source = atApplySource
+          })
+
           let canRewriteSelector =
             node.type !== 'atrule' || (node.type === 'atrule' && node.name !== 'keyframes')
 
@@ -296,12 +466,15 @@ function processApply(root, context) {
     }
 
     // Do it again, in case we have other `@apply` rules
-    processApply(root, context)
+    processApply(root, context, localCache)
   }
 }
 
 export default function expandApplyAtRules(context) {
   return (root) => {
-    processApply(root, context)
+    // Build a cache of the user's CSS so we can use it to resolve classes used by @apply
+    let localCache = lazyCache(() => buildLocalApplyCache(root, context))
+
+    processApply(root, context, localCache)
   }
 }

package/src/lib/expandTailwindAtRules.js

@@ -204,17 +204,29 @@ export default function expandTailwindAtRules(context) {
     // Replace any Tailwind directives with generated CSS
 
     if (layerNodes.base) {
-      layerNodes.base.before(cloneNodes([...baseNodes, ...defaultNodes], layerNodes.base.source))
+      layerNodes.base.before(
+        cloneNodes([...baseNodes, ...defaultNodes], layerNodes.base.source, {
+          layer: 'base',
+        })
+      )
       layerNodes.base.remove()
     }
 
     if (layerNodes.components) {
-      layerNodes.components.before(cloneNodes([...componentNodes], layerNodes.components.source))
+      layerNodes.components.before(
+        cloneNodes([...componentNodes], layerNodes.components.source, {
+          layer: 'components',
+        })
+      )
       layerNodes.components.remove()
     }
 
     if (layerNodes.utilities) {
-      layerNodes.utilities.before(cloneNodes([...utilityNodes], layerNodes.utilities.source))
+      layerNodes.utilities.before(
+        cloneNodes([...utilityNodes], layerNodes.utilities.source, {
+          layer: 'utilities',
+        })
+      )
       layerNodes.utilities.remove()
     }
 
@@ -234,10 +246,18 @@ export default function expandTailwindAtRules(context) {
     })
 
     if (layerNodes.variants) {
-      layerNodes.variants.before(cloneNodes(variantNodes, layerNodes.variants.source))
+      layerNodes.variants.before(
+        cloneNodes(variantNodes, layerNodes.variants.source, {
+          layer: 'variants',
+        })
+      )
       layerNodes.variants.remove()
     } else if (variantNodes.length > 0) {
-      root.append(cloneNodes(variantNodes, root.source))
+      root.append(
+        cloneNodes(variantNodes, root.source, {
+          layer: 'variants',
+        })
+      )
     }
 
     // If we've got a utility layer and no utilities are generated there's likely something wrong

package/src/lib/generateRules.js

@@ -88,7 +88,7 @@ function applyPrefix(matches, context) {
   return matches
 }
 
-function applyImportant(matches) {
+function applyImportant(matches, classCandidate) {
   if (matches.length === 0) {
     return matches
   }
@@ -98,7 +98,10 @@ function applyImportant(matches) {
     let container = postcss.root({ nodes: [rule.clone()] })
     container.walkRules((r) => {
       r.selector = updateAllClasses(r.selector, (className) => {
-        return `!${className}`
+        if (className === classCandidate) {
+          return `!${className}`
+        }
+        return className
       })
       r.walkDecls((d) => (d.important = true))
     })
@@ -300,6 +303,19 @@ function looksLikeUri(declaration) {
   }
 }
 
+function isParsableNode(node) {
+  let isParsable = true
+
+  node.walkDecls((decl) => {
+    if (!isParsableCssValue(decl.name, decl.value)) {
+      isParsable = false
+      return false
+    }
+  })
+
+  return isParsable
+}
+
 function isParsableCssValue(property, value) {
   // We don't want to to treat [https://example.com] as a custom property
   // Even though, according to the CSS grammar, it's a totally valid CSS declaration
@@ -453,60 +469,66 @@ function* resolveMatches(candidate, context) {
       }
     }
 
-    // Only keep the result of the very first plugin if we are dealing with
-    // arbitrary values, to protect against ambiguity.
-    if (isArbitraryValue(modifier) && matches.length > 1) {
-      let typesPerPlugin = matches.map((match) => new Set([...(typesByMatches.get(match) ?? [])]))
+    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) ?? [])]))
 
-      // 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
+        // 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
+            for (let otherGroup of typesPerPlugin) {
+              if (pluginTypes === otherGroup) continue
 
-            if (otherGroup.has(type)) {
-              otherGroup.delete(type)
-              removeFromOwnGroup = true
+              if (otherGroup.has(type)) {
+                otherGroup.delete(type)
+                removeFromOwnGroup = true
+              }
             }
-          }
 
-          if (removeFromOwnGroup) pluginTypes.delete(type)
+            if (removeFromOwnGroup) pluginTypes.delete(type)
+          }
         }
-      }
 
-      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')
+        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()}\``
             )
-            .join('\n\n')
-
-          messages.push(`  Use \`${candidate.replace('[', `[${type}:`)}\` for \`${rules.trim()}\``)
-          break
+            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
       }
 
-      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])))
     }
 
     matches = matches.flat()
@@ -514,7 +536,7 @@ function* resolveMatches(candidate, context) {
     matches = applyPrefix(matches, context)
 
     if (important) {
-      matches = applyImportant(matches, context)
+      matches = applyImportant(matches, classCandidate)
     }
 
     for (let variant of variants) {

package/src/lib/resolveDefaultsAtRules.js

@@ -120,7 +120,9 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
         }
 
         for (let [, selectors] of selectorGroups) {
-          let universalRule = postcss.rule()
+          let universalRule = postcss.rule({
+            source: universal.source,
+          })
 
           universalRule.selectors = [...selectors]
 
@@ -128,7 +130,9 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
           universal.before(universalRule)
         }
       } else {
-        let universalRule = postcss.rule()
+        let universalRule = postcss.rule({
+          source: universal.source,
+        })
 
         universalRule.selectors = ['*', '::before', '::after']
 

package/src/lib/setupContextUtils.js

@@ -20,6 +20,7 @@ import log from '../util/log'
 import negateValue from '../util/negateValue'
 import isValidArbitraryValue from '../util/isValidArbitraryValue'
 import { generateRules } from './generateRules'
+import { hasContentChanged } from './cacheInvalidation.js'
 
 function prefix(context, selector) {
   let prefix = context.tailwindConfig.prefix
@@ -84,12 +85,18 @@ function parseStyles(styles) {
   })
 }
 
-function getClasses(selector) {
+function getClasses(selector, mutate) {
   let parser = selectorParser((selectors) => {
     let allClasses = []
+
+    if (mutate) {
+      mutate(selectors)
+    }
+
     selectors.walkClasses((classNode) => {
       allClasses.push(classNode.value)
     })
+
     return allClasses
   })
   return parser.transformSync(selector)
@@ -100,8 +107,20 @@ function extractCandidates(node, state = { containsNonOnDemandable: false }, dep
 
   // Handle normal rules
   if (node.type === 'rule') {
+    // Ignore everything inside a :not(...). This allows you to write code like
+    // `div:not(.foo)`. If `.foo` is never found in your code, then we used to
+    // not generated it. But now we will ignore everything inside a `:not`, so
+    // that it still gets generated.
+    function ignoreNot(selectors) {
+      selectors.walkPseudos((pseudo) => {
+        if (pseudo.value === ':not') {
+          pseudo.remove()
+        }
+      })
+    }
+
     for (let selector of node.selectors) {
-      let classCandidates = getClasses(selector)
+      let classCandidates = getClasses(selector, ignoreNot)
       // At least one of the selectors contains non-"on-demandable" candidates.
       if (classCandidates.length === 0) {
         state.containsNonOnDemandable = true
@@ -116,9 +135,7 @@ function extractCandidates(node, state = { containsNonOnDemandable: false }, dep
   // Handle at-rules (which contains nested rules)
   else if (node.type === 'atrule') {
     node.walkRules((rule) => {
-      for (let classCandidate of rule.selectors.flatMap((selector) =>
-        getClasses(selector, state, depth + 1)
-      )) {
+      for (let classCandidate of rule.selectors.flatMap((selector) => getClasses(selector))) {
         classes.push(classCandidate)
       }
     })
@@ -230,17 +247,6 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
       // Preserved for backwards compatibility but not used in v3.0+
       return []
     },
-    addUserCss(userCss) {
-      for (let [identifier, rule] of withIdentifiers(userCss)) {
-        let offset = offsets.user++
-
-        if (!context.candidateRuleMap.has(identifier)) {
-          context.candidateRuleMap.set(identifier, [])
-        }
-
-        context.candidateRuleMap.get(identifier).push([{ sort: offset, layer: 'user' }, rule])
-      }
-    },
     addBase(base) {
       for (let [identifier, rule] of withIdentifiers(base)) {
         let prefixedIdentifier = prefixIdentifier(identifier, {})
@@ -521,15 +527,6 @@ function collectLayerPlugins(root) {
     }
   })
 
-  root.walkRules((rule) => {
-    // At this point it is safe to include all the left-over css from the
-    // user's css file. This is because the `@tailwind` and `@layer` directives
-    // will already be handled and will be removed from the css tree.
-    layerPlugins.push(function ({ addUserCss }) {
-      addUserCss(rule, { respectPrefix: false })
-    })
-  })
-
   return layerPlugins
 }
 
@@ -842,6 +839,8 @@ export function getContext(
     existingContext = context
   }
 
+  let cssDidChange = hasContentChanged(sourcePath, root)
+
   // If there's already a context in the cache and we don't need to
   // reset the context, return the cached context.
   if (existingContext) {
@@ -849,7 +848,7 @@ export function getContext(
       [...contextDependencies],
       getFileModifiedMap(existingContext)
     )
-    if (!contextDependenciesChanged) {
+    if (!contextDependenciesChanged && !cssDidChange) {
       return [existingContext, false]
     }
   }

package/src/lib/setupTrackingContext.js

@@ -112,7 +112,7 @@ function resolveChangedFiles(candidateFiles, fileModifiedMap) {
 // source path), or set up a new one (including setting up watchers and registering
 // plugins) then return it
 export default function setupTrackingContext(configOrPath) {
-  return ({ tailwindDirectives, registerDependency, applyDirectives }) => {
+  return ({ tailwindDirectives, registerDependency }) => {
     return (root, result) => {
       let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies] =
         getTailwindConfig(configOrPath)
@@ -125,7 +125,7 @@ export default function setupTrackingContext(configOrPath) {
       // being part of this trigger too, but it's tough because it's impossible
       // for a layer in one file to end up in the actual @tailwind rule in
       // another file since independent sources are effectively isolated.
-      if (tailwindDirectives.size > 0 || applyDirectives.size > 0) {
+      if (tailwindDirectives.size > 0) {
         // Add current css file as a context dependencies.
         contextDependencies.add(result.opts.from)
 
@@ -153,7 +153,7 @@ export default function setupTrackingContext(configOrPath) {
       // We may want to think about `@layer` being part of this trigger too, but it's tough
       // because it's impossible for a layer in one file to end up in the actual @tailwind rule
       // in another file since independent sources are effectively isolated.
-      if (tailwindDirectives.size > 0 || applyDirectives.size > 0) {
+      if (tailwindDirectives.size > 0) {
         let fileModifiedMap = getFileModifiedMap(context)
 
         // Add template paths as postcss dependencies.

package/src/lib/sharedState.js

@@ -5,6 +5,7 @@ export const env = {
 export const contextMap = new Map()
 export const configContextMap = new Map()
 export const contextSourcesMap = new Map()
+export const sourceHashMap = new Map()
 export const NOT_ON_DEMAND = new String('*')
 
 export function resolveDebug(debug) {

package/src/postcss-plugins/nesting/README.md

@@ -1,6 +1,6 @@
 # tailwindcss/nesting
 
-This is a PostCSS plugin that wraps [postcss-nested](https://github.com/postcss/postcss-nested) or [postcss-nesting](https://github.com/jonathantneal/postcss-nesting) and acts as a compatibility layer to make sure your nesting plugin of choice properly understands Tailwind's custom syntax like `@apply` and `@screen`.
+This is a PostCSS plugin that wraps [postcss-nested](https://github.com/postcss/postcss-nested) or [postcss-nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting) and acts as a compatibility layer to make sure your nesting plugin of choice properly understands Tailwind's custom syntax like `@apply` and `@screen`.
 
 Add it to your PostCSS configuration, somewhere before Tailwind itself:
 
@@ -18,7 +18,7 @@ module.exports = {
 
 By default, it uses the [postcss-nested](https://github.com/postcss/postcss-nested) plugin under the hood, which uses a Sass-like syntax and is the plugin that powers nesting support in the [Tailwind CSS plugin API](https://tailwindcss.com/docs/plugins#css-in-js-syntax).
 
-If you'd rather use [postcss-nesting](https://github.com/jonathantneal/postcss-nesting) (which is based on the work-in-progress [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) specification), first install the plugin alongside:
+If you'd rather use [postcss-nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting) (which is based on the work-in-progress [CSS Nesting](https://drafts.csswg.org/css-nesting-1/) specification), first install the plugin alongside:
 
 ```shell
 npm install postcss-nesting

package/src/postcss-plugins/nesting/plugin.js

@@ -39,6 +39,42 @@ export function nesting(opts = postcssNested) {
       decl.remove()
     })
 
+    /**
+     * Use a private PostCSS API to remove the "clean" flag from the entire AST.
+     * This is done because running process() on the AST will set the "clean"
+     * flag on all nodes, which we don't want.
+     *
+     * This causes downstream plugins using the visitor API to be skipped.
+     *
+     * This is guarded because the PostCSS API is not public
+     * and may change in future versions of PostCSS.
+     *
+     * See https://github.com/postcss/postcss/issues/1712 for more details
+     *
+     * @param {import('postcss').Node} node
+     */
+    function markDirty(node) {
+      if (!('markDirty' in node)) {
+        return
+      }
+
+      // Traverse the tree down to the leaf nodes
+      if (node.nodes) {
+        node.nodes.forEach((n) => markDirty(n))
+      }
+
+      // If it's a leaf node mark it as dirty
+      // We do this here because marking a node as dirty
+      // will walk up the tree and mark all parents as dirty
+      // resulting in a lot of unnecessary work if we did this
+      // for every single node
+      if (!node.nodes) {
+        node.markDirty()
+      }
+    }
+
+    markDirty(root)
+
     return root
   }
 }