tailwindcss 3.0.12 → 3.0.16

package/src/corePlugins.js

@@ -144,6 +144,7 @@ export let variantPlugins = {
       log.warn('darkmode-false', [
         'The `darkMode` option in your Tailwind CSS configuration is set to `false`, which now behaves the same as `media`.',
         'Change `darkMode` to `media` or remove it entirely.',
+        'https://tailwindcss.com/docs/upgrade-guide#remove-dark-mode-configuration',
       ])
     }
 

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'
 
@@ -204,9 +205,6 @@ export default function expandTailwindAtRules(context) {
 
     if (layerNodes.base) {
       layerNodes.base.before(cloneNodes([...baseNodes, ...defaultNodes], layerNodes.base.source))
-    }
-
-    if (layerNodes.base) {
       layerNodes.base.remove()
     }
 
@@ -220,11 +218,38 @@ 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 utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.',
+        '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/normalizeTailwindDirectives.js

@@ -49,6 +49,7 @@ export default function normalizeTailwindDirectives(root) {
         log.warn(`${atRule.name}-at-rule-deprecated`, [
           `The \`@${atRule.name}\` directive has been deprecated in Tailwind CSS v3.0.`,
           `Use \`@layer utilities\` or \`@layer components\` instead.`,
+          'https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer',
         ])
       }
       layerDirectives.add(atRule)

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

@@ -20,58 +20,6 @@ import log from '../util/log'
 import negateValue from '../util/negateValue'
 import isValidArbitraryValue from '../util/isValidArbitraryValue'
 
-function partitionRules(root) {
-  if (!root.walkAtRules) return [root]
-
-  let applyParents = new Set()
-  let rules = []
-
-  root.walkAtRules('apply', (rule) => {
-    applyParents.add(rule.parent)
-  })
-
-  if (applyParents.size === 0) {
-    rules.push(root)
-  }
-
-  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) {
-      rules.push(rule)
-      continue
-    }
-
-    for (let group of [...nodeGroups].reverse()) {
-      let clone = rule.clone({ nodes: [] })
-      clone.append(group)
-      rules.unshift(clone)
-      rule.after(clone)
-    }
-
-    rule.remove()
-  }
-
-  return rules
-}
-
 function parseVariantFormatString(input) {
   if (input.includes('{')) {
     if (!isBalanced(input)) throw new Error(`Your { and } are unbalanced.`)
@@ -284,9 +232,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
           context.candidateRuleMap.set(identifier, [])
         }
 
-        context.candidateRuleMap
-          .get(identifier)
-          .push(...partitionRules(rule).map((rule) => [{ sort: offset, layer: 'user' }, rule]))
+        context.candidateRuleMap.get(identifier).push([{ sort: offset, layer: 'user' }, rule])
       }
     },
     addBase(base) {
@@ -300,7 +246,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
         context.candidateRuleMap
           .get(prefixedIdentifier)
-          .push(...partitionRules(rule).map((rule) => [{ sort: offset, layer: 'base' }, rule]))
+          .push([{ sort: offset, layer: 'base' }, rule])
       }
     },
     /**
@@ -321,12 +267,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
         context.candidateRuleMap
           .get(prefixedIdentifier)
-          .push(
-            ...partitionRules(rule).map((rule) => [
-              { sort: offsets.base++, layer: 'defaults' },
-              rule,
-            ])
-          )
+          .push([{ sort: offsets.base++, layer: 'defaults' }, rule])
       }
     },
     addComponents(components, options) {
@@ -348,12 +289,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
         context.candidateRuleMap
           .get(prefixedIdentifier)
-          .push(
-            ...partitionRules(rule).map((rule) => [
-              { sort: offsets.components++, layer: 'components', options },
-              rule,
-            ])
-          )
+          .push([{ sort: offsets.components++, layer: 'components', options }, rule])
       }
     },
     addUtilities(utilities, options) {
@@ -375,12 +311,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
         context.candidateRuleMap
           .get(prefixedIdentifier)
-          .push(
-            ...partitionRules(rule).map((rule) => [
-              { sort: offsets.utilities++, layer: 'utilities', options },
-              rule,
-            ])
-          )
+          .push([{ sort: offsets.utilities++, layer: 'utilities', options }, rule])
       }
     },
     matchUtilities: function (utilities, options) {
@@ -725,7 +656,7 @@ function registerPlugins(plugins, context) {
         log.warn('root-regex', [
           'Regular expressions in `safelist` work differently in Tailwind CSS v3.0.',
           'Update your `safelist` configuration to eliminate this warning.',
-          // TODO: Add https://tw.wtf/regex-safelist
+          'https://tailwindcss.com/docs/content-configuration#safelisting-classes',
         ])
         continue
       }
@@ -783,6 +714,7 @@ function registerPlugins(plugins, context) {
         log.warn([
           `The safelist pattern \`${regex}\` doesn't match any Tailwind CSS classes.`,
           'Fix this pattern or remove it from your `safelist` configuration.',
+          'https://tailwindcss.com/docs/content-configuration#safelisting-classes',
         ])
       }
     }

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

@@ -0,0 +1,42 @@
+# 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`.
+
+Add it to your PostCSS configuration, somewhere before Tailwind itself:
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss/nesting'),
+    require('tailwindcss'),
+    require('autoprefixer'),
+  ]
+}
+```
+
+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:
+
+```shell
+npm install postcss-nesting
+```
+
+Then pass the plugin itself as an argument to `tailwindcss/nesting` in your PostCSS configuration:
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss/nesting')(require('postcss-nesting')),
+    require('tailwindcss'),
+    require('autoprefixer'),
+  ]
+}
+```
+
+This can also be helpful if for whatever reason you need to use a very specific version of `postcss-nested` and want to override the version we bundle with `tailwindcss/nesting` itself.
+

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

@@ -0,0 +1,13 @@
+import { nesting } from './plugin'
+
+export default Object.assign(
+  function (opts) {
+    return {
+      postcssPlugin: 'tailwindcss/nesting',
+      Once(root, { result }) {
+        return nesting(opts)(root, result)
+      },
+    }
+  },
+  { postcss: true }
+)

package/{nesting → src/postcss-plugins/nesting}/plugin.js

@@ -1,7 +1,7 @@
-let postcss = require('postcss')
-let postcssNested = require('postcss-nested')
+import postcss from 'postcss'
+import postcssNested from 'postcss-nested'
 
-module.exports = function nesting(opts = postcssNested) {
+export function nesting(opts = postcssNested) {
   return (root, result) => {
     root.walkAtRules('screen', (rule) => {
       rule.name = 'media'
@@ -14,7 +14,10 @@ module.exports = function nesting(opts = postcssNested) {
     })
 
     let plugin = (() => {
-      if (typeof opts === 'function') {
+      if (
+        typeof opts === 'function' ||
+        (typeof opts === 'object' && opts?.hasOwnProperty?.('postcssPlugin'))
+      ) {
         return opts
       }
 

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'
@@ -15,6 +16,7 @@ export default function processTailwindFeatures(setupContext) {
     let { tailwindDirectives, applyDirectives } = normalizeTailwindDirectives(root)
 
     detectNesting()(root, result)
+    partitionApplyAtRules()(root, result)
 
     let context = setupContext({
       tailwindDirectives,

package/src/util/normalizeConfig.js

@@ -124,7 +124,7 @@ export function normalizeConfig(config) {
     log.warn('purge-deprecation', [
       'The `purge`/`content` options have changed in Tailwind CSS v3.0.',
       'Update your configuration file to eliminate this warning.',
-      // TODO: Add https://tw.wtf/purge-deprecation
+      'https://tailwindcss.com/docs/upgrade-guide#configure-content-sources',
     ])
   }
 
@@ -145,7 +145,7 @@ export function normalizeConfig(config) {
     log.warn('prefix-function', [
       'As of Tailwind CSS v3.0, `prefix` cannot be a function.',
       'Update `prefix` in your configuration to be a string to eliminate this warning.',
-      // TODO: Add https://tw.wtf/prefix-function
+      'https://tailwindcss.com/docs/upgrade-guide#prefix-cannot-be-a-function',
     ])
     config.prefix = ''
   } else {
@@ -250,13 +250,21 @@ export function normalizeConfig(config) {
   for (let file of config.content.files) {
     if (typeof file === 'string' && /{([^,]*?)}/g.test(file)) {
       log.warn('invalid-glob-braces', [
-        `The glob pattern ${dim(file)} in your config is invalid.`,
-        `    Update it to ${dim(file.replace(/{([^,]*?)}/g, '$1'))} to silence this warning.`,
+        `The glob pattern ${dim(file)} in your Tailwind CSS configuration is invalid.`,
+        `Update it to ${dim(file.replace(/{([^,]*?)}/g, '$1'))} to silence this warning.`,
         // TODO: Add https://tw.wtf/invalid-glob-braces
       ])
       break
     }
   }
 
+  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
 }