tailwindcss 3.0.11 → 3.0.15

package/src/lib/expandTailwindAtRules.js

@@ -2,6 +2,7 @@ import LRU from 'quick-lru'
 import * as sharedState from './sharedState'
 import { generateRules } from './generateRules'
 import bigSign from '../util/bigSign'
+import log from '../util/log'
 import cloneNodes from '../util/cloneNodes'
 import { defaultExtractor } from './defaultExtractor'
 
@@ -129,8 +130,6 @@ function buildStylesheet(rules, context) {
   return returnValue
 }
 
-export const DEFAULTS_LAYER = Symbol('defaults-layer')
-
 export default function expandTailwindAtRules(context) {
   return (root) => {
     let layerNodes = {
@@ -140,8 +139,6 @@ export default function expandTailwindAtRules(context) {
       variants: null,
     }
 
-    // let hasApply = false
-
     root.walkAtRules((rule) => {
       // Make sure this file contains Tailwind directives. If not, we can save
       // a lot of work and bail early. Also we don't have to register our touch
@@ -152,13 +149,6 @@ export default function expandTailwindAtRules(context) {
           layerNodes[rule.params] = rule
         }
       }
-
-      // We also want to check for @apply because the user can
-      // apply classes in an isolated environment like CSS
-      // modules and we still need to inject defaults
-      // if (rule.name === 'apply') {
-      //   hasApply = true
-      // }
     })
 
     if (Object.values(layerNodes).every((n) => n === null)) {
@@ -179,6 +169,8 @@ export default function expandTailwindAtRules(context) {
       getClassCandidates(transformer(content), extractor, candidates, seen)
     }
 
+    env.DEBUG && console.timeEnd('Reading changed files')
+
     // ---
 
     // Generate the actual CSS
@@ -212,21 +204,7 @@ export default function expandTailwindAtRules(context) {
     // Replace any Tailwind directives with generated CSS
 
     if (layerNodes.base) {
-      layerNodes.base.before(cloneNodes([...baseNodes], layerNodes.base.source))
-    }
-
-    // @defaults rules are unconditionally added first to ensure that
-    // using any utility that relies on defaults will work even when
-    // compiled in an isolated environment like CSS modules
-    if (context.tailwindConfig[DEFAULTS_LAYER] !== false) {
-      if (layerNodes.base) {
-        layerNodes.base.after(cloneNodes([...defaultNodes], root.source))
-      } else {
-        root.prepend(cloneNodes([...defaultNodes], root.source))
-      }
-    }
-
-    if (layerNodes.base) {
+      layerNodes.base.before(cloneNodes([...baseNodes, ...defaultNodes], layerNodes.base.source))
       layerNodes.base.remove()
     }
 
@@ -240,11 +218,37 @@ export default function expandTailwindAtRules(context) {
       layerNodes.utilities.remove()
     }
 
+    // We do post-filtering to not alter the emitted order of the variants
+    const variantNodes = Array.from(screenNodes).filter((node) => {
+      const parentLayer = node.raws.tailwind?.parentLayer
+
+      if (parentLayer === 'components') {
+        return layerNodes.components !== null
+      }
+
+      if (parentLayer === 'utilities') {
+        return layerNodes.utilities !== null
+      }
+
+      return true
+    })
+
     if (layerNodes.variants) {
-      layerNodes.variants.before(cloneNodes([...screenNodes], layerNodes.variants.source))
+      layerNodes.variants.before(cloneNodes(variantNodes, layerNodes.variants.source))
       layerNodes.variants.remove()
-    } else {
-      root.append(cloneNodes([...screenNodes], root.source))
+    } else if (variantNodes.length > 0) {
+      root.append(cloneNodes(variantNodes, root.source))
+    }
+
+    // If we've got a utility layer and no utilities are generated there's likely something wrong
+    const hasUtilityVariants = variantNodes.some(
+      (node) => node.raws.tailwind?.parentLayer === 'utilities'
+    )
+
+    if (layerNodes.utilities && utilityNodes.size === 0 && !hasUtilityVariants) {
+      log.warn('content-problems', [
+        'No utilities were generated there is likely a problem with the `content` key in the tailwind config. For more information see the documentation: https://tailwindcss.com/docs/content-configuration',
+      ])
     }
 
     // ---

package/src/lib/generateRules.js

@@ -216,6 +216,12 @@ function applyVariant(variant, matches, context) {
           })
         }
 
+        // This tracks the originating layer for the variant
+        // For example:
+        // .sm:underline {} is a variant of something in the utilities layer
+        // .sm:container {} is a variant of the container component
+        clone.nodes[0].raws.tailwind = { parentLayer: meta.layer }
+
         let withOffset = [
           {
             ...meta,

package/src/lib/partitionApplyAtRules.js

@@ -0,0 +1,52 @@
+function partitionRules(root) {
+  if (!root.walkAtRules) return
+
+  let applyParents = new Set()
+
+  root.walkAtRules('apply', (rule) => {
+    applyParents.add(rule.parent)
+  })
+
+  if (applyParents.size === 0) {
+    return
+  }
+
+  for (let rule of applyParents) {
+    let nodeGroups = []
+    let lastGroup = []
+
+    for (let node of rule.nodes) {
+      if (node.type === 'atrule' && node.name === 'apply') {
+        if (lastGroup.length > 0) {
+          nodeGroups.push(lastGroup)
+          lastGroup = []
+        }
+        nodeGroups.push([node])
+      } else {
+        lastGroup.push(node)
+      }
+    }
+
+    if (lastGroup.length > 0) {
+      nodeGroups.push(lastGroup)
+    }
+
+    if (nodeGroups.length === 1) {
+      continue
+    }
+
+    for (let group of [...nodeGroups].reverse()) {
+      let clone = rule.clone({ nodes: [] })
+      clone.append(group)
+      rule.after(clone)
+    }
+
+    rule.remove()
+  }
+}
+
+export default function expandApplyAtRules() {
+  return (root) => {
+    partitionRules(root)
+  }
+}

package/src/lib/resolveDefaultsAtRules.js

@@ -113,12 +113,12 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
         }
       }
 
-      if (selectorGroups.size === 0) {
-        universal.remove()
-        continue
-      }
-
       if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
+        if (selectorGroups.size === 0) {
+          universal.remove()
+          continue
+        }
+
         for (let [, selectors] of selectorGroups) {
           let universalRule = postcss.rule()
 

package/src/lib/setupContextUtils.js

@@ -89,39 +89,55 @@ function getClasses(selector) {
   return parser.transformSync(selector)
 }
 
-function extractCandidates(node) {
+function extractCandidates(node, state = { containsNonOnDemandable: false }, depth = 0) {
   let classes = []
 
+  // Handle normal rules
   if (node.type === 'rule') {
     for (let selector of node.selectors) {
       let classCandidates = getClasses(selector)
       // At least one of the selectors contains non-"on-demandable" candidates.
-      if (classCandidates.length === 0) return []
+      if (classCandidates.length === 0) {
+        state.containsNonOnDemandable = true
+      }
 
-      classes = [...classes, ...classCandidates]
+      for (let classCandidate of classCandidates) {
+        classes.push(classCandidate)
+      }
     }
-    return classes
   }
 
-  if (node.type === 'atrule') {
+  // Handle at-rules (which contains nested rules)
+  else if (node.type === 'atrule') {
     node.walkRules((rule) => {
-      classes = [...classes, ...rule.selectors.flatMap((selector) => getClasses(selector))]
+      for (let classCandidate of rule.selectors.flatMap((selector) =>
+        getClasses(selector, state, depth + 1)
+      )) {
+        classes.push(classCandidate)
+      }
     })
   }
 
+  if (depth === 0) {
+    return [state.containsNonOnDemandable || classes.length === 0, classes]
+  }
+
   return classes
 }
 
 function withIdentifiers(styles) {
   return parseStyles(styles).flatMap((node) => {
     let nodeMap = new Map()
-    let candidates = extractCandidates(node)
+    let [containsNonOnDemandableSelectors, candidates] = extractCandidates(node)
 
-    // If this isn't "on-demandable", assign it a universal candidate.
-    if (candidates.length === 0) {
-      return [['*', node]]
+    // If this isn't "on-demandable", assign it a universal candidate to always include it.
+    if (containsNonOnDemandableSelectors) {
+      candidates.unshift('*')
     }
 
+    // However, it could be that it also contains "on-demandable" candidates.
+    // E.g.: `span, .foo {}`, in that case it should still be possible to use
+    // `@apply foo` for example.
     return candidates.map((c) => {
       if (!nodeMap.has(node)) {
         nodeMap.set(node, node)
@@ -244,7 +260,6 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
       for (let [identifier, rule] of withIdentifiers(groups)) {
         let prefixedIdentifier = prefixIdentifier(identifier, {})
-        let offset = offsets.base++
 
         if (!context.candidateRuleMap.has(prefixedIdentifier)) {
           context.candidateRuleMap.set(prefixedIdentifier, [])
@@ -252,7 +267,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
         context.candidateRuleMap
           .get(prefixedIdentifier)
-          .push([{ sort: offset, layer: 'defaults' }, rule])
+          .push([{ sort: offsets.base++, layer: 'defaults' }, rule])
       }
     },
     addComponents(components, options) {
@@ -265,7 +280,6 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
       for (let [identifier, rule] of withIdentifiers(components)) {
         let prefixedIdentifier = prefixIdentifier(identifier, options)
-        let offset = offsets.components++
 
         classList.add(prefixedIdentifier)
 
@@ -275,7 +289,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
         context.candidateRuleMap
           .get(prefixedIdentifier)
-          .push([{ sort: offset, layer: 'components', options }, rule])
+          .push([{ sort: offsets.components++, layer: 'components', options }, rule])
       }
     },
     addUtilities(utilities, options) {
@@ -288,7 +302,6 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
       for (let [identifier, rule] of withIdentifiers(utilities)) {
         let prefixedIdentifier = prefixIdentifier(identifier, options)
-        let offset = offsets.utilities++
 
         classList.add(prefixedIdentifier)
 
@@ -298,7 +311,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
         context.candidateRuleMap
           .get(prefixedIdentifier)
-          .push([{ sort: offset, layer: 'utilities', options }, rule])
+          .push([{ sort: offsets.utilities++, layer: 'utilities', options }, rule])
       }
     },
     matchUtilities: function (utilities, options) {

package/src/processTailwindFeatures.js

@@ -6,6 +6,7 @@ import substituteScreenAtRules from './lib/substituteScreenAtRules'
 import resolveDefaultsAtRules from './lib/resolveDefaultsAtRules'
 import collapseAdjacentRules from './lib/collapseAdjacentRules'
 import collapseDuplicateDeclarations from './lib/collapseDuplicateDeclarations'
+import partitionApplyAtRules from './lib/partitionApplyAtRules'
 import detectNesting from './lib/detectNesting'
 import { createContext } from './lib/setupContextUtils'
 import { issueFlagNotices } from './featureFlags'
@@ -14,6 +15,9 @@ export default function processTailwindFeatures(setupContext) {
   return function (root, result) {
     let { tailwindDirectives, applyDirectives } = normalizeTailwindDirectives(root)
 
+    detectNesting()(root, result)
+    partitionApplyAtRules()(root, result)
+
     let context = setupContext({
       tailwindDirectives,
       applyDirectives,
@@ -37,7 +41,6 @@ export default function processTailwindFeatures(setupContext) {
 
     issueFlagNotices(context.tailwindConfig)
 
-    detectNesting(context)(root, result)
     expandTailwindAtRules(context)(root, result)
     expandApplyAtRules(context)(root, result)
     evaluateTailwindFunctions(context)(root, result)

package/src/util/normalizeConfig.js

@@ -258,5 +258,11 @@ export function normalizeConfig(config) {
     }
   }
 
+  if (config.content.files.length === 0) {
+    log.warn('content-problems', [
+      'The `content` key is missing or empty. Please populate the content key as Tailwind generates utilities on-demand based on the files that use them. For more information see the documentation: https://tailwindcss.com/docs/content-configuration',
+    ])
+  }
+
   return config
 }

package/src/util/pluginUtils.js

@@ -185,7 +185,7 @@ export function coerceValue(types, modifier, options, tailwindConfig) {
   // Find first matching type
   for (let type of [].concat(types)) {
     let result = typeMap[type](modifier, options, { tailwindConfig })
-    if (result) return [result, type]
+    if (result !== undefined) return [result, type]
   }
 
   return []