tailwindcss 0.0.0-insiders.df011dc → 0.0.0-insiders.e2d5f21

package/src/css/preflight.css

@@ -12,6 +12,11 @@
   border-color: currentColor; /* 2 */
 }
 
+::before,
+::after {
+  --tw-content: '';
+}
+
 /*
 1. Use a consistent sensible line-height in all browsers.
 2. Prevent adjustments of font size after orientation changes in iOS.
@@ -283,7 +288,8 @@ legend {
 }
 
 ol,
-ul {
+ul,
+menu {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -317,6 +323,13 @@ button,
   cursor: pointer;
 }
 
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
 /*
 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)

package/src/featureFlags.js

@@ -1,18 +1,24 @@
 import chalk from 'chalk'
 import log from './util/log'
 
-const featureFlags = {
+let defaults = {
+  optimizeUniversalDefaults: true,
+}
+
+let featureFlags = {
   future: [],
   experimental: ['optimizeUniversalDefaults'],
 }
 
 export function flagEnabled(config, flag) {
   if (featureFlags.future.includes(flag)) {
-    return config.future === 'all' || (config?.future?.[flag] ?? false)
+    return config.future === 'all' || (config?.future?.[flag] ?? defaults[flag] ?? false)
   }
 
   if (featureFlags.experimental.includes(flag)) {
-    return config.experimental === 'all' || (config?.experimental?.[flag] ?? false)
+    return (
+      config.experimental === 'all' || (config?.experimental?.[flag] ?? defaults[flag] ?? false)
+    )
   }
 
   return false
@@ -34,13 +40,13 @@ export function issueFlagNotices(config) {
   }
 
   if (experimentalFlagsEnabled(config).length > 0) {
-    const changes = experimentalFlagsEnabled(config)
+    let changes = experimentalFlagsEnabled(config)
       .map((s) => chalk.yellow(s))
       .join(', ')
 
-    log.warn([
+    log.warn('experimental-flags-enabled', [
       `You have enabled experimental features: ${changes}`,
-      'Experimental features are not covered by semver, may introduce breaking changes, and can change at any time.',
+      'Experimental features in Tailwind CSS are not covered by semver, may introduce breaking changes, and can change at any time.',
     ])
   }
 }

package/src/lib/collapseDuplicateDeclarations.js

@@ -0,0 +1,28 @@
+export default function collapseDuplicateDeclarations() {
+  return (root) => {
+    root.walkRules((node) => {
+      let seen = new Map()
+      let droppable = new Set([])
+
+      node.walkDecls((decl) => {
+        // This could happen if we have nested selectors. In that case the
+        // parent will loop over all its declarations but also the declarations
+        // of nested rules. With this we ensure that we are shallowly checking
+        // declarations.
+        if (decl.parent !== node) {
+          return
+        }
+
+        if (seen.has(decl.prop)) {
+          droppable.add(seen.get(decl.prop))
+        }
+
+        seen.set(decl.prop, decl)
+      })
+
+      for (let decl of droppable) {
+        decl.remove()
+      }
+    })
+  }
+}

package/src/lib/detectNesting.js

@@ -0,0 +1,39 @@
+export default function (_context) {
+  return (root, result) => {
+    let found = false
+
+    root.walkAtRules('tailwind', (node) => {
+      if (found) return false
+
+      if (node.parent && node.parent.type !== 'root') {
+        found = true
+        node.warn(
+          result,
+          [
+            'Nested @tailwind rules were detected, but are not supported.',
+            "Consider using a prefix to scope Tailwind's classes: https://tailwindcss.com/docs/configuration#prefix",
+            'Alternatively, use the important selector strategy: https://tailwindcss.com/docs/configuration#selector-strategy',
+          ].join('\n')
+        )
+        return false
+      }
+    })
+
+    root.walkRules((rule) => {
+      if (found) return false
+
+      rule.walkRules((nestedRule) => {
+        found = true
+        nestedRule.warn(
+          result,
+          [
+            'Nested CSS was detected, but CSS nesting has not been configured correctly.',
+            'Please enable a CSS nesting plugin *before* Tailwind in your configuration.',
+            'See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting',
+          ].join('\n')
+        )
+        return false
+      })
+    })
+  }
+}

package/src/lib/evaluateTailwindFunctions.js

@@ -2,6 +2,7 @@ import dlv from 'dlv'
 import didYouMean from 'didyoumean'
 import transformThemeValue from '../util/transformThemeValue'
 import parseValue from 'postcss-value-parser'
+import { normalizeScreens } from '../util/normalizeScreens'
 import buildMediaQuery from '../util/buildMediaQuery'
 import { toPath } from '../util/toPath'
 
@@ -173,12 +174,14 @@ export default function ({ tailwindConfig: config }) {
     },
     screen: (node, screen) => {
       screen = screen.replace(/^['"]+/g, '').replace(/['"]+$/g, '')
+      let screens = normalizeScreens(config.theme.screens)
+      let screenDefinition = screens.find(({ name }) => name === screen)
 
-      if (config.theme.screens[screen] === undefined) {
+      if (!screenDefinition) {
         throw node.error(`The '${screen}' screen does not exist in your theme.`)
       }
 
-      return buildMediaQuery(config.theme.screens[screen])
+      return buildMediaQuery(screenDefinition)
     },
   }
   return (root) => {

package/src/lib/expandTailwindAtRules.js

@@ -1,16 +1,24 @@
+import LRU from 'quick-lru'
 import * as sharedState from './sharedState'
 import { generateRules } from './generateRules'
 import bigSign from '../util/bigSign'
 import cloneNodes from '../util/cloneNodes'
 
 let env = sharedState.env
-let contentMatchCache = sharedState.contentMatchCache
 
 const PATTERNS = [
-  "([^<>\"'`\\s]*\\['[^<>\"'`\\s]*'\\])", // `content-['hello']` but not `content-['hello']']`
-  '([^<>"\'`\\s]*\\["[^<>"\'`\\s]*"\\])', // `content-["hello"]` but not `content-["hello"]"]`
-  '([^<>"\'`\\s]*\\[[^<>"\'`\\s]+\\])', // `fill-[#bada55]`
-  '([^<>"\'`\\s]*[^<>"\'`\\s:])', // `px-1.5`, `uppercase` but not `uppercase:`
+  /([^<>"'`\s]*\[\w*'[^"`\s]*'?\])/.source, // font-['some_font',sans-serif]
+  /([^<>"'`\s]*\[\w*"[^"`\s]*"?\])/.source, // font-["some_font",sans-serif]
+  /([^<>"'`\s]*\[\w*\('[^"'`\s]*'\)\])/.source, // bg-[url('...')]
+  /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source, // bg-[url("...")]
+  /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source, // bg-[url('...'),url('...')]
+  /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source, // bg-[url("..."),url("...")]
+  /([^<>"'`\s]*\['[^"'`\s]*'\])/.source, // `content-['hello']` but not `content-['hello']']`
+  /([^<>"'`\s]*\["[^"'`\s]*"\])/.source, // `content-["hello"]` but not `content-["hello"]"]`
+  /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source, // `[content:'hello']` but not `[content:"hello"]`
+  /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source, // `[content:"hello"]` but not `[content:'hello']`
+  /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source, // `fill-[#bada55]`, `fill-[#bada55]/50`
+  /([^<>"'`\s]*[^"'`\s:])/.source, //  `px-1.5`, `uppercase` but not `uppercase:`
 ].join('|')
 const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g')
 const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g
@@ -31,21 +39,6 @@ const builtInTransformers = {
 
 function getExtractor(tailwindConfig, fileExtension) {
   let extractors = tailwindConfig.content.extract
-  let contentOptions = tailwindConfig.content.options
-
-  if (typeof extractors === 'function') {
-    extractors = {
-      DEFAULT: extractors,
-    }
-  }
-  if (contentOptions.defaultExtractor) {
-    extractors.DEFAULT = contentOptions.defaultExtractor
-  }
-  for (let { extensions, extractor } of contentOptions.extractors || []) {
-    for (let extension of extensions) {
-      extractors[extension] = extractor
-    }
-  }
 
   return (
     extractors[fileExtension] ||
@@ -58,12 +51,6 @@ function getExtractor(tailwindConfig, fileExtension) {
 function getTransformer(tailwindConfig, fileExtension) {
   let transformers = tailwindConfig.content.transform
 
-  if (typeof transformers === 'function') {
-    transformers = {
-      DEFAULT: transformers,
-    }
-  }
-
   return (
     transformers[fileExtension] ||
     transformers.DEFAULT ||
@@ -72,10 +59,16 @@ function getTransformer(tailwindConfig, fileExtension) {
   )
 }
 
+let extractorCache = new WeakMap()
+
 // Scans template contents for possible classes. This is a hot path on initial build but
 // not too important for subsequent builds. The faster the better though — if we can speed
 // up these regexes by 50% that could cut initial build time by like 20%.
-function getClassCandidates(content, extractor, contentMatchCache, candidates, seen) {
+function getClassCandidates(content, extractor, candidates, seen) {
+  if (!extractorCache.has(extractor)) {
+    extractorCache.set(extractor, new LRU({ maxSize: 25000 }))
+  }
+
   for (let line of content.split('\n')) {
     line = line.trim()
 
@@ -84,8 +77,8 @@ function getClassCandidates(content, extractor, contentMatchCache, candidates, s
     }
     seen.add(line)
 
-    if (contentMatchCache.has(line)) {
-      for (let match of contentMatchCache.get(line)) {
+    if (extractorCache.get(extractor).has(line)) {
+      for (let match of extractorCache.get(extractor).get(line)) {
         candidates.add(match)
       }
     } else {
@@ -96,7 +89,7 @@ function getClassCandidates(content, extractor, contentMatchCache, candidates, s
         candidates.add(match)
       }
 
-      contentMatchCache.set(line, lineMatchesSet)
+      extractorCache.get(extractor).set(line, lineMatchesSet)
     }
   }
 }
@@ -185,7 +178,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)
-      getClassCandidates(transformer(content), extractor, contentMatchCache, candidates, seen)
+      getClassCandidates(transformer(content), extractor, candidates, seen)
     }
 
     // ---
@@ -246,7 +239,6 @@ export default function expandTailwindAtRules(context) {
     if (env.DEBUG) {
       console.log('Potential classes: ', candidates.size)
       console.log('Active contexts: ', sharedState.contextSourcesMap.size)
-      console.log('Content match entries', contentMatchCache.size)
     }
 
     // Clear the cache for the changed files

package/src/lib/generateRules.js

@@ -4,6 +4,11 @@ import parseObjectStyles from '../util/parseObjectStyles'
 import isPlainObject from '../util/isPlainObject'
 import prefixSelector from '../util/prefixSelector'
 import { updateAllClasses } from '../util/pluginUtils'
+import log from '../util/log'
+import { formatVariantSelector, finalizeSelector } from '../util/formatVariantSelector'
+import { asClass } from '../util/nameClass'
+import { normalize } from '../util/dataTypes'
+import isValidArbitraryValue from '../util/isValidArbitraryValue'
 
 let classNameParser = selectorParser((selectors) => {
   return selectors.first.filter(({ type }) => type === 'class').pop().value
@@ -107,16 +112,21 @@ function applyVariant(variant, matches, context) {
     let result = []
 
     for (let [meta, rule] of matches) {
-      if (meta.options.respectVariants === false) {
-        result.push([meta, rule])
-        continue
-      }
-
       let container = postcss.root({ nodes: [rule.clone()] })
 
       for (let [variantSort, variantFunction] of variantFunctionTuples) {
         let clone = 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))
+        }
+
         function modifySelectors(modifierFunction) {
+          prepareBackup()
           clone.each((rule) => {
             if (rule.type !== 'rule') {
               return
@@ -131,20 +141,84 @@ function applyVariant(variant, matches, context) {
               })
             })
           })
+
           return clone
         }
 
         let ruleWithVariant = variantFunction({
-          container: clone,
+          // Public API
+          get container() {
+            prepareBackup()
+            return clone
+          },
           separator: context.tailwindConfig.separator,
           modifySelectors,
+
+          // Private API for now
+          wrap(wrapper) {
+            let nodes = clone.nodes
+            clone.removeAll()
+            wrapper.append(nodes)
+            clone.append(wrapper)
+          },
+          format(selectorFormat) {
+            collectedFormats.push(selectorFormat)
+          },
         })
 
+        if (typeof ruleWithVariant === 'string') {
+          collectedFormats.push(ruleWithVariant)
+        }
+
         if (ruleWithVariant === null) {
           continue
         }
 
-        let withOffset = [{ ...meta, sort: variantSort | meta.sort }, clone.nodes[0]]
+        // We filled the `originals`, 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) {
+          clone.walkRules((rule) => {
+            if (!originals.has(rule)) return
+            let before = originals.get(rule)
+            if (before === rule.selector) return // No mutation happened
+
+            let modified = rule.selector
+
+            // Rebuild the base selector, this is what plugin authors would do
+            // as well. E.g.: `${variant}${separator}${className}`.
+            // However, plugin authors probably also prepend or append certain
+            // classes, pseudos, ids, ...
+            let rebuiltBase = selectorParser((selectors) => {
+              selectors.walkClasses((classNode) => {
+                classNode.value = `${variant}${context.tailwindConfig.separator}${classNode.value}`
+              })
+            }).processSync(before)
+
+            // Now that we know the original selector, the new selector, and
+            // the rebuild part in between, we can replace the part that plugin
+            // authors need to rebuild with `&`, and eventually store it in the
+            // collectedFormats. Similar to what `format('...')` would do.
+            //
+            // E.g.:
+            //                   variant: foo
+            //                  selector: .markdown > p
+            //      modified (by plugin): .foo .foo\\:markdown > p
+            //    rebuiltBase (internal): .foo\\:markdown > p
+            //                    format: .foo &
+            collectedFormats.push(modified.replace(rebuiltBase, '&'))
+            rule.selector = before
+          })
+        }
+
+        let withOffset = [
+          {
+            ...meta,
+            sort: variantSort | meta.sort,
+            collectedFormats: (meta.collectedFormats ?? []).concat(collectedFormats),
+          },
+          clone.nodes[0],
+        ]
         result.push(withOffset)
       }
     }
@@ -174,21 +248,57 @@ function parseRules(rule, cache, options = {}) {
   return [cache.get(rule), options]
 }
 
+function extractArbitraryProperty(classCandidate, context) {
+  let [, property, value] = classCandidate.match(/^\[([a-zA-Z0-9-_]+):(\S+)\]$/) ?? []
+
+  if (value === undefined) {
+    return null
+  }
+
+  let normalized = normalize(value)
+
+  if (!isValidArbitraryValue(normalized)) {
+    return null
+  }
+
+  return [
+    [
+      { sort: context.arbitraryPropertiesSort, layer: 'utilities' },
+      () => ({
+        [asClass(classCandidate)]: {
+          [property]: normalized,
+        },
+      }),
+    ],
+  ]
+}
+
 function* resolveMatchedPlugins(classCandidate, context) {
   if (context.candidateRuleMap.has(classCandidate)) {
     yield [context.candidateRuleMap.get(classCandidate), 'DEFAULT']
   }
 
+  yield* (function* (arbitraryPropertyRule) {
+    if (arbitraryPropertyRule !== null) {
+      yield [arbitraryPropertyRule, 'DEFAULT']
+    }
+  })(extractArbitraryProperty(classCandidate, context))
+
   let candidatePrefix = classCandidate
   let negative = false
 
-  const twConfigPrefix = context.tailwindConfig.prefix || ''
+  const twConfigPrefix = context.tailwindConfig.prefix
+
   const twConfigPrefixLen = twConfigPrefix.length
   if (candidatePrefix[twConfigPrefixLen] === '-') {
     negative = true
     candidatePrefix = twConfigPrefix + candidatePrefix.slice(twConfigPrefixLen + 1)
   }
 
+  if (negative && context.candidateRuleMap.has(candidatePrefix)) {
+    yield [context.candidateRuleMap.get(candidatePrefix), '-DEFAULT']
+  }
+
   for (let [prefix, modifier] of candidatePermutations(candidatePrefix)) {
     if (context.candidateRuleMap.has(prefix)) {
       yield [context.candidateRuleMap.get(prefix), negative ? `-${modifier}` : modifier]
@@ -225,28 +335,94 @@ function* resolveMatches(candidate, context) {
 
   for (let matchedPlugins of resolveMatchedPlugins(classCandidate, context)) {
     let matches = []
+    let typesByMatches = new Map()
+
     let [plugins, modifier] = matchedPlugins
+    let isOnlyPlugin = plugins.length === 1
 
     for (let [sort, plugin] of plugins) {
+      let matchesPerPlugin = []
+
       if (typeof plugin === 'function') {
-        for (let ruleSet of [].concat(plugin(modifier))) {
+        for (let ruleSet of [].concat(plugin(modifier, { isOnlyPlugin }))) {
           let [rules, options] = parseRules(ruleSet, context.postCssNodeCache)
           for (let rule of rules) {
-            matches.push([{ ...sort, options: { ...sort.options, ...options } }, rule])
+            matchesPerPlugin.push([{ ...sort, options: { ...sort.options, ...options } }, rule])
           }
         }
       }
       // Only process static plugins on exact matches
-      else if (modifier === 'DEFAULT') {
+      else if (modifier === 'DEFAULT' || modifier === '-DEFAULT') {
         let ruleSet = plugin
         let [rules, options] = parseRules(ruleSet, context.postCssNodeCache)
         for (let rule of rules) {
-          matches.push([{ ...sort, options: { ...sort.options, ...options } }, rule])
+          matchesPerPlugin.push([{ ...sort, options: { ...sort.options, ...options } }, rule])
         }
       }
+
+      if (matchesPerPlugin.length > 0) {
+        typesByMatches.set(matchesPerPlugin, sort.options?.type)
+        matches.push(matchesPerPlugin)
+      }
     }
 
-    matches = applyPrefix(matches, 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) ?? [])]))
+
+      // 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)
+        }
+      }
+
+      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 = applyPrefix(matches.flat(), context)
 
     if (important) {
       matches = applyImportant(matches, context)
@@ -257,6 +433,22 @@ function* resolveMatches(candidate, context) {
     }
 
     for (let match of matches) {
+      // 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]
+      }
+
       yield match
     }
   }
@@ -290,30 +482,48 @@ function generateRules(candidates, context) {
     allRules.push(matches)
   }
 
-  return allRules.flat(1).map(([{ sort, layer, options }, rule]) => {
-    if (options.respectImportant) {
-      if (context.tailwindConfig.important === true) {
+  // 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
           }
         })
-      } else if (typeof context.tailwindConfig.important === 'string') {
+      }
+    }
+
+    if (typeof important === 'string') {
+      return (rule) => {
+        rule.selectors = rule.selectors.map((selector) => {
+          return `${important} ${selector}`
+        })
+      }
+    }
+  })(context.tailwindConfig.important)
+
+  return allRules.flat(1).map(([{ sort, layer, options }, rule]) => {
+    if (options.respectImportant) {
+      if (strategy) {
         let container = postcss.root({ nodes: [rule.clone()] })
         container.walkRules((r) => {
           if (inKeyframes(r)) {
             return
           }
 
-          r.selectors = r.selectors.map((selector) => {
-            return `${context.tailwindConfig.important} ${selector}`
-          })
+          strategy(r)
         })
         rule = container.nodes[0]
       }
     }
+
     return [sort | context.layerOrder[layer], rule]
   })
 }
 
+function isArbitraryValue(input) {
+  return input.startsWith('[') && input.endsWith(']')
+}
+
 export { resolveMatches, generateRules }

package/src/lib/normalizeTailwindDirectives.js

@@ -41,8 +41,9 @@ export default function normalizeTailwindDirectives(root) {
 
     if (['layer', 'responsive', 'variants'].includes(atRule.name)) {
       if (['responsive', 'variants'].includes(atRule.name)) {
-        log.warn([
-          `'@${atRule.name}' is deprecated, use '@layer utilities' or '@layer components' instead.`,
+        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.`,
         ])
       }
       layerDirectives.add(atRule)