tailwindcss 3.0.0-alpha.1 → 3.0.2

package/src/lib/setupContextUtils.js

@@ -17,6 +17,37 @@ import * as sharedState from './sharedState'
 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('{')) {
+    if (!isBalanced(input)) throw new Error(`Your { and } are unbalanced.`)
+
+    return input
+      .split(/{(.*)}/gim)
+      .flatMap((line) => parseVariantFormatString(line))
+      .filter(Boolean)
+  }
+
+  return [input.trim()]
+}
+
+function isBalanced(input) {
+  let count = 0
+
+  for (let char of input) {
+    if (char === '{') {
+      count++
+    } else if (char === '}') {
+      if (--count < 0) {
+        return false // unbalanced
+      }
+    }
+  }
+
+  return count === 0
+}
 
 function insertInto(list, value, { before = [] } = {}) {
   before = [].concat(before)
@@ -100,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
@@ -176,16 +149,41 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
       return identifier
     }
 
-    if (typeof context.tailwindConfig.prefix === 'function') {
-      return prefixSelector(context.tailwindConfig.prefix, `.${identifier}`).substr(1)
-    }
-
     return context.tailwindConfig.prefix + identifier
   }
 
   return {
     addVariant(variantName, variantFunctions, options = {}) {
-      variantFunctions = [].concat(variantFunctions)
+      variantFunctions = [].concat(variantFunctions).map((variantFunction) => {
+        if (typeof variantFunction !== 'string') {
+          // Safelist public API functions
+          return ({ modifySelectors, container, separator }) => {
+            return variantFunction({ modifySelectors, container, separator })
+          }
+        }
+
+        variantFunction = variantFunction
+          .replace(/\n+/g, '')
+          .replace(/\s{1,}/g, ' ')
+          .trim()
+
+        let fns = parseVariantFormatString(variantFunction)
+          .map((str) => {
+            if (!str.startsWith('@')) {
+              return ({ format }) => format(str)
+            }
+
+            let [, name, params] = /@(.*?) (.*)/g.exec(str)
+            return ({ wrap }) => wrap(postcss.atRule({ name, params }))
+          })
+          .reverse()
+
+        return (api) => {
+          for (let fn of fns) {
+            fn(api)
+          }
+        }
+      })
 
       insertInto(variantList, variantName, options)
       variantMap.set(variantName, variantFunctions)
@@ -300,7 +298,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         function wrapped(modifier, { isOnlyPlugin }) {
           let { type = 'any' } = options
           type = [].concat(type)
-          let [value, coercedType] = coerceValue(type, modifier, options.values, tailwindConfig)
+          let [value, coercedType] = coerceValue(type, modifier, options, tailwindConfig)
 
           if (value === undefined) {
             return []
@@ -352,7 +350,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         function wrapped(modifier, { isOnlyPlugin }) {
           let { type = 'any' } = options
           type = [].concat(type)
-          let [value, coercedType] = coerceValue(type, modifier, options.values, tailwindConfig)
+          let [value, coercedType] = coerceValue(type, modifier, options, tailwindConfig)
 
           if (value === undefined) {
             return []
@@ -518,7 +516,9 @@ function resolvePlugins(context, root) {
     variantPlugins['directionVariants'],
     variantPlugins['reducedMotionVariants'],
     variantPlugins['darkVariants'],
+    variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
+    variantPlugins['orientationVariants'],
   ]
 
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]
@@ -561,6 +561,10 @@ function registerPlugins(plugins, context) {
   ])
   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,
@@ -670,10 +674,16 @@ function registerPlugins(plugins, context) {
     for (let util of classList) {
       if (Array.isArray(util)) {
         let [utilName, options] = util
+        let negativeClasses = []
 
-        for (let value of Object.keys(options?.values ?? {})) {
-          output.push(formatClass(utilName, value))
+        for (let [key, value] of Object.entries(options?.values ?? {})) {
+          output.push(formatClass(utilName, key))
+          if (options?.supportsNegativeValues && negateValue(value)) {
+            negativeClasses.push(formatClass(utilName, `-${key}`))
+          }
         }
+
+        output.push(...negativeClasses)
       } else {
         output.push(util)
       }

package/src/lib/setupWatchingContext.js

@@ -84,6 +84,13 @@ function rebootWatcher(context, configPath, configDependencies, candidateFiles)
 
     watcher = chokidar.watch([...candidateFiles, ...configDependencies], {
       ignoreInitial: true,
+      awaitWriteFinish:
+        process.platform === 'win32'
+          ? {
+              stabilityThreshold: 50,
+              pollInterval: 10,
+            }
+          : false,
     })
 
     setWatcher(context, watcher)

package/src/lib/sharedState.js

@@ -1,7 +1,7 @@
 export const env = {
   TAILWIND_MODE: process.env.TAILWIND_MODE,
   NODE_ENV: process.env.NODE_ENV,
-  DEBUG: process.env.DEBUG !== undefined,
+  DEBUG: process.env.DEBUG !== undefined && process.env.DEBUG !== '0',
   TAILWIND_DISABLE_TOUCH: process.env.TAILWIND_DISABLE_TOUCH !== undefined,
   TAILWIND_TOUCH_DIR: process.env.TAILWIND_TOUCH_DIR,
 }

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

@@ -5,8 +5,10 @@ import evaluateTailwindFunctions from './lib/evaluateTailwindFunctions'
 import substituteScreenAtRules from './lib/substituteScreenAtRules'
 import resolveDefaultsAtRules from './lib/resolveDefaultsAtRules'
 import collapseAdjacentRules from './lib/collapseAdjacentRules'
+import collapseDuplicateDeclarations from './lib/collapseDuplicateDeclarations'
 import detectNesting from './lib/detectNesting'
 import { createContext } from './lib/setupContextUtils'
+import { issueFlagNotices } from './featureFlags'
 
 export default function processTailwindFeatures(setupContext) {
   return function (root, result) {
@@ -32,6 +34,8 @@ export default function processTailwindFeatures(setupContext) {
       )
     }
 
+    issueFlagNotices(context.tailwindConfig)
+
     detectNesting(context)(root, result)
     expandTailwindAtRules(context)(root, result)
     expandApplyAtRules(context)(root, result)
@@ -39,5 +43,6 @@ export default function processTailwindFeatures(setupContext) {
     substituteScreenAtRules(context)(root, result)
     resolveDefaultsAtRules(context)(root, result)
     collapseAdjacentRules(context)(root, result)
+    collapseDuplicateDeclarations(context)(root, result)
   }
 }

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

@@ -3,7 +3,7 @@ import transformThemeValue from './transformThemeValue'
 export default function createUtilityPlugin(
   themeKey,
   utilityVariations = [[themeKey, [themeKey]]],
-  { filterDefault = false, type = 'any' } = {}
+  { filterDefault = false, ...options } = {}
 ) {
   let transformValue = transformThemeValue(themeKey)
   return function ({ matchUtilities, theme }) {
@@ -24,12 +24,12 @@ export default function createUtilityPlugin(
           })
         }, {}),
         {
+          ...options,
           values: filterDefault
             ? Object.fromEntries(
                 Object.entries(theme(themeKey) ?? {}).filter(([modifier]) => modifier !== 'DEFAULT')
               )
             : theme(themeKey),
-          type,
         }
       )
     }

package/src/util/dataTypes.js

@@ -1,4 +1,7 @@
 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
 
@@ -7,7 +10,22 @@ let UNDERSCORE = /_(?![^(]*\))/g // Underscore separator that is not located bet
 
 // This is not a data type, but rather a function that can normalize the
 // correct values.
-export function normalize(value) {
+export function normalize(value, isRoot = true) {
+  // Keep raw strings if it starts with `url(`
+  if (value.includes('url(')) {
+    return value
+      .split(/(url\(.*?\))/g)
+      .filter(Boolean)
+      .map((part) => {
+        if (/^url\(.*?\)$/.test(part)) {
+          return part
+        }
+
+        return normalize(part, false)
+      })
+      .join('')
+  }
+
   // Convert `_` to ` `, except for escaped underscores `\_`
   value = value
     .replace(
@@ -18,10 +36,9 @@ export function normalize(value) {
     .replace(/\\_/g, '_')
 
   // Remove leftover whitespace
-  value = value.trim()
-
-  // Keep raw strings if it starts with `url(`
-  if (value.startsWith('url(')) return value
+  if (isRoot) {
+    value = value.trim()
+  }
 
   // Add spaces around operators inside calc() that do not follow an operator
   // or '('.
@@ -36,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 = [
@@ -63,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'])
@@ -74,6 +94,18 @@ export function lineWidth(value) {
   return lineWidths.has(value)
 }
 
+export function shadow(value) {
+  let parsedShadows = parseBoxShadowValue(normalize(value))
+
+  for (let parsedShadow of parsedShadows) {
+    if (!parsedShadow.valid) {
+      return false
+    }
+  }
+
+  return true
+}
+
 export function color(value) {
   let colors = 0
 

package/src/util/formatVariantSelector.js

@@ -0,0 +1,196 @@
+import selectorParser from 'postcss-selector-parser'
+import unescape from 'postcss-selector-parser/dist/util/unesc'
+import escapeClassName from '../util/escapeClassName'
+import prefixSelector from '../util/prefixSelector'
+
+let MERGE = ':merge'
+let PARENT = '&'
+
+export let selectorFunctions = new Set([MERGE])
+
+export function formatVariantSelector(current, ...others) {
+  for (let other of others) {
+    let incomingValue = resolveFunctionArgument(other, MERGE)
+    if (incomingValue !== null) {
+      let existingValue = resolveFunctionArgument(current, MERGE, incomingValue)
+      if (existingValue !== null) {
+        let existingTarget = `${MERGE}(${incomingValue})`
+        let splitIdx = other.indexOf(existingTarget)
+        let addition = other.slice(splitIdx + existingTarget.length).split(' ')[0]
+
+        current = current.replace(existingTarget, existingTarget + addition)
+        continue
+      }
+    }
+
+    current = other.replace(PARENT, current)
+  }
+
+  return current
+}
+
+export function finalizeSelector(format, { selector, candidate, context }) {
+  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)
+  }
+
+  format = format.replace(PARENT, `.${escapeClassName(candidate)}`)
+
+  // Normalize escaped classes, e.g.:
+  //
+  // The idea would be to replace the escaped `base` in the selector with the
+  // `format`. However, in css you can escape the same selector in a few
+  // different ways. This would result in different strings and therefore we
+  // can't replace it properly.
+  //
+  //               base: bg-[rgb(255,0,0)]
+  //   base in selector: bg-\\[rgb\\(255\\,0\\,0\\)\\]
+  //       escaped base: bg-\\[rgb\\(255\\2c 0\\2c 0\\)\\]
+  //
+  selector = selectorParser((selectors) => {
+    return selectors.walkClasses((node) => {
+      if (node.raws && node.value.includes(base)) {
+        node.raws.value = escapeClassName(unescape(node.raws.value))
+      }
+
+      return node
+    })
+  }).processSync(selector)
+
+  // We can safely replace the escaped base now, since the `base` section is
+  // now in a normalized escaped value.
+  selector = selector.replace(`.${escapeClassName(base)}`, format)
+
+  // Remove unnecessary pseudo selectors that we used as placeholders
+  return selectorParser((selectors) => {
+    return selectors.map((selector) => {
+      selector.walkPseudos((p) => {
+        if (selectorFunctions.has(p.value)) {
+          p.replaceWith(p.nodes)
+        }
+
+        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
+
+  // Start inside the `(`
+  startIdx += needle.length + 1
+
+  let target = ''
+  let count = 0
+
+  for (let char of haystack.slice(startIdx)) {
+    if (char !== '(' && char !== ')') {
+      target += char
+    } else if (char === '(') {
+      target += char
+      count++
+    } else if (char === ')') {
+      if (--count < 0) break // unbalanced
+      target += char
+    }
+  }
+
+  return target
+}