tailwindcss-patch 9.2.1 → 9.3.0

package/src/v4/bare-arbitrary-values.ts

@@ -0,0 +1,326 @@
+export interface BareArbitraryValueOptions {
+  /**
+   * 允许作为无方括号任意值的单位列表。
+   */
+  units?: string[]
+}
+
+export interface BareArbitraryValueResolveResult {
+  candidate: string
+  canonicalCandidate: string
+}
+
+const DEFAULT_BARE_ARBITRARY_VALUE_UNITS = [
+  '%',
+  'px',
+  'rpx',
+  'rem',
+  'em',
+  'vw',
+  'vh',
+  'vmin',
+  'vmax',
+  'dvw',
+  'dvh',
+  'svw',
+  'svh',
+  'lvw',
+  'lvh',
+  'ch',
+  'ex',
+  'lh',
+  'rlh',
+  'fr',
+  'deg',
+  'rad',
+  'turn',
+  's',
+  'ms',
+]
+
+const NUMBER_RE = /^-?(?:\d+|\d*\.\d+)$/
+const FUNCTION_VALUE_RE = /^[a-zA-Z_-][a-zA-Z0-9_-]*\(/
+
+function splitVariantPrefix(candidate: string) {
+  let depth = 0
+  let quote: string | undefined
+  let lastSeparator = -1
+
+  for (let index = 0; index < candidate.length; index++) {
+    const character = candidate[index]
+    if (character === '\\') {
+      index++
+      continue
+    }
+
+    if (quote) {
+      if (character === quote) {
+        quote = undefined
+      }
+      continue
+    }
+
+    if (character === '"' || character === '\'') {
+      quote = character
+      continue
+    }
+
+    if (character === '[' || character === '(' || character === '{') {
+      depth++
+      continue
+    }
+
+    if (character === ']' || character === ')' || character === '}') {
+      depth = Math.max(0, depth - 1)
+      continue
+    }
+
+    if (depth === 0 && character === ':') {
+      lastSeparator = index
+    }
+  }
+
+  if (lastSeparator === -1) {
+    return {
+      prefix: '',
+      body: candidate,
+    }
+  }
+
+  return {
+    prefix: candidate.slice(0, lastSeparator + 1),
+    body: candidate.slice(lastSeparator + 1),
+  }
+}
+
+function isBalancedFunctionValue(value: string) {
+  let depth = 0
+  let quote: string | undefined
+
+  for (let index = 0; index < value.length; index++) {
+    const character = value[index]
+
+    if (character === '\\') {
+      index++
+      continue
+    }
+
+    if (quote) {
+      if (character === quote) {
+        quote = undefined
+      }
+      continue
+    }
+
+    if (character === '"' || character === '\'') {
+      quote = character
+      continue
+    }
+
+    if (character === '(') {
+      depth++
+      continue
+    }
+
+    if (character === ')') {
+      depth--
+      if (depth < 0) {
+        return false
+      }
+    }
+  }
+
+  return depth === 0 && quote === undefined
+}
+
+function isHexColorValue(value: string) {
+  return /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6,8})$/.test(value)
+}
+
+function isQuotedValue(value: string) {
+  const quote = value[0]
+  if ((quote !== '"' && quote !== '\'') || value[value.length - 1] !== quote) {
+    return false
+  }
+
+  let escaped = false
+  for (let index = 1; index < value.length - 1; index++) {
+    const character = value[index]
+    if (escaped) {
+      escaped = false
+      continue
+    }
+    if (character === '\\') {
+      escaped = true
+    }
+  }
+
+  return !escaped
+}
+
+function normalizeBareArbitraryValueOptions(options: boolean | BareArbitraryValueOptions | undefined) {
+  if (options === false || options === undefined || options === null) {
+    return
+  }
+
+  const units = options === true ? DEFAULT_BARE_ARBITRARY_VALUE_UNITS : options.units ?? DEFAULT_BARE_ARBITRARY_VALUE_UNITS
+  const normalizedUnits = [...new Set(units.filter(unit => typeof unit === 'string' && unit.length > 0))]
+  if (normalizedUnits.length === 0) {
+    return
+  }
+  return {
+    units: normalizedUnits.sort((a, b) => b.length - a.length),
+  }
+}
+
+function resolveValueWithUnit(body: string, units: string[]) {
+  for (const unit of units) {
+    if (!body.endsWith(unit)) {
+      continue
+    }
+    const numberPart = body.slice(0, -unit.length)
+    if (NUMBER_RE.test(numberPart)) {
+      return `${numberPart}${unit}`
+    }
+  }
+}
+
+function resolveArbitraryValue(body: string, units: string[]) {
+  const withUnit = resolveValueWithUnit(body, units)
+  if (withUnit) {
+    return withUnit
+  }
+
+  if (isHexColorValue(body)) {
+    return body
+  }
+
+  if (isQuotedValue(body)) {
+    return body
+  }
+
+  if (FUNCTION_VALUE_RE.test(body) && body.endsWith(')') && isBalancedFunctionValue(body)) {
+    return body
+  }
+}
+
+function resolveUtilityAndValue(body: string, units: string[]) {
+  let depth = 0
+  let quote: string | undefined
+
+  for (let index = 1; index < body.length; index++) {
+    const character = body[index]
+
+    if (character === '\\') {
+      index++
+      continue
+    }
+
+    if (quote) {
+      if (character === quote) {
+        quote = undefined
+      }
+      continue
+    }
+
+    if (character === '"' || character === '\'') {
+      quote = character
+      continue
+    }
+
+    if (character === '(' || character === '{') {
+      depth++
+      continue
+    }
+
+    if (character === ')' || character === '}') {
+      depth = Math.max(0, depth - 1)
+      continue
+    }
+
+    if (depth > 0 || character !== '-') {
+      continue
+    }
+
+    const utility = body.slice(0, index)
+    const rawValue = body.slice(index + 1)
+    if (!utility || !rawValue) {
+      continue
+    }
+
+    const value = resolveArbitraryValue(rawValue, units)
+    if (value) {
+      return {
+        utility,
+        value,
+      }
+    }
+  }
+}
+
+export function resolveBareArbitraryValueCandidate(
+  candidate: string,
+  options?: boolean | BareArbitraryValueOptions,
+): BareArbitraryValueResolveResult | undefined {
+  const normalizedOptions = normalizeBareArbitraryValueOptions(options)
+  if (!normalizedOptions || !candidate || candidate.includes('[') || candidate.includes(']')) {
+    return
+  }
+
+  const { prefix, body } = splitVariantPrefix(candidate)
+  const important = body.startsWith('!') ? '!' : ''
+  let normalizedBody = important ? body.slice(1) : body
+  const negative = normalizedBody.startsWith('-') ? '-' : ''
+  if (negative) {
+    normalizedBody = normalizedBody.slice(1)
+  }
+
+  const resolved = resolveUtilityAndValue(normalizedBody, normalizedOptions.units)
+  if (!resolved) {
+    return
+  }
+
+  return {
+    candidate,
+    canonicalCandidate: `${prefix}${important}${negative}${resolved.utility}-[${resolved.value}]`,
+  }
+}
+
+// Based on the CSS.escape algorithm, scoped to class selector escaping.
+export function escapeCssClassName(value: string) {
+  let result = ''
+  for (let index = 0; index < value.length; index++) {
+    const codeUnit = value.charCodeAt(index)
+    const character = value.charAt(index)
+
+    if (codeUnit === 0x0000) {
+      result += '\uFFFD'
+      continue
+    }
+
+    if (
+      (codeUnit >= 0x0001 && codeUnit <= 0x001F)
+      || codeUnit === 0x007F
+      || (index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039)
+      || (index === 1 && codeUnit >= 0x0030 && codeUnit <= 0x0039 && value.charCodeAt(0) === 0x002D)
+    ) {
+      result += `\\${codeUnit.toString(16)} `
+      continue
+    }
+
+    if (
+      codeUnit >= 0x0080
+      || codeUnit === 0x002D
+      || codeUnit === 0x005F
+      || (codeUnit >= 0x0030 && codeUnit <= 0x0039)
+      || (codeUnit >= 0x0041 && codeUnit <= 0x005A)
+      || (codeUnit >= 0x0061 && codeUnit <= 0x007A)
+    ) {
+      result += character
+      continue
+    }
+
+    result += `\\${character}`
+  }
+  return result
+}

package/src/v4/candidates.ts

@@ -1,20 +1,39 @@
 import type { TailwindV4DesignSystem } from './types'
 import postcss from 'postcss'
+import {
+  escapeCssClassName,
+  type BareArbitraryValueOptions,
+  resolveBareArbitraryValueCandidate,
+} from './bare-arbitrary-values'
 
 export function resolveValidTailwindV4Candidates(
   designSystem: TailwindV4DesignSystem,
   candidates: Iterable<string>,
+  options?: {
+    bareArbitraryValues?: boolean | BareArbitraryValueOptions
+  },
 ): Set<string> {
   const validCandidates = new Set<string>()
   const parsedCandidates: string[] = []
+  const originalCandidateByCanonical = new Map<string, string>()
 
   for (const candidate of candidates) {
-    if (!candidate || parsedCandidates.includes(candidate)) {
+    if (!candidate) {
       continue
     }
 
-    if (designSystem.parseCandidate(candidate).length > 0) {
-      parsedCandidates.push(candidate)
+    const bareArbitrary = resolveBareArbitraryValueCandidate(candidate, options?.bareArbitraryValues)
+    const candidateToCheck = bareArbitrary?.canonicalCandidate ?? candidate
+
+    if (parsedCandidates.includes(candidateToCheck)) {
+      continue
+    }
+
+    if (designSystem.parseCandidate(candidateToCheck).length > 0) {
+      parsedCandidates.push(candidateToCheck)
+      if (bareArbitrary) {
+        originalCandidateByCanonical.set(candidateToCheck, candidate)
+      }
     }
   }
 
@@ -27,13 +46,58 @@ export function resolveValidTailwindV4Candidates(
     const candidate = parsedCandidates[index]
     const candidateCss = cssByCandidate[index]
     if (candidate && typeof candidateCss === 'string' && candidateCss.trim().length > 0) {
-      validCandidates.add(candidate)
+      validCandidates.add(originalCandidateByCanonical.get(candidate) ?? candidate)
     }
   }
 
   return validCandidates
 }
 
+function createSelectorAliasMap(
+  candidates: Iterable<string>,
+  options?: boolean | BareArbitraryValueOptions,
+) {
+  const aliases = new Map<string, string>()
+  for (const candidate of candidates) {
+    const bareArbitrary = resolveBareArbitraryValueCandidate(candidate, options)
+    if (!bareArbitrary) {
+      continue
+    }
+    aliases.set(
+      escapeCssClassName(bareArbitrary.canonicalCandidate),
+      escapeCssClassName(bareArbitrary.candidate),
+    )
+  }
+  return aliases
+}
+
+export function replaceBareArbitraryValueSelectors(
+  css: string,
+  candidates: Iterable<string>,
+  options?: boolean | BareArbitraryValueOptions,
+) {
+  const aliases = createSelectorAliasMap(candidates, options)
+  if (aliases.size === 0) {
+    return css
+  }
+
+  let result = css
+  for (const [canonicalSelector, bareSelector] of aliases) {
+    result = result.replaceAll(canonicalSelector, bareSelector)
+  }
+  return result
+}
+
+export function canonicalizeBareArbitraryValueCandidates(
+  candidates: Iterable<string>,
+  options?: boolean | BareArbitraryValueOptions,
+) {
+  return Array.from(candidates, (candidate) => {
+    const bareArbitrary = resolveBareArbitraryValueCandidate(candidate, options)
+    return bareArbitrary?.canonicalCandidate ?? candidate
+  })
+}
+
 function splitTopLevel(value: string, separator: string) {
   const result: string[] = []
   let start = 0

package/src/v4/engine.ts

@@ -6,7 +6,12 @@ import type {
   TailwindV4SourcePattern,
 } from './types'
 import { extractRawCandidates, extractRawCandidatesWithPositions } from '../extraction/candidate-extractor'
-import { extractTailwindV4InlineSourceCandidates, resolveValidTailwindV4Candidates } from './candidates'
+import {
+  canonicalizeBareArbitraryValueCandidates,
+  extractTailwindV4InlineSourceCandidates,
+  replaceBareArbitraryValueSelectors,
+  resolveValidTailwindV4Candidates,
+} from './candidates'
 import { compileTailwindV4Source, loadTailwindV4DesignSystem } from './node-adapter'
 
 function resolveScanSources(
@@ -72,13 +77,20 @@ export function createTailwindV4Engine(source: TailwindV4ResolvedSource): Tailwi
       const { compiled, dependencies } = await compileTailwindV4Source(source)
       const rawCandidates = await collectRawCandidates(source, options, compiled.sources)
       const designSystem = await loadTailwindV4DesignSystem(source)
-      const classSet = resolveValidTailwindV4Candidates(designSystem, rawCandidates)
+      const classSet = resolveValidTailwindV4Candidates(designSystem, rawCandidates, {
+        ...(options?.bareArbitraryValues === undefined ? {} : { bareArbitraryValues: options.bareArbitraryValues }),
+      })
       const inlineSources = extractTailwindV4InlineSourceCandidates(source.css)
       for (const candidate of inlineSources.excluded) {
         classSet.delete(candidate)
       }
 
-      const css = compiled.build(Array.from(classSet))
+      const buildCandidates = canonicalizeBareArbitraryValueCandidates(classSet, options?.bareArbitraryValues)
+      const css = replaceBareArbitraryValueSelectors(
+        compiled.build(buildCandidates),
+        classSet,
+        options?.bareArbitraryValues,
+      )
 
       return {
         css,

package/src/v4/types.ts

@@ -24,6 +24,12 @@ export interface TailwindV4CandidateSource {
 export interface TailwindV4GenerateOptions {
   candidates?: Iterable<string>
   sources?: TailwindV4CandidateSource[]
+  /**
+   * Enables UnoCSS-style bare arbitrary values such as `p-10%` and `p-2.5px`.
+   */
+  bareArbitraryValues?: boolean | {
+    units?: string[]
+  }
   /**
    * 扫描文件系统 source entries 中的候选类名。
    *