tailwindcss 3.4.0 → 4.0.0-alpha.1

package/src/util/formatVariantSelector.js

@@ -1,324 +0,0 @@
-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'
-import { movePseudos } from './pseudoElements'
-import { splitAtTopLevelOnly } from './splitAtTopLevelOnly'
-
-/** @typedef {import('postcss-selector-parser').Root} Root */
-/** @typedef {import('postcss-selector-parser').Selector} Selector */
-/** @typedef {import('postcss-selector-parser').Pseudo} Pseudo */
-/** @typedef {import('postcss-selector-parser').Node} Node */
-
-/** @typedef {{format: string, respectPrefix: boolean}[]} RawFormats */
-/** @typedef {import('postcss-selector-parser').Root} ParsedFormats */
-/** @typedef {RawFormats | ParsedFormats} AcceptedFormats */
-
-let MERGE = ':merge'
-
-/**
- * @param {RawFormats} formats
- * @param {{context: any, candidate: string, base: string | null}} options
- * @returns {ParsedFormats | null}
- */
-export function formatVariantSelector(formats, { context, candidate }) {
-  let prefix = context?.tailwindConfig.prefix ?? ''
-
-  // Parse the format selector into an AST
-  let parsedFormats = formats.map((format) => {
-    let ast = selectorParser().astSync(format.format)
-
-    return {
-      ...format,
-      ast: format.respectPrefix ? prefixSelector(prefix, ast) : ast,
-    }
-  })
-
-  // We start with the candidate selector
-  let formatAst = selectorParser.root({
-    nodes: [
-      selectorParser.selector({
-        nodes: [selectorParser.className({ value: escapeClassName(candidate) })],
-      }),
-    ],
-  })
-
-  // And iteratively merge each format selector into the candidate selector
-  for (let { ast } of parsedFormats) {
-    // 1. Handle :merge() special pseudo-class
-    ;[formatAst, ast] = handleMergePseudo(formatAst, ast)
-
-    // 2. Merge the format selector into the current selector AST
-    ast.walkNesting((nesting) => nesting.replaceWith(...formatAst.nodes[0].nodes))
-
-    // 3. Keep going!
-    formatAst = ast
-  }
-
-  return formatAst
-}
-
-/**
- * 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 {Node} node
- * @returns {Node[]}
- **/
-function simpleSelectorForNode(node) {
-  /** @type {Node[]} */
-  let nodes = []
-
-  // 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 {Selector} sel
- * @returns {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
-}
-
-/**
- * Remove extraneous selectors that do not include the base class/candidate
- *
- * Example:
- * Given the utility `.a, .b { color: red}`
- * Given the candidate `sm:b`
- *
- * The final selector should be `.sm\:b` and not `.a, .sm\:b`
- *
- * @param {Selector} ast
- * @param {string} base
- */
-export 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?
-}
-
-/**
- * @param {string} current
- * @param {AcceptedFormats} formats
- * @param {{context: any, candidate: string, base: string | null}} options
- * @returns {string}
- */
-export function finalizeSelector(current, formats, { context, candidate, base }) {
-  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
-  //
-  base = base ?? splitAtTopLevelOnly(candidate, separator).pop()
-
-  // Parse the selector into an AST
-  let selector = selectorParser().astSync(current)
-
-  // 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.walkClasses((node) => {
-    if (node.raws && node.value.includes(base)) {
-      node.raws.value = escapeClassName(unescape(node.raws.value))
-    }
-  })
-
-  // Remove extraneous selectors that do not include the base candidate
-  selector.each((sel) => eliminateIrrelevantSelectors(sel, base))
-
-  // If ffter eliminating irrelevant selectors, we end up with nothing
-  // Then the whole "rule" this is associated with does not need to exist
-  // We use `null` as a marker value for that case
-  if (selector.length === 0) {
-    return null
-  }
-
-  // If there are no formats that means there were no variants added to the candidate
-  // so we can just return the selector as-is
-  let formatAst = Array.isArray(formats)
-    ? formatVariantSelector(formats, { context, candidate })
-    : formats
-
-  if (formatAst === null) {
-    return selector.toString()
-  }
-
-  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.walkClasses((node) => {
-    if (node.value !== base) {
-      return
-    }
-
-    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.clone())
-    }
-
-    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()
-  })
-
-  // Remove unnecessary pseudo selectors that we used as placeholders
-  selector.walkPseudos((p) => {
-    if (p.value === MERGE) {
-      p.replaceWith(p.nodes)
-    }
-  })
-
-  // Move pseudo elements to the end of the selector (if necessary)
-  selector.each((sel) => movePseudos(sel))
-
-  return selector.toString()
-}
-
-/**
- *
- * @param {Selector} selector
- * @param {Selector} format
- */
-export function handleMergePseudo(selector, format) {
-  /** @type {{pseudo: Pseudo, value: string}[]} */
-  let merges = []
-
-  // Find all :merge() pseudo-classes in `selector`
-  selector.walkPseudos((pseudo) => {
-    if (pseudo.value === MERGE) {
-      merges.push({
-        pseudo,
-        value: pseudo.nodes[0].toString(),
-      })
-    }
-  })
-
-  // Find all :merge() "attachments" in `format` and attach them to the matching selector in `selector`
-  format.walkPseudos((pseudo) => {
-    if (pseudo.value !== MERGE) {
-      return
-    }
-
-    let value = pseudo.nodes[0].toString()
-
-    // Does `selector` contain a :merge() pseudo-class with the same value?
-    let existing = merges.find((merge) => merge.value === value)
-
-    // Nope so there's nothing to do
-    if (!existing) {
-      return
-    }
-
-    // Everything after `:merge()` up to the next combinator is what is attached to the merged selector
-    let attachments = []
-    let next = pseudo.next()
-    while (next && next.type !== 'combinator') {
-      attachments.push(next)
-      next = next.next()
-    }
-
-    let combinator = next
-
-    existing.pseudo.parent.insertAfter(
-      existing.pseudo,
-      selectorParser.selector({ nodes: attachments.map((node) => node.clone()) })
-    )
-
-    pseudo.remove()
-    attachments.forEach((node) => node.remove())
-
-    // What about this case:
-    // :merge(.group):focus > &
-    // :merge(.group):hover &
-    if (combinator && combinator.type === 'combinator') {
-      combinator.remove()
-    }
-  })
-
-  return [selector, format]
-}

package/src/util/getAllConfigs.js

@@ -1,38 +0,0 @@
-import defaultFullConfig from '../../stubs/config.full.js'
-import { flagEnabled } from '../featureFlags'
-
-export default function getAllConfigs(config) {
-  const configs = (config?.presets ?? [defaultFullConfig])
-    .slice()
-    .reverse()
-    .flatMap((preset) => getAllConfigs(preset instanceof Function ? preset() : preset))
-
-  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)
-    .filter((feature) => flagEnabled(config, feature))
-    .map((feature) => features[feature])
-
-  return [config, ...experimentals, ...configs]
-}

package/src/util/hashConfig.js

@@ -1,5 +0,0 @@
-import hash from 'object-hash'
-
-export default function hashConfig(config) {
-  return hash(config, { ignoreUnknown: true })
-}

package/src/util/isKeyframeRule.js

@@ -1,3 +0,0 @@
-export default function isKeyframeRule(rule) {
-  return rule.parent && rule.parent.type === 'atrule' && /keyframes$/.test(rule.parent.name)
-}

package/src/util/isPlainObject.js

@@ -1,8 +0,0 @@
-export default function isPlainObject(value) {
-  if (Object.prototype.toString.call(value) !== '[object Object]') {
-    return false
-  }
-
-  const prototype = Object.getPrototypeOf(value)
-  return prototype === null || Object.getPrototypeOf(prototype) === null
-}

package/src/util/isSyntacticallyValidPropertyValue.js

@@ -1,61 +0,0 @@
-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 isSyntacticallyValidPropertyValue(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,29 +0,0 @@
-import colors from 'picocolors'
-
-let alreadyShown = new Set()
-
-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(type, '-', message))
-}
-
-export function dim(input) {
-  return colors.dim(input)
-}
-
-export default {
-  info(key, messages) {
-    log(colors.bold(colors.cyan('info')), ...(Array.isArray(key) ? [key] : [messages, key]))
-  },
-  warn(key, messages) {
-    log(colors.bold(colors.yellow('warn')), ...(Array.isArray(key) ? [key] : [messages, key]))
-  },
-  risk(key, messages) {
-    log(colors.bold(colors.magenta('risk')), ...(Array.isArray(key) ? [key] : [messages, key]))
-  },
-}

package/src/util/nameClass.js

@@ -1,30 +0,0 @@
-import escapeClassName from './escapeClassName'
-import escapeCommas from './escapeCommas'
-
-export function asClass(name) {
-  return escapeCommas(`.${escapeClassName(name)}`)
-}
-
-export default function nameClass(classPrefix, key) {
-  return asClass(formatClass(classPrefix, key))
-}
-
-export function formatClass(classPrefix, key) {
-  if (key === 'DEFAULT') {
-    return classPrefix
-  }
-
-  if (key === '-' || key === '-DEFAULT') {
-    return `-${classPrefix}`
-  }
-
-  if (key.startsWith('-')) {
-    return `-${classPrefix}${key}`
-  }
-
-  if (key.startsWith('/')) {
-    return `${classPrefix}${key}`
-  }
-
-  return `${classPrefix}-${key}`
-}

package/src/util/negateValue.js

@@ -1,24 +0,0 @@
-export default function negateValue(value) {
-  value = `${value}`
-
-  if (value === '0') {
-    return '0'
-  }
-
-  // Flip sign of numbers
-  if (/^[+-]?(\d+|\d*\.\d+)(e[+-]?\d+)?(%|\w+)?$/.test(value)) {
-    return value.replace(/^[+-]?/, (sign) => (sign === '-' ? '' : '-'))
-  }
-
-  // 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)`
-    }
-  }
-}