tailwindcss 0.0.0-insiders.fe08e91 → 0.0.0-oxide.6bf5e56

package/src/util/formatVariantSelector.js

@@ -29,25 +29,117 @@ export function formatVariantSelector(current, ...others) {
   return current
 }
 
-export function finalizeSelector(format, { selector, candidate, context }) {
-  let separator = context?.tailwindConfig?.separator ?? ':'
+/**
+ * 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 = []
+
+  // Walk backwards until we hit a combinator node (or the start)
+  while (node.prev() && node.prev().type !== 'combinator') {
+    node = node.prev()
+  }
 
-  // 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()
+  // 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.startsWith('::')) {
+      return -1
+    } else if (a.type === 'pseudo' && a.value.startsWith('::') && b.type === 'class') {
+      return 1
+    }
+
+    return sel.index(a) - sel.index(b)
+  })
+
+  return sel
+}
+
+function eliminateIrrelevantSelectors(sel, base) {
+  let hasClassesMatchingCandidate = false
 
-  if (context?.tailwindConfig?.prefix) {
+  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
@@ -59,65 +151,96 @@ 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)
-        }
-
-        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 parent = node.parent
+    let formatNodes = formatAst.nodes[0].nodes
+
+    // 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)
+    }
+
+    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)
       }
 
-      let pseudoElements = collectPseudoElements(selector)
-      if (pseudoElements.length > 0) {
-        selector.nodes.push(pseudoElements.sort(sortSelector))
+      if (node?.nodes) {
+        nodes.push(...collectPseudoElements(node))
       }
+    }
+
+    return nodes
+  }
 
-      return selector
+  // 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

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 → isSyntacticallyValidPropertyValue.js}

@@ -15,7 +15,7 @@ let quotes = new Set(['"', "'", '`'])
 // 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) {
+export default function isSyntacticallyValidPropertyValue(value) {
   let stack = []
   let inQuotes = false
 

package/src/util/log.js

@@ -1,29 +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 chalk.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

@@ -22,5 +22,9 @@ export function formatClass(classPrefix, key) {
     return `-${classPrefix}${key}`
   }
 
+  if (key.startsWith('/')) {
+    return `${classPrefix}${key}`
+  }
+
   return `${classPrefix}-${key}`
 }

package/src/util/negateValue.js

@@ -1,4 +1,4 @@
-export default function (value) {
+export default function negateValue(value) {
   value = `${value}`
 
   if (value === '0') {
@@ -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

@@ -56,9 +56,11 @@ export function normalizeConfig(config) {
 
     // When `config.content` is an object
     if (typeof config.content === 'object' && config.content !== null) {
-      // Only `files`, `extract` and `transform` can exist in `config.content`
+      // Only `files`, `relative`, `extract`, and `transform` can exist in `config.content`
       if (
-        Object.keys(config.content).some((key) => !['files', 'extract', 'transform'].includes(key))
+        Object.keys(config.content).some(
+          (key) => !['files', 'relative', 'extract', 'transform'].includes(key)
+        )
       ) {
         return false
       }
@@ -112,6 +114,14 @@ export function normalizeConfig(config) {
         ) {
           return false
         }
+
+        // `config.content.relative` is optional and can be a boolean
+        if (
+          typeof config.content.relative !== 'boolean' &&
+          typeof config.content.relative !== 'undefined'
+        ) {
+          return false
+        }
       }
 
       return true
@@ -124,7 +134,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',
     ])
   }
 
@@ -140,12 +150,30 @@ export function normalizeConfig(config) {
     return []
   })()
 
+  // Normalize the `blocklist`
+  config.blocklist = (() => {
+    let { blocklist } = config
+
+    if (Array.isArray(blocklist)) {
+      if (blocklist.every((item) => typeof item === 'string')) {
+        return blocklist
+      }
+
+      log.warn('blocklist-invalid', [
+        'The `blocklist` option must be an array of strings.',
+        'https://tailwindcss.com/docs/content-configuration#discarding-classes',
+      ])
+    }
+
+    return []
+  })()
+
   // Normalize prefix option
   if (typeof config.prefix === 'function') {
     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 {
@@ -154,6 +182,16 @@ export function normalizeConfig(config) {
 
   // Normalize the `content`
   config.content = {
+    relative: (() => {
+      let { content } = config
+
+      if (content?.relative) {
+        return content.relative
+      }
+
+      return config.future?.relativeContentPathsByDefault ?? false
+    })(),
+
     files: (() => {
       let { content, purge } = config
 
@@ -250,8 +288,8 @@ export function normalizeConfig(config) {
   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 config is invalid.`,
-        `    Update it to ${dim(file.replace(/{([^,]*?)}/g, '$1'))} to silence this warning.`,
+        `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

package/src/util/normalizeScreens.js

@@ -1,3 +1,17 @@
+/**
+ * @typedef {object} ScreenValue
+ * @property {number|undefined} min
+ * @property {number|undefined} max
+ * @property {string|undefined} raw
+ */
+
+/**
+ * @typedef {object} Screen
+ * @property {string} name
+ * @property {boolean} not
+ * @property {ScreenValue[]} values
+ */
+
 /**
  * A function that normalizes the various forms that the screens object can be
  * provided in.
@@ -10,6 +24,8 @@
  *
  * Output(s):
  *   - [{ name: 'sm', values: [{ min: '100px', max: '200px' }] }] // List of objects, that contains multiple values
+ *
+ * @returns {Screen[]}
  */
 export function normalizeScreens(screens, root = true) {
   if (Array.isArray(screens)) {
@@ -19,27 +35,106 @@ export function normalizeScreens(screens, root = true) {
       }
 
       if (typeof screen === 'string') {
-        return { name: screen.toString(), values: [{ min: screen, max: undefined }] }
+        return { name: screen.toString(), not: false, values: [{ min: screen, max: undefined }] }
       }
 
       let [name, options] = screen
       name = name.toString()
 
       if (typeof options === 'string') {
-        return { name, values: [{ min: options, max: undefined }] }
+        return { name, not: false, values: [{ min: options, max: undefined }] }
       }
 
       if (Array.isArray(options)) {
-        return { name, values: options.map((option) => resolveValue(option)) }
+        return { name, not: false, values: options.map((option) => resolveValue(option)) }
       }
 
-      return { name, values: [resolveValue(options)] }
+      return { name, not: false, values: [resolveValue(options)] }
     })
   }
 
   return normalizeScreens(Object.entries(screens ?? {}), false)
 }
 
+/**
+ * @param {Screen} screen
+ * @returns {{result: false, reason: string} | {result: true, reason: null}}
+ */
+export function isScreenSortable(screen) {
+  if (screen.values.length !== 1) {
+    return { result: false, reason: 'multiple-values' }
+  } else if (screen.values[0].raw !== undefined) {
+    return { result: false, reason: 'raw-values' }
+  } else if (screen.values[0].min !== undefined && screen.values[0].max !== undefined) {
+    return { result: false, reason: 'min-and-max' }
+  }
+
+  return { result: true, reason: null }
+}
+
+/**
+ * @param {'min' | 'max'} type
+ * @param {Screen | 'string'} a
+ * @param {Screen | 'string'} z
+ * @returns {number}
+ */
+export function compareScreens(type, a, z) {
+  let aScreen = toScreen(a, type)
+  let zScreen = toScreen(z, type)
+
+  let aSorting = isScreenSortable(aScreen)
+  let bSorting = isScreenSortable(zScreen)
+
+  // These cases should never happen and indicate a bug in Tailwind CSS itself
+  if (aSorting.reason === 'multiple-values' || bSorting.reason === 'multiple-values') {
+    throw new Error(
+      'Attempted to sort a screen with multiple values. This should never happen. Please open a bug report.'
+    )
+  } else if (aSorting.reason === 'raw-values' || bSorting.reason === 'raw-values') {
+    throw new Error(
+      'Attempted to sort a screen with raw values. This should never happen. Please open a bug report.'
+    )
+  } else if (aSorting.reason === 'min-and-max' || bSorting.reason === 'min-and-max') {
+    throw new Error(
+      'Attempted to sort a screen with both min and max values. This should never happen. Please open a bug report.'
+    )
+  }
+
+  // Let the sorting begin
+  let { min: aMin, max: aMax } = aScreen.values[0]
+  let { min: zMin, max: zMax } = zScreen.values[0]
+
+  // Negating screens flip their behavior. Basically `not min-width` is `max-width`
+  if (a.not) [aMin, aMax] = [aMax, aMin]
+  if (z.not) [zMin, zMax] = [zMax, zMin]
+
+  aMin = aMin === undefined ? aMin : parseFloat(aMin)
+  aMax = aMax === undefined ? aMax : parseFloat(aMax)
+  zMin = zMin === undefined ? zMin : parseFloat(zMin)
+  zMax = zMax === undefined ? zMax : parseFloat(zMax)
+
+  let [aValue, zValue] = type === 'min' ? [aMin, zMin] : [zMax, aMax]
+
+  return aValue - zValue
+}
+
+/**
+ *
+ * @param {PartialScreen> | string} value
+ * @param {'min' | 'max'} type
+ * @returns {Screen}
+ */
+export function toScreen(value, type) {
+  if (typeof value === 'object') {
+    return value
+  }
+
+  return {
+    name: 'arbitrary-screen',
+    values: [{ [type]: value }],
+  }
+}
+
 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 }