tailwindcss 0.0.0-insiders.4e21639 → 0.0.0-insiders.4e62334

package/src/util/formatVariantSelector.js

@@ -29,15 +29,117 @@ export function formatVariantSelector(current, ...others) {
   return current
 }
 
-export function finalizeSelector(format, { selector, candidate, context }) {
-  let base = candidate.split(context?.tailwindConfig?.separator ?? ':').pop()
+/**
+ * Given any node in a selector this gets the "simple" selector it's a part of
+ * A simple selector is just a list of nodes without any combinators
+ * Technically :is(), :not(), :has(), etc… can have combinators but those are nested
+ * inside the relevant node and won't be picked up so they're fine to ignore
+ *
+ * @param {import('postcss-selector-parser').Node} node
+ * @returns {import('postcss-selector-parser').Node[]}
+ **/
+function simpleSelectorForNode(node) {
+  /** @type {import('postcss-selector-parser').Node[]} */
+  let nodes = []
 
-  if (context?.tailwindConfig?.prefix) {
+  // Walk backwards until we hit a combinator node (or the start)
+  while (node.prev() && node.prev().type !== 'combinator') {
+    node = node.prev()
+  }
+
+  // Now record all non-combinator nodes until we hit one (or the end)
+  while (node && node.type !== 'combinator') {
+    nodes.push(node)
+    node = node.next()
+  }
+
+  return nodes
+}
+
+/**
+ * Resorts the nodes in a selector to ensure they're in the correct order
+ * Tags go before classes, and pseudo classes go after classes
+ *
+ * @param {import('postcss-selector-parser').Selector} sel
+ * @returns {import('postcss-selector-parser').Selector}
+ **/
+function resortSelector(sel) {
+  sel.sort((a, b) => {
+    if (a.type === 'tag' && b.type === 'class') {
+      return -1
+    } else if (a.type === 'class' && b.type === 'tag') {
+      return 1
+    } else if (a.type === 'class' && b.type === 'pseudo' && b.value !== ':merge') {
+      return -1
+    } else if (a.type === 'pseudo' && a.value !== ':merge' && b.type === 'class') {
+      return 1
+    }
+
+    return sel.index(a) - sel.index(b)
+  })
+
+  return sel
+}
+
+function eliminateIrrelevantSelectors(sel, base) {
+  let hasClassesMatchingCandidate = false
+
+  sel.walk((child) => {
+    if (child.type === 'class' && child.value === base) {
+      hasClassesMatchingCandidate = true
+      return false // Stop walking
+    }
+  })
+
+  if (!hasClassesMatchingCandidate) {
+    sel.remove()
+  }
+
+  // We do NOT recursively eliminate sub selectors that don't have the base class
+  // as this is NOT a safe operation. For example, if we have:
+  // `.space-x-2 > :not([hidden]) ~ :not([hidden])`
+  // We cannot remove the [hidden] from the :not() because it would change the
+  // meaning of the selector.
+
+  // TODO: Can we do this for :matches, :is, and :where?
+}
+
+export function finalizeSelector(
+  format,
+  {
+    selector,
+    candidate,
+    context,
+    isArbitraryVariant,
+
+    // 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
+    //
+    base = candidate
+      .split(new RegExp(`\\${context?.tailwindConfig?.separator ?? ':'}(?![^[]*\\])`))
+      .pop(),
+  }
+) {
+  let ast = selectorParser().astSync(selector)
+
+  // We explicitly DO NOT prefix classes in arbitrary variants
+  if (context?.tailwindConfig?.prefix && !isArbitraryVariant) {
     format = prefixSelector(context.tailwindConfig.prefix, format)
   }
 
   format = format.replace(PARENT, `.${escapeClassName(candidate)}`)
 
+  let formatAst = selectorParser().astSync(format)
+
+  // Remove extraneous selectors that do not include the base class/candidate being matched against
+  // For example if we have a utility defined `.a, .b { color: red}`
+  // And the formatted variant is sm:b then we want the final selector to be `.sm\:b` and not `.a, .sm\:b`
+  ast.each((sel) => eliminateIrrelevantSelectors(sel, base))
+
   // Normalize escaped classes, e.g.:
   //
   // The idea would be to replace the escaped `base` in the selector with the
@@ -49,34 +151,146 @@ export function finalizeSelector(format, { selector, candidate, context }) {
   //   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))
-      }
+  ast.walkClasses((node) => {
+    if (node.raws && node.value.includes(base)) {
+      node.raws.value = escapeClassName(unescape(node.raws.value))
+    }
+  })
 
-      return node
-    })
-  }).processSync(selector)
+  let simpleStart = selectorParser.comment({ value: '/*__simple__*/' })
+  let simpleEnd = selectorParser.comment({ value: '/*__simple__*/' })
 
   // 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)
+  ast.walkClasses((node) => {
+    if (node.value !== base) {
+      return
+    }
 
-  // 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)
-        }
+    let parent = node.parent
+    let formatNodes = formatAst.nodes[0].nodes
 
-        return p
-      })
+    // Perf optimization: if the parent is a single class we can just replace it and be done
+    if (parent.nodes.length === 1) {
+      node.replaceWith(...formatNodes)
+      return
+    }
+
+    let simpleSelector = simpleSelectorForNode(node)
+    parent.insertBefore(simpleSelector[0], simpleStart)
+    parent.insertAfter(simpleSelector[simpleSelector.length - 1], simpleEnd)
+
+    for (let child of formatNodes) {
+      parent.insertBefore(simpleSelector[0], child)
+    }
 
-      return selector
+    node.remove()
+
+    // Re-sort the simple selector to ensure it's in the correct order
+    simpleSelector = simpleSelectorForNode(simpleStart)
+    let firstNode = parent.index(simpleStart)
+
+    parent.nodes.splice(
+      firstNode,
+      simpleSelector.length,
+      ...resortSelector(selectorParser.selector({ nodes: simpleSelector })).nodes
+    )
+
+    simpleStart.remove()
+    simpleEnd.remove()
+  })
+
+  // 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
+  }
+
+  // Remove unnecessary pseudo selectors that we used as placeholders
+  ast.each((selector) => {
+    selector.walkPseudos((p) => {
+      if (selectorFunctions.has(p.value)) {
+        p.replaceWith(p.nodes)
+      }
     })
-  }).processSync(selector)
+
+    let pseudoElements = collectPseudoElements(selector)
+    if (pseudoElements.length > 0) {
+      selector.nodes.push(pseudoElements.sort(sortSelector))
+    }
+  })
+
+  return ast.toString()
+}
+
+// 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) {

package/src/util/getAllConfigs.js

@@ -9,6 +9,25 @@ export default function getAllConfigs(config) {
 
   const features = {
     // Add experimental configs here...
+    respectDefaultRingColorOpacity: {
+      theme: {
+        ringColor: ({ theme }) => ({
+          DEFAULT: '#3b82f67f',
+          ...theme('colors'),
+        }),
+      },
+    },
+
+    disableColorOpacityUtilitiesByDefault: {
+      corePlugins: {
+        backgroundOpacity: false,
+        borderOpacity: false,
+        divideOpacity: false,
+        placeholderOpacity: false,
+        ringOpacity: false,
+        textOpacity: false,
+      },
+    },
   }
 
   const experimentals = Object.keys(features)

package/src/util/isValidArbitraryValue.js

@@ -0,0 +1,61 @@
+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']
+export default function isValidArbitraryValue(value) {
+  let stack = []
+  let inQuotes = false
+
+  for (let i = 0; i < value.length; i++) {
+    let char = value[i]
+
+    if (char === ':' && !inQuotes && stack.length === 0) {
+      return false
+    }
+
+    // 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
+}

package/src/util/log.js

@@ -1,25 +1,29 @@
-import chalk from 'chalk'
+import colors from 'picocolors'
 
 let alreadyShown = new Set()
 
-function log(chalk, messages, key) {
-  if (process.env.JEST_WORKER_ID !== undefined) return
+function log(type, messages, key) {
+  if (typeof process !== 'undefined' && process.env.JEST_WORKER_ID) return
 
   if (key && alreadyShown.has(key)) return
   if (key) alreadyShown.add(key)
 
   console.warn('')
-  messages.forEach((message) => console.warn(chalk, '-', message))
+  messages.forEach((message) => console.warn(type, '-', message))
+}
+
+export function dim(input) {
+  return colors.dim(input)
 }
 
 export default {
   info(key, messages) {
-    log(chalk.bold.cyan('info'), ...(Array.isArray(key) ? [key] : [messages, key]))
+    log(colors.bold(colors.cyan('info')), ...(Array.isArray(key) ? [key] : [messages, key]))
   },
   warn(key, messages) {
-    log(chalk.bold.yellow('warn'), ...(Array.isArray(key) ? [key] : [messages, key]))
+    log(colors.bold(colors.yellow('warn')), ...(Array.isArray(key) ? [key] : [messages, key]))
   },
   risk(key, messages) {
-    log(chalk.bold.magenta('risk'), ...(Array.isArray(key) ? [key] : [messages, key]))
+    log(colors.bold(colors.magenta('risk')), ...(Array.isArray(key) ? [key] : [messages, key]))
   },
 }

package/src/util/nameClass.js

@@ -1,7 +1,7 @@
 import escapeClassName from './escapeClassName'
 import escapeCommas from './escapeCommas'
 
-function asClass(name) {
+export function asClass(name) {
   return escapeCommas(`.${escapeClassName(name)}`)
 }
 

package/src/util/negateValue.js

@@ -10,7 +10,15 @@ export default function (value) {
     return value.replace(/^[+-]?/, (sign) => (sign === '-' ? '' : '-'))
   }
 
-  if (value.includes('var(') || value.includes('calc(')) {
-    return `calc(${value} * -1)`
+  // What functions we support negating numeric values for
+  // var() isn't inherently a numeric function but we support it anyway
+  // The trigonometric functions are omitted because you'll need to use calc(…) with them _anyway_
+  // to produce generally useful results and that will be covered already
+  let numericFunctions = ['var', 'calc', 'min', 'max', 'clamp']
+
+  for (const fn of numericFunctions) {
+    if (value.includes(`${fn}(`)) {
+      return `calc(${value} * -1)`
+    }
   }
 }

package/src/util/normalizeConfig.js

@@ -1,4 +1,4 @@
-import log from './log'
+import log, { dim } from './log'
 
 export function normalizeConfig(config) {
   // Quick structure validation
@@ -124,7 +124,7 @@ export function normalizeConfig(config) {
     log.warn('purge-deprecation', [
       'The `purge`/`content` options have changed in Tailwind CSS v3.0.',
       'Update your configuration file to eliminate this warning.',
-      // TODO: Add https://tw.wtf/purge-deprecation
+      'https://tailwindcss.com/docs/upgrade-guide#configure-content-sources',
     ])
   }
 
@@ -145,7 +145,7 @@ export function normalizeConfig(config) {
     log.warn('prefix-function', [
       'As of Tailwind CSS v3.0, `prefix` cannot be a function.',
       'Update `prefix` in your configuration to be a string to eliminate this warning.',
-      // TODO: Add https://tw.wtf/prefix-function
+      'https://tailwindcss.com/docs/upgrade-guide#prefix-cannot-be-a-function',
     ])
     config.prefix = ''
   } else {
@@ -245,5 +245,18 @@ export function normalizeConfig(config) {
     })(),
   }
 
+  // Validate globs to prevent bogus globs.
+  // E.g.: `./src/*.{html}` is invalid, the `{html}` should just be `html`
+  for (let file of config.content.files) {
+    if (typeof file === 'string' && /{([^,]*?)}/g.test(file)) {
+      log.warn('invalid-glob-braces', [
+        `The glob pattern ${dim(file)} in your Tailwind CSS configuration is invalid.`,
+        `Update it to ${dim(file.replace(/{([^,]*?)}/g, '$1'))} to silence this warning.`,
+        // TODO: Add https://tw.wtf/invalid-glob-braces
+      ])
+      break
+    }
+  }
+
   return config
 }

package/src/util/normalizeScreens.js

@@ -0,0 +1,45 @@
+/**
+ * A function that normalizes the various forms that the screens object can be
+ * provided in.
+ *
+ * Input(s):
+ *   - ['100px', '200px'] // Raw strings
+ *   - { sm: '100px', md: '200px' } // Object with string values
+ *   - { sm: { min: '100px' }, md: { max: '100px' } } // Object with object values
+ *   - { sm: [{ min: '100px' }, { max: '200px' }] } // Object with object array (multiple values)
+ *
+ * Output(s):
+ *   - [{ name: 'sm', values: [{ min: '100px', max: '200px' }] }] // List of objects, that contains multiple values
+ */
+export function normalizeScreens(screens, root = true) {
+  if (Array.isArray(screens)) {
+    return screens.map((screen) => {
+      if (root && Array.isArray(screen)) {
+        throw new Error('The tuple syntax is not supported for `screens`.')
+      }
+
+      if (typeof screen === 'string') {
+        return { name: screen.toString(), values: [{ min: screen, max: undefined }] }
+      }
+
+      let [name, options] = screen
+      name = name.toString()
+
+      if (typeof options === 'string') {
+        return { name, values: [{ min: options, max: undefined }] }
+      }
+
+      if (Array.isArray(options)) {
+        return { name, values: options.map((option) => resolveValue(option)) }
+      }
+
+      return { name, values: [resolveValue(options)] }
+    })
+  }
+
+  return normalizeScreens(Object.entries(screens ?? {}), false)
+}
+
+function resolveValue({ 'min-width': _minWidth, min = _minWidth, max, raw } = {}) {
+  return { min, max, raw }
+}

package/src/util/parseBoxShadowValue.js

@@ -1,10 +1,11 @@
+import { splitAtTopLevelOnly } from './splitAtTopLevelOnly'
+
 let KEYWORDS = new Set(['inset', 'inherit', 'initial', 'revert', 'unset'])
-let COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubiz-bezier(a, b, c)` these don't count.
 let SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces instead.
-let LENGTH = /^-?(\d+)(.*?)$/g
+let LENGTH = /^-?(\d+|\.\d+)(.*?)$/g
 
 export function parseBoxShadowValue(input) {
-  let shadows = input.split(COMMA)
+  let shadows = splitAtTopLevelOnly(input, ',')
   return shadows.map((shadow) => {
     let value = shadow.trim()
     let result = { raw: value }

package/src/util/pluginUtils.js

@@ -95,9 +95,19 @@ function splitAlpha(modifier) {
   return [modifier.slice(0, slashIdx), modifier.slice(slashIdx + 1)]
 }
 
+export function parseColorFormat(value) {
+  if (typeof value === 'string' && value.includes('<alpha-value>')) {
+    let oldValue = value
+
+    return ({ opacityValue = 1 }) => oldValue.replace('<alpha-value>', opacityValue)
+  }
+
+  return value
+}
+
 export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
   if (options.values?.[modifier] !== undefined) {
-    return options.values?.[modifier]
+    return parseColorFormat(options.values?.[modifier])
   }
 
   let [color, alpha] = splitAlpha(modifier)
@@ -110,6 +120,8 @@ export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
       return undefined
     }
 
+    normalizedColor = parseColorFormat(normalizedColor)
+
     if (isArbitraryValue(alpha)) {
       return withAlphaValue(normalizedColor, alpha.slice(1, -1))
     }
@@ -185,7 +197,7 @@ export function coerceValue(types, modifier, options, tailwindConfig) {
   // Find first matching type
   for (let type of [].concat(types)) {
     let result = typeMap[type](modifier, options, { tailwindConfig })
-    if (result) return [result, type]
+    if (result !== undefined) return [result, type]
   }
 
   return []

package/src/util/prefixSelector.js

@@ -1,12 +1,14 @@
 import parser from 'postcss-selector-parser'
-import { tap } from './tap'
 
-export default function (prefix, selector) {
+export default function (prefix, selector, prependNegative = false) {
   return parser((selectors) => {
     selectors.walkClasses((classSelector) => {
-      tap(classSelector.value, (baseClass) => {
-        classSelector.value = `${prefix}${baseClass}`
-      })
+      let baseClass = classSelector.value
+      let shouldPlaceNegativeBeforePrefix = prependNegative && baseClass.startsWith('-')
+
+      classSelector.value = shouldPlaceNegativeBeforePrefix
+        ? `-${prefix}${baseClass.slice(1)}`
+        : `${prefix}${baseClass}`
     })
   }).processSync(selector)
 }

package/src/util/removeAlphaVariables.js

@@ -0,0 +1,24 @@
+/**
+ * This function removes any uses of CSS variables used as an alpha channel
+ *
+ * This is required for selectors like `:visited` which do not allow
+ * changes in opacity or external control using CSS variables.
+ *
+ * @param {import('postcss').Container} container
+ * @param {string[]} toRemove
+ */
+export function removeAlphaVariables(container, toRemove) {
+  container.walkDecls((decl) => {
+    if (toRemove.includes(decl.prop)) {
+      decl.remove()
+
+      return
+    }
+
+    for (let varName of toRemove) {
+      if (decl.value.includes(`/ var(${varName})`)) {
+        decl.value = decl.value.replace(`/ var(${varName})`, '')
+      }
+    }
+  })
+}