tailwindcss 3.0.0-alpha.1 → 3.0.2

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,28 @@
 import chalk from 'chalk'
 import log from './util/log'
 
-const featureFlags = {
+let defaults = {
+  // TODO: Drop this once we can safely rely on optimizeUniversalDefaults being
+  // the default.
+  optimizeUniversalDefaults: process.env.NODE_ENV === 'test' ? true : false,
+
+  // 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,7 +44,7 @@ export function issueFlagNotices(config) {
   }
 
   if (experimentalFlagsEnabled(config).length > 0) {
-    const changes = experimentalFlagsEnabled(config)
+    let changes = experimentalFlagsEnabled(config)
       .map((s) => chalk.yellow(s))
       .join(', ')
 

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

@@ -2,6 +2,23 @@ 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
 
@@ -9,10 +26,12 @@ export default function (_context) {
         found = true
         nestedRule.warn(
           result,
-          // TODO: Improve this warning message
-          'Nested CSS detected, checkout the docs on how to support nesting: https://tailwindcss.com/docs/using-with-preprocessors#nesting'
+          [
+            '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/expandApplyAtRules.js

@@ -1,8 +1,24 @@
 import postcss from 'postcss'
+import parser from 'postcss-selector-parser'
 import { resolveMatches } from './generateRules'
 import bigSign from '../util/bigSign'
 import escapeClassName from '../util/escapeClassName'
 
+function containsBase(selector, classCandidateBase, separator) {
+  return parser((selectors) => {
+    let contains = false
+
+    selectors.walkClasses((classSelector) => {
+      if (classSelector.value.split(separator).pop() === classCandidateBase) {
+        contains = true
+        return false
+      }
+    })
+
+    return contains
+  }).transformSync(selector)
+}
+
 function prefix(context, selector) {
   let prefix = context.tailwindConfig.prefix
   return typeof prefix === 'function' ? prefix(selector) : prefix + selector
@@ -129,10 +145,10 @@ function processApply(root, context) {
     // TODO: Should we use postcss-selector-parser for this instead?
     function replaceSelector(selector, utilitySelectors, candidate) {
       let needle = `.${escapeClassName(candidate)}`
-      let utilitySelectorsList = utilitySelectors.split(/\s*,\s*/g)
+      let utilitySelectorsList = utilitySelectors.split(/\s*\,(?![^(]*\))\s*/g)
 
       return selector
-        .split(/\s*,\s*/g)
+        .split(/\s*\,(?![^(]*\))\s*/g)
         .map((s) => {
           let replaced = []
 
@@ -196,7 +212,18 @@ function processApply(root, context) {
       let siblings = []
 
       for (let [applyCandidate, important, rules] of candidates) {
+        let base = applyCandidate.split(context.tailwindConfig.separator).pop()
+
         for (let [meta, node] of rules) {
+          if (
+            containsBase(parent.selector, base, context.tailwindConfig.separator) &&
+            containsBase(node.selector, base, context.tailwindConfig.separator)
+          ) {
+            throw node.error(
+              `Circular dependency detected when using: \`@apply ${applyCandidate}\``
+            )
+          }
+
           let root = postcss.root({ nodes: [node.clone()] })
           let canRewriteSelector =
             node.type !== 'atrule' || (node.type === 'atrule' && node.name !== 'keyframes')

package/src/lib/expandTailwindAtRules.js

@@ -11,10 +11,14 @@ const PATTERNS = [
   /([^<>"'`\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('|')
+  /([^<>"'`\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
@@ -235,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

@@ -5,6 +5,10 @@ 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
@@ -112,7 +116,17 @@ function applyVariant(variant, matches, context) {
 
       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
@@ -127,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)
       }
     }
@@ -170,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]
@@ -238,7 +352,7 @@ function* resolveMatches(candidate, context) {
         }
       }
       // 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) {
@@ -319,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
     }
   }
@@ -352,28 +482,42 @@ 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]
   })
 }

package/src/lib/resolveDefaultsAtRules.js

@@ -2,60 +2,56 @@ import postcss from 'postcss'
 import selectorParser from 'postcss-selector-parser'
 import { flagEnabled } from '../featureFlags'
 
-function isPseudoElement(n) {
-  if (n.type !== 'pseudo') {
-    return false
-  }
-
-  return (
-    n.value.startsWith('::') ||
-    [':before', ':after', ':first-line', ':first-letter'].includes(n.value)
-  )
+let getNode = {
+  id(node) {
+    return selectorParser.attribute({
+      attribute: 'id',
+      operator: '=',
+      value: node.value,
+      quoteMark: '"',
+    })
+  },
 }
 
 function minimumImpactSelector(nodes) {
   let rest = nodes
-    // Keep all pseudo & combinator types (:not([hidden]) ~ :not([hidden]))
-    .filter((n) => n.type === 'pseudo' || n.type === 'combinator')
-    // Remove leading pseudo's (:hover, :focus, ...)
-    .filter((n, idx, all) => {
-      // Keep pseudo elements
-      if (isPseudoElement(n)) return true
+    .filter((node) => {
+      // Keep non-pseudo nodes
+      if (node.type !== 'pseudo') return true
+
+      // Keep pseudo nodes that have subnodes
+      // E.g.: `:not()` contains subnodes inside the parentheses
+      if (node.nodes.length > 0) return true
+
+      // Keep pseudo `elements`
+      // This implicitly means that we ignore pseudo `classes`
+      return (
+        node.value.startsWith('::') ||
+        [':before', ':after', ':first-line', ':first-letter'].includes(node.value)
+      )
+    })
+    .reverse()
 
-      if (idx === 0 && n.type === 'pseudo') return false
-      if (idx > 0 && n.type === 'pseudo' && all[idx - 1].type === 'pseudo') return false
+  let searchFor = new Set(['tag', 'class', 'id', 'attribute'])
 
-      return true
-    })
+  let splitPointIdx = rest.findIndex((n) => searchFor.has(n.type))
+  if (splitPointIdx === -1) return rest.reverse().join('').trim()
 
-  let [bestNode] = nodes
-
-  for (let [type, getNode = (n) => n] of [
-    ['class'],
-    [
-      'id',
-      (n) =>
-        selectorParser.attribute({
-          attribute: 'id',
-          operator: '=',
-          value: n.value,
-          quoteMark: '"',
-        }),
-    ],
-    ['attribute'],
-  ]) {
-    let match = nodes.find((n) => n.type === type)
-
-    if (match) {
-      bestNode = getNode(match)
-      break
-    }
+  let node = rest[splitPointIdx]
+  let bestNode = getNode[node.type] ? getNode[node.type](node) : node
+
+  rest = rest.slice(0, splitPointIdx)
+
+  let combinatorIdx = rest.findIndex((n) => n.type === 'combinator' && n.value === '>')
+  if (combinatorIdx !== -1) {
+    rest.splice(0, combinatorIdx)
+    rest.unshift(selectorParser.universal())
   }
 
-  return [bestNode, ...rest].join('').trim()
+  return [bestNode, ...rest.reverse()].join('').trim()
 }
 
-let elementSelectorParser = selectorParser((selectors) => {
+export let elementSelectorParser = selectorParser((selectors) => {
   return selectors.map((s) => {
     let nodes = s.split((n) => n.type === 'combinator' && n.value === ' ').pop()
     return minimumImpactSelector(nodes)
@@ -75,6 +71,8 @@ function extractElementSelector(selector) {
 export default function resolveDefaultsAtRules({ tailwindConfig }) {
   return (root) => {
     let variableNodeMap = new Map()
+
+    /** @type {Set<import('postcss').AtRule>} */
     let universals = new Set()
 
     root.walkAtRules('defaults', (rule) => {
@@ -94,31 +92,50 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
     })
 
     for (let universal of universals) {
-      let selectors = new Set()
+      /** @type {Map<string, Set<string>>} */
+      let selectorGroups = new Map()
 
       let rules = variableNodeMap.get(universal.params) ?? []
 
       for (let rule of rules) {
         for (let selector of extractElementSelector(rule.selector)) {
+          // If selector contains a vendor prefix after a pseudo element or class,
+          // we consider them separately because merging the declarations into
+          // a single rule will cause browsers that do not understand the
+          // vendor prefix to throw out the whole rule
+          let selectorGroupName =
+            selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__'
+
+          let selectors = selectorGroups.get(selectorGroupName) ?? new Set()
+          selectorGroups.set(selectorGroupName, selectors)
+
           selectors.add(selector)
         }
       }
 
-      if (selectors.size === 0) {
+      if (selectorGroups.size === 0) {
         universal.remove()
         continue
       }
 
-      let universalRule = postcss.rule()
-
       if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
-        universalRule.selectors = [...selectors]
+        for (let [, selectors] of selectorGroups) {
+          let universalRule = postcss.rule()
+
+          universalRule.selectors = [...selectors]
+
+          universalRule.append(universal.nodes.map((node) => node.clone()))
+          universal.before(universalRule)
+        }
       } else {
+        let universalRule = postcss.rule()
+
         universalRule.selectors = ['*', '::before', '::after']
+
+        universalRule.append(universal.nodes)
+        universal.before(universalRule)
       }
 
-      universalRule.append(universal.nodes)
-      universal.before(universalRule)
       universal.remove()
     }
   }