tailwindcss-patch 9.3.1 → 9.3.3

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

@@ -39,7 +39,8 @@ const DEFAULT_BARE_ARBITRARY_VALUE_UNITS = [
 ]
 
 const NUMBER_RE = /^-?(?:\d+|\d*\.\d+)$/
-const FUNCTION_VALUE_RE = /^[a-zA-Z_-][a-zA-Z0-9_-]*\(/
+const FUNCTION_VALUE_RE = /^[a-z_-][\w-]*\(/i
+const HEX_ESCAPE_RE = /^[\da-f]$/i
 
 function splitVariantPrefix(candidate: string) {
   let depth = 0
@@ -133,8 +134,55 @@ function isBalancedFunctionValue(value: string) {
   return depth === 0 && quote === undefined
 }
 
+function isEscapedAt(value: string, index: number) {
+  let slashCount = 0
+  for (let slashIndex = index - 1; slashIndex >= 0 && value[slashIndex] === '\\'; slashIndex--) {
+    slashCount++
+  }
+  return slashCount % 2 === 1
+}
+
+function isBalancedBareArbitraryBody(value: string) {
+  let depth = 0
+  let quote: string | undefined
+
+  for (let index = 0; index < value.length; index++) {
+    const character = value[index]
+
+    if (isEscapedAt(value, 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--
+      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)
+  return /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6,8})$/i.test(value)
 }
 
 function isQuotedValue(value: string) {
@@ -173,12 +221,55 @@ function normalizeBareArbitraryValueOptions(options: boolean | BareArbitraryValu
   }
 }
 
+function normalizeEscapedValue(value: string) {
+  let result = ''
+  for (let index = 0; index < value.length; index++) {
+    const character = value[index]
+    if (character !== '\\') {
+      result += character
+      continue
+    }
+
+    const nextCharacter = value[index + 1]
+    if (nextCharacter === undefined) {
+      result += character
+      continue
+    }
+
+    if (HEX_ESCAPE_RE.test(nextCharacter)) {
+      let hex = ''
+      let nextIndex = index + 1
+      while (nextIndex < value.length && hex.length < 6) {
+        const hexCharacter = value[nextIndex]
+        if (hexCharacter === undefined || !HEX_ESCAPE_RE.test(hexCharacter)) {
+          break
+        }
+        hex += hexCharacter
+        nextIndex++
+      }
+      if (/[\t\n\f\r ]/.test(value[nextIndex] ?? '')) {
+        nextIndex++
+      }
+
+      const decoded = String.fromCodePoint(Number.parseInt(hex, 16))
+      result += decoded === '_' ? '\\_' : decoded
+      index = nextIndex - 1
+      continue
+    }
+
+    result += nextCharacter === '_' ? '\\_' : nextCharacter
+    index++
+  }
+  return result
+}
+
 function resolveValueWithUnit(body: string, units: string[]) {
+  const value = normalizeEscapedValue(body)
   for (const unit of units) {
-    if (!body.endsWith(unit)) {
+    if (!value.endsWith(unit)) {
       continue
     }
-    const numberPart = body.slice(0, -unit.length)
+    const numberPart = value.slice(0, -unit.length)
     if (NUMBER_RE.test(numberPart)) {
       return `${numberPart}${unit}`
     }
@@ -186,21 +277,22 @@ function resolveValueWithUnit(body: string, units: string[]) {
 }
 
 function resolveArbitraryValue(body: string, units: string[]) {
-  const withUnit = resolveValueWithUnit(body, units)
+  const value = normalizeEscapedValue(body)
+  const withUnit = resolveValueWithUnit(value, units)
   if (withUnit) {
     return withUnit
   }
 
-  if (isHexColorValue(body)) {
-    return body
+  if (isHexColorValue(value)) {
+    return value
   }
 
-  if (isQuotedValue(body)) {
-    return body
+  if (isQuotedValue(value)) {
+    return value
   }
 
-  if (FUNCTION_VALUE_RE.test(body) && body.endsWith(')') && isBalancedFunctionValue(body)) {
-    return body
+  if (FUNCTION_VALUE_RE.test(value) && value.endsWith(')') && isBalancedFunctionValue(value)) {
+    return value
   }
 }
 
@@ -208,11 +300,10 @@ function resolveUtilityAndValue(body: string, units: string[]) {
   let depth = 0
   let quote: string | undefined
 
-  for (let index = 1; index < body.length; index++) {
+  for (let index = body.length - 1; index > 0; index--) {
     const character = body[index]
 
-    if (character === '\\') {
-      index++
+    if (isEscapedAt(body, index)) {
       continue
     }
 
@@ -228,12 +319,12 @@ function resolveUtilityAndValue(body: string, units: string[]) {
       continue
     }
 
-    if (character === '(' || character === '{') {
+    if (character === ')' || character === '}') {
       depth++
       continue
     }
 
-    if (character === ')' || character === '}') {
+    if (character === '(' || character === '{') {
       depth = Math.max(0, depth - 1)
       continue
     }
@@ -274,6 +365,9 @@ export function resolveBareArbitraryValueCandidate(
   if (negative) {
     normalizedBody = normalizedBody.slice(1)
   }
+  if (!isBalancedBareArbitraryBody(normalizedBody)) {
+    return
+  }
 
   const resolved = resolveUtilityAndValue(normalizedBody, normalizedOptions.units)
   if (!resolved) {

package/src/v4/candidates.ts

@@ -1,10 +1,7 @@
+import type { BareArbitraryValueOptions } from './bare-arbitrary-values'
 import type { TailwindV4DesignSystem } from './types'
 import postcss from 'postcss'
-import {
-  escapeCssClassName,
-  type BareArbitraryValueOptions,
-  resolveBareArbitraryValueCandidate,
-} from './bare-arbitrary-values'
+import { escapeCssClassName, resolveBareArbitraryValueCandidate } from './bare-arbitrary-values'
 
 export function resolveValidTailwindV4Candidates(
   designSystem: TailwindV4DesignSystem,
@@ -15,7 +12,7 @@ export function resolveValidTailwindV4Candidates(
 ): Set<string> {
   const validCandidates = new Set<string>()
   const parsedCandidates: string[] = []
-  const originalCandidateByCanonical = new Map<string, string>()
+  const originalCandidatesByCanonical = new Map<string, Set<string>>()
 
   for (const candidate of candidates) {
     if (!candidate) {
@@ -25,15 +22,19 @@ export function resolveValidTailwindV4Candidates(
     const bareArbitrary = resolveBareArbitraryValueCandidate(candidate, options?.bareArbitraryValues)
     const candidateToCheck = bareArbitrary?.canonicalCandidate ?? candidate
 
-    if (parsedCandidates.includes(candidateToCheck)) {
+    if (bareArbitrary) {
+      const originalCandidates = originalCandidatesByCanonical.get(candidateToCheck) ?? new Set<string>()
+      originalCandidates.add(candidate)
+      originalCandidatesByCanonical.set(candidateToCheck, originalCandidates)
+    }
+
+    const alreadyParsed = parsedCandidates.includes(candidateToCheck)
+    if (alreadyParsed) {
       continue
     }
 
     if (designSystem.parseCandidate(candidateToCheck).length > 0) {
       parsedCandidates.push(candidateToCheck)
-      if (bareArbitrary) {
-        originalCandidateByCanonical.set(candidateToCheck, candidate)
-      }
     }
   }
 
@@ -46,7 +47,14 @@ export function resolveValidTailwindV4Candidates(
     const candidate = parsedCandidates[index]
     const candidateCss = cssByCandidate[index]
     if (candidate && typeof candidateCss === 'string' && candidateCss.trim().length > 0) {
-      validCandidates.add(originalCandidateByCanonical.get(candidate) ?? candidate)
+      const originalCandidates = originalCandidatesByCanonical.get(candidate)
+      if (originalCandidates) {
+        for (const originalCandidate of originalCandidates) {
+          validCandidates.add(originalCandidate)
+        }
+        continue
+      }
+      validCandidates.add(candidate)
     }
   }
 
@@ -57,16 +65,16 @@ function createSelectorAliasMap(
   candidates: Iterable<string>,
   options?: boolean | BareArbitraryValueOptions,
 ) {
-  const aliases = new Map<string, string>()
+  const aliases = new Map<string, Set<string>>()
   for (const candidate of candidates) {
     const bareArbitrary = resolveBareArbitraryValueCandidate(candidate, options)
     if (!bareArbitrary) {
       continue
     }
-    aliases.set(
-      escapeCssClassName(bareArbitrary.canonicalCandidate),
-      escapeCssClassName(bareArbitrary.candidate),
-    )
+    const canonicalSelector = escapeCssClassName(bareArbitrary.canonicalCandidate)
+    const bareSelectors = aliases.get(canonicalSelector) ?? new Set<string>()
+    bareSelectors.add(escapeCssClassName(bareArbitrary.candidate))
+    aliases.set(canonicalSelector, bareSelectors)
   }
   return aliases
 }
@@ -81,11 +89,31 @@ export function replaceBareArbitraryValueSelectors(
     return css
   }
 
-  let result = css
-  for (const [canonicalSelector, bareSelector] of aliases) {
-    result = result.replaceAll(canonicalSelector, bareSelector)
+  if (Array.from(aliases.values()).every(bareSelectors => bareSelectors.size === 1)) {
+    let result = css
+    for (const [canonicalSelector, bareSelectors] of aliases) {
+      const bareSelector = Array.from(bareSelectors)[0]
+      if (bareSelector !== undefined) {
+        result = result.replaceAll(canonicalSelector, bareSelector)
+      }
+    }
+    return result
   }
-  return result
+
+  const root = postcss.parse(css)
+  root.walkRules((rule) => {
+    let selectors = rule.selectors
+    for (const [canonicalSelector, bareSelectors] of aliases) {
+      selectors = selectors.flatMap((selector) => {
+        if (!selector.includes(canonicalSelector)) {
+          return selector
+        }
+        return Array.from(bareSelectors, bareSelector => selector.replaceAll(canonicalSelector, bareSelector))
+      })
+    }
+    rule.selectors = selectors
+  })
+  return root.toString()
 }
 
 export function canonicalizeBareArbitraryValueCandidates(

package/src/v4/index.ts

@@ -15,6 +15,7 @@ export {
 } from './source'
 export type {
   TailwindV4CandidateSource,
+  TailwindV4CssSource,
   TailwindV4DesignSystem,
   TailwindV4Engine,
   TailwindV4GenerateOptions,

package/src/v4/source.ts

@@ -1,5 +1,5 @@
 import type { NormalizedTailwindCssPatchOptions, TailwindCssPatchOptions } from '../config'
-import type { TailwindV4ResolvedSource, TailwindV4SourceOptions } from './types'
+import type { TailwindV4CssSource, TailwindV4ResolvedSource, TailwindV4SourceOptions } from './types'
 import { promises as fs } from 'node:fs'
 import process from 'node:process'
 import path from 'pathe'
@@ -87,6 +87,35 @@ async function resolveCssEntries(entries: string[], projectRoot: string, base: s
   }
 }
 
+function resolveCssSources(sources: TailwindV4CssSource[], projectRoot: string, base: string | undefined) {
+  const resolvedSources = sources.map(source => ({
+    ...source,
+    base: source.base === undefined ? undefined : resolveBase(source.base, projectRoot),
+    file: source.file === undefined
+      ? undefined
+      : path.isAbsolute(source.file)
+        ? path.resolve(source.file)
+        : path.resolve(projectRoot, source.file),
+    dependencies: source.dependencies?.map(dependency =>
+      path.isAbsolute(dependency) ? path.resolve(dependency) : path.resolve(projectRoot, dependency),
+    ) ?? [],
+  }))
+  const firstSource = resolvedSources[0]
+  const resolvedBase = base
+    ?? firstSource?.base
+    ?? (firstSource?.file ? path.dirname(firstSource.file) : projectRoot)
+  const dependencies = resolvedSources.flatMap(source => [
+    source.file,
+    ...source.dependencies,
+  ]).filter((dependency): dependency is string => Boolean(dependency))
+
+  return {
+    base: resolvedBase,
+    css: resolvedSources.map(source => source.css).join('\n'),
+    dependencies,
+  }
+}
+
 function normalizeResolvedSource(
   source: {
     projectRoot: string
@@ -129,15 +158,27 @@ export async function resolveTailwindV4Source(options: TailwindV4SourceOptions =
     })
   }
 
-  if (options.cssEntries?.length) {
-    const entries = await resolveCssEntries(options.cssEntries, projectRoot, configuredBase)
+  if (options.cssEntries?.length || options.cssSources?.length) {
+    const entries = options.cssEntries?.length
+      ? await resolveCssEntries(options.cssEntries, projectRoot, configuredBase)
+      : undefined
+    const sources = options.cssSources?.length
+      ? resolveCssSources(options.cssSources, projectRoot, configuredBase)
+      : undefined
+    const css = [
+      entries?.css,
+      sources?.css,
+    ].filter(Boolean).join('\n')
     return normalizeResolvedSource({
       projectRoot,
       cwd,
-      base: entries.base,
+      base: configuredBase ?? entries?.base ?? sources?.base ?? cwd,
       baseFallbacks,
-      css: entries.css,
-      dependencies: entries.dependencies,
+      css,
+      dependencies: [
+        ...(entries?.dependencies ?? []),
+        ...(sources?.dependencies ?? []),
+      ],
     })
   }
 
@@ -177,6 +218,7 @@ function createSourceOptionsFromNormalizedPatchOptions(
     ...(v4?.configuredBase === undefined ? {} : { base: v4.configuredBase }),
     baseFallbacks,
     ...(v4?.css === undefined ? {} : { css: v4.css }),
+    ...(v4?.cssSources === undefined ? {} : { cssSources: v4.cssSources }),
     ...(v4?.cssEntries === undefined ? {} : { cssEntries: v4.cssEntries }),
     packageName: options.tailwind.packageName,
   }

package/src/v4/types.ts

@@ -4,10 +4,18 @@ export interface TailwindV4SourceOptions {
   base?: string
   baseFallbacks?: string[]
   css?: string
+  cssSources?: TailwindV4CssSource[]
   cssEntries?: string[]
   packageName?: string
 }
 
+export interface TailwindV4CssSource {
+  css: string
+  base?: string
+  file?: string
+  dependencies?: string[]
+}
+
 export interface TailwindV4ResolvedSource {
   projectRoot: string
   base: string