tailwindcss 3.0.0-alpha.2 → 3.0.3

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

@@ -15,6 +15,8 @@ const PATTERNS = [
   /([^<>"'`\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('|')
@@ -97,6 +99,7 @@ function buildStylesheet(rules, context) {
 
   let returnValue = {
     base: new Set(),
+    defaults: new Set(),
     components: new Set(),
     utilities: new Set(),
     variants: new Set(),
@@ -123,6 +126,11 @@ function buildStylesheet(rules, context) {
       continue
     }
 
+    if (sort & context.layerOrder.defaults) {
+      returnValue.defaults.add(rule)
+      continue
+    }
+
     if (sort & context.layerOrder.components) {
       returnValue.components.add(rule)
       continue
@@ -142,6 +150,8 @@ function buildStylesheet(rules, context) {
   return returnValue
 }
 
+export const DEFAULTS_LAYER = Symbol('defaults-layer')
+
 export default function expandTailwindAtRules(context) {
   return (root) => {
     let layerNodes = {
@@ -200,6 +210,7 @@ export default function expandTailwindAtRules(context) {
     env.DEBUG && console.timeEnd('Build stylesheet')
 
     let {
+      defaults: defaultNodes,
       base: baseNodes,
       components: componentNodes,
       utilities: utilityNodes,
@@ -210,6 +221,13 @@ export default function expandTailwindAtRules(context) {
 
     // Replace any Tailwind directives with generated CSS
 
+    // @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) {
+      root.prepend(cloneNodes([...defaultNodes], root.source))
+    }
+
     if (layerNodes.base) {
       layerNodes.base.before(cloneNodes([...baseNodes], layerNodes.base.source))
       layerNodes.base.remove()

package/src/lib/generateRules.js

@@ -6,6 +6,9 @@ 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
@@ -245,11 +248,65 @@ function parseRules(rule, cache, options = {}) {
   return [cache.get(rule), options]
 }
 
+const IS_VALID_PROPERTY_NAME = /^[a-z_-]/
+
+function isValidPropName(name) {
+  return IS_VALID_PROPERTY_NAME.test(name)
+}
+
+function isParsableCssValue(property, value) {
+  try {
+    postcss.parse(`a{${property}:${value}}`).toResult()
+    return true
+  } catch (err) {
+    return false
+  }
+}
+
+function extractArbitraryProperty(classCandidate, context) {
+  let [, property, value] = classCandidate.match(/^\[([a-zA-Z0-9-_]+):(\S+)\]$/) ?? []
+
+  if (value === undefined) {
+    return null
+  }
+
+  if (!isValidPropName(property)) {
+    return null
+  }
+
+  if (!isValidArbitraryValue(value)) {
+    return null
+  }
+
+  let normalized = normalize(value)
+
+  if (!isParsableCssValue(property, 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
 

package/src/lib/resolveDefaultsAtRules.js

@@ -71,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) => {
@@ -90,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()
     }
   }

package/src/lib/setupContextUtils.js

@@ -18,6 +18,7 @@ import { env } from './sharedState'
 import { toPath } from '../util/toPath'
 import log from '../util/log'
 import negateValue from '../util/negateValue'
+import isValidArbitraryValue from '../util/isValidArbitraryValue'
 
 function parseVariantFormatString(input) {
   if (input.includes('{')) {
@@ -130,64 +131,6 @@ function withIdentifiers(styles) {
   })
 }
 
-let matchingBrackets = new Map([
-  ['{', '}'],
-  ['[', ']'],
-  ['(', ')'],
-])
-let inverseMatchingBrackets = new Map(
-  Array.from(matchingBrackets.entries()).map(([k, v]) => [v, k])
-)
-
-let quotes = new Set(['"', "'", '`'])
-
-// Arbitrary values must contain balanced brackets (), [] and {}. Escaped
-// values don't count, and brackets inside quotes also don't count.
-//
-// E.g.: w-[this-is]w-[weird-and-invalid]
-// E.g.: w-[this-is\\]w-\\[weird-but-valid]
-// E.g.: content-['this-is-also-valid]-weirdly-enough']
-function isValidArbitraryValue(value) {
-  let stack = []
-  let inQuotes = false
-
-  for (let i = 0; i < value.length; i++) {
-    let char = value[i]
-
-    // Non-escaped quotes allow us to "allow" anything in between
-    if (quotes.has(char) && value[i - 1] !== '\\') {
-      inQuotes = !inQuotes
-    }
-
-    if (inQuotes) continue
-    if (value[i - 1] === '\\') continue // Escaped
-
-    if (matchingBrackets.has(char)) {
-      stack.push(char)
-    } else if (inverseMatchingBrackets.has(char)) {
-      let inverse = inverseMatchingBrackets.get(char)
-
-      // Nothing to pop from, therefore it is unbalanced
-      if (stack.length <= 0) {
-        return false
-      }
-
-      // Popped value must match the inverse value, otherwise it is unbalanced
-      if (stack.pop() !== inverse) {
-        return false
-      }
-    }
-  }
-
-  // If there is still something on the stack, it is also unbalanced
-  if (stack.length > 0) {
-    return false
-  }
-
-  // All good, totally balanced!
-  return true
-}
-
 function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offsets, classList }) {
   function getConfigValue(path, defaultValue) {
     return path ? dlv(tailwindConfig, path, defaultValue) : tailwindConfig
@@ -290,6 +233,28 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
           .push([{ sort: offset, layer: 'base' }, rule])
       }
     },
+    /**
+     * @param {string} group
+     * @param {Record<string, string | string[]>} declarations
+     */
+    addDefaults(group, declarations) {
+      const groups = {
+        [`@defaults ${group}`]: declarations,
+      }
+
+      for (let [identifier, rule] of withIdentifiers(groups)) {
+        let prefixedIdentifier = prefixIdentifier(identifier, {})
+        let offset = offsets.base++
+
+        if (!context.candidateRuleMap.has(prefixedIdentifier)) {
+          context.candidateRuleMap.set(prefixedIdentifier, [])
+        }
+
+        context.candidateRuleMap
+          .get(prefixedIdentifier)
+          .push([{ sort: offset, layer: 'defaults' }, rule])
+      }
+    },
     addComponents(components, options) {
       let defaultOptions = {
         respectPrefix: true,
@@ -575,6 +540,7 @@ function resolvePlugins(context, root) {
     variantPlugins['darkVariants'],
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
+    variantPlugins['orientationVariants'],
   ]
 
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]
@@ -584,6 +550,7 @@ function registerPlugins(plugins, context) {
   let variantList = []
   let variantMap = new Map()
   let offsets = {
+    defaults: 0n,
     base: 0n,
     components: 0n,
     utilities: 0n,
@@ -611,20 +578,26 @@ function registerPlugins(plugins, context) {
 
   let highestOffset = ((args) => args.reduce((m, e) => (e > m ? e : m)))([
     offsets.base,
+    offsets.defaults,
     offsets.components,
     offsets.utilities,
     offsets.user,
   ])
   let reservedBits = BigInt(highestOffset.toString(2).length)
 
+  // A number one less than the top range of the highest offset area
+  // so arbitrary properties are always sorted at the end.
+  context.arbitraryPropertiesSort = ((1n << reservedBits) << 0n) - 1n
+
   context.layerOrder = {
-    base: (1n << reservedBits) << 0n,
-    components: (1n << reservedBits) << 1n,
-    utilities: (1n << reservedBits) << 2n,
-    user: (1n << reservedBits) << 3n,
+    defaults: (1n << reservedBits) << 0n,
+    base: (1n << reservedBits) << 1n,
+    components: (1n << reservedBits) << 2n,
+    utilities: (1n << reservedBits) << 3n,
+    user: (1n << reservedBits) << 4n,
   }
 
-  reservedBits += 4n
+  reservedBits += 5n
 
   let offset = 0
   context.variantOrder = new Map(
@@ -678,7 +651,15 @@ function registerPlugins(plugins, context) {
         let utils = Array.isArray(util)
           ? (() => {
               let [utilName, options] = util
-              return Object.keys(options?.values ?? {}).map((value) => formatClass(utilName, value))
+              let classes = Object.keys(options?.values ?? {}).map((value) =>
+                formatClass(utilName, value)
+              )
+
+              if (options?.supportsNegativeValues) {
+                classes = [...classes, ...classes.map((cls) => '-' + cls)]
+              }
+
+              return classes
             })()
           : [util]
 

package/src/lib/substituteScreenAtRules.js

@@ -1,16 +1,19 @@
+import { normalizeScreens } from '../util/normalizeScreens'
 import buildMediaQuery from '../util/buildMediaQuery'
 
 export default function ({ tailwindConfig: { theme } }) {
   return function (css) {
     css.walkAtRules('screen', (atRule) => {
-      const screen = atRule.params
+      let screen = atRule.params
+      let screens = normalizeScreens(theme.screens)
+      let screenDefinition = screens.find(({ name }) => name === screen)
 
-      if (!theme.screens?.hasOwnProperty?.(screen)) {
+      if (!screenDefinition) {
         throw atRule.error(`No \`${screen}\` screen found.`)
       }
 
       atRule.name = 'media'
-      atRule.params = buildMediaQuery(theme.screens[screen])
+      atRule.params = buildMediaQuery(screenDefinition)
     })
   }
 }

package/src/util/buildMediaQuery.js

@@ -1,24 +1,20 @@
 export default function buildMediaQuery(screens) {
-  if (typeof screens === 'string') {
-    screens = { min: screens }
-  }
-
-  if (!Array.isArray(screens)) {
-    screens = [screens]
-  }
+  screens = Array.isArray(screens) ? screens : [screens]
 
   return screens
-    .map((screen) => {
-      if (screen?.hasOwnProperty?.('raw')) {
-        return screen.raw
-      }
+    .map((screen) =>
+      screen.values.map((screen) => {
+        if (screen.raw !== undefined) {
+          return screen.raw
+        }
 
-      return Object.entries(screen)
-        .map(([feature, value]) => {
-          feature = { min: 'min-width', max: 'max-width' }[feature] ?? feature
-          return `(${feature}: ${value})`
-        })
-        .join(' and ')
-    })
+        return [
+          screen.min && `(min-width: ${screen.min})`,
+          screen.max && `(max-width: ${screen.max})`,
+        ]
+          .filter(Boolean)
+          .join(' and ')
+      })
+    )
     .join(', ')
 }

package/src/util/dataTypes.js

@@ -1,6 +1,8 @@
 import { parseColor } from './color'
 import { parseBoxShadowValue } from './parseBoxShadowValue'
 
+let cssFunctions = ['min', 'max', 'clamp', 'calc']
+
 // Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types
 
 let COMMA = /,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
@@ -51,11 +53,11 @@ export function url(value) {
 }
 
 export function number(value) {
-  return !isNaN(Number(value))
+  return !isNaN(Number(value)) || cssFunctions.some((fn) => new RegExp(`^${fn}\\(.+?`).test(value))
 }
 
 export function percentage(value) {
-  return /%$/g.test(value) || /^calc\(.+?%\)/g.test(value)
+  return /%$/g.test(value) || cssFunctions.some((fn) => new RegExp(`^${fn}\\(.+?%`).test(value))
 }
 
 let lengthUnits = [
@@ -78,10 +80,13 @@ let lengthUnits = [
 ]
 let lengthUnitsPattern = `(?:${lengthUnits.join('|')})`
 export function length(value) {
-  return (
-    new RegExp(`${lengthUnitsPattern}$`).test(value) ||
-    new RegExp(`^calc\\(.+?${lengthUnitsPattern}`).test(value)
-  )
+  return value.split(UNDERSCORE).every((part) => {
+    return (
+      part === '0' ||
+      new RegExp(`${lengthUnitsPattern}$`).test(part) ||
+      cssFunctions.some((fn) => new RegExp(`^${fn}\\(.+?${lengthUnitsPattern}`).test(part))
+    )
+  })
 }
 
 let lineWidths = new Set(['thin', 'medium', 'thick'])

package/src/util/defaults.js

@@ -5,6 +5,12 @@ export function defaults(target, ...sources) {
         target[k] = source[k]
       }
     }
+
+    for (let k of Object.getOwnPropertySymbols(source)) {
+      if (!target?.hasOwnProperty?.(k)) {
+        target[k] = source[k]
+      }
+    }
   }
 
   return target

package/src/util/formatVariantSelector.js

@@ -30,7 +30,17 @@ export function formatVariantSelector(current, ...others) {
 }
 
 export function finalizeSelector(format, { selector, candidate, context }) {
-  let base = candidate.split(context?.tailwindConfig?.separator ?? ':').pop()
+  let separator = context?.tailwindConfig?.separator ?? ':'
+
+  // Split by the separator, but ignore the separator inside square brackets:
+  //
+  // E.g.: dark:lg:hover:[paint-order:markers]
+  //           ┬  ┬     ┬            ┬
+  //           │  │     │            ╰── We will not split here
+  //           ╰──┴─────┴─────────────── We will split here
+  //
+  let splitter = new RegExp(`\\${separator}(?![^[]*\\])`)
+  let base = candidate.split(splitter).pop()
 
   if (context?.tailwindConfig?.prefix) {
     format = prefixSelector(context.tailwindConfig.prefix, format)
@@ -74,11 +84,92 @@ export function finalizeSelector(format, { selector, candidate, context }) {
         return p
       })
 
+      // This will make sure to move pseudo's to the correct spot (the end for
+      // pseudo elements) because otherwise the selector will never work
+      // anyway.
+      //
+      // E.g.:
+      //  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
+      //  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
+      //
+      // `::before:hover` doesn't work, which means that we can make it work for you by flipping the order.
+      function collectPseudoElements(selector) {
+        let nodes = []
+
+        for (let node of selector.nodes) {
+          if (isPseudoElement(node)) {
+            nodes.push(node)
+            selector.removeChild(node)
+          }
+
+          if (node?.nodes) {
+            nodes.push(...collectPseudoElements(node))
+          }
+        }
+
+        return nodes
+      }
+
+      let pseudoElements = collectPseudoElements(selector)
+      if (pseudoElements.length > 0) {
+        selector.nodes.push(pseudoElements.sort(sortSelector))
+      }
+
       return selector
     })
   }).processSync(selector)
 }
 
+// Note: As a rule, double colons (::) should be used instead of a single colon
+// (:). This distinguishes pseudo-classes from pseudo-elements. However, since
+// this distinction was not present in older versions of the W3C spec, most
+// browsers support both syntaxes for the original pseudo-elements.
+let pseudoElementsBC = [':before', ':after', ':first-line', ':first-letter']
+
+// These pseudo-elements _can_ be combined with other pseudo selectors AND the order does matter.
+let pseudoElementExceptions = ['::file-selector-button']
+
+// This will make sure to move pseudo's to the correct spot (the end for
+// pseudo elements) because otherwise the selector will never work
+// anyway.
+//
+// E.g.:
+//  - `before:hover:text-center` would result in `.before\:hover\:text-center:hover::before`
+//  - `hover:before:text-center` would result in `.hover\:before\:text-center:hover::before`
+//
+// `::before:hover` doesn't work, which means that we can make it work
+// for you by flipping the order.
+function sortSelector(a, z) {
+  // Both nodes are non-pseudo's so we can safely ignore them and keep
+  // them in the same order.
+  if (a.type !== 'pseudo' && z.type !== 'pseudo') {
+    return 0
+  }
+
+  // If one of them is a combinator, we need to keep it in the same order
+  // because that means it will start a new "section" in the selector.
+  if ((a.type === 'combinator') ^ (z.type === 'combinator')) {
+    return 0
+  }
+
+  // One of the items is a pseudo and the other one isn't. Let's move
+  // the pseudo to the right.
+  if ((a.type === 'pseudo') ^ (z.type === 'pseudo')) {
+    return (a.type === 'pseudo') - (z.type === 'pseudo')
+  }
+
+  // Both are pseudo's, move the pseudo elements (except for
+  // ::file-selector-button) to the right.
+  return isPseudoElement(a) - isPseudoElement(z)
+}
+
+function isPseudoElement(node) {
+  if (node.type !== 'pseudo') return false
+  if (pseudoElementExceptions.includes(node.value)) return false
+
+  return node.value.startsWith('::') || pseudoElementsBC.includes(node.value)
+}
+
 function resolveFunctionArgument(haystack, needle, arg) {
   let startIdx = haystack.indexOf(arg ? `${needle}(${arg})` : needle)
   if (startIdx === -1) return null