tailwindcss-patch 9.0.1 → 9.2.0

package/src/v4/candidates.ts

@@ -0,0 +1,224 @@
+import type { TailwindV4DesignSystem } from './types'
+import postcss from 'postcss'
+
+export function resolveValidTailwindV4Candidates(
+  designSystem: TailwindV4DesignSystem,
+  candidates: Iterable<string>,
+): Set<string> {
+  const validCandidates = new Set<string>()
+  const parsedCandidates: string[] = []
+
+  for (const candidate of candidates) {
+    if (!candidate || parsedCandidates.includes(candidate)) {
+      continue
+    }
+
+    if (designSystem.parseCandidate(candidate).length > 0) {
+      parsedCandidates.push(candidate)
+    }
+  }
+
+  if (parsedCandidates.length === 0) {
+    return validCandidates
+  }
+
+  const cssByCandidate = designSystem.candidatesToCss(parsedCandidates)
+  for (let index = 0; index < parsedCandidates.length; index++) {
+    const candidate = parsedCandidates[index]
+    const candidateCss = cssByCandidate[index]
+    if (candidate && typeof candidateCss === 'string' && candidateCss.trim().length > 0) {
+      validCandidates.add(candidate)
+    }
+  }
+
+  return validCandidates
+}
+
+function splitTopLevel(value: string, separator: string) {
+  const result: string[] = []
+  let start = 0
+  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 === '(' || character === '[' || character === '{') {
+      depth++
+      continue
+    }
+
+    if (character === ')' || character === ']' || character === '}') {
+      depth = Math.max(0, depth - 1)
+      continue
+    }
+
+    if (depth === 0 && character === separator) {
+      const item = value.slice(start, index).trim()
+      if (item) {
+        result.push(item)
+      }
+      start = index + 1
+    }
+  }
+
+  const item = value.slice(start).trim()
+  if (item) {
+    result.push(item)
+  }
+  return result
+}
+
+const sequencePattern = /^(-?\d+)\.\.(-?\d+)(?:\.\.(-?\d+))?$/
+
+function expandSequence(value: string) {
+  const match = value.match(sequencePattern)
+  if (!match) {
+    return [value]
+  }
+
+  const [, startValue, endValue, stepValue] = match
+  if (startValue === undefined || endValue === undefined) {
+    return [value]
+  }
+
+  const start = Number.parseInt(startValue, 10)
+  const end = Number.parseInt(endValue, 10)
+  let step = stepValue === undefined ? (start <= end ? 1 : -1) : Number.parseInt(stepValue, 10)
+  if (step === 0) {
+    throw new Error('Step cannot be zero in Tailwind CSS v4 inline source sequence.')
+  }
+
+  const ascending = start < end
+  if (ascending && step < 0) {
+    step = -step
+  }
+  if (!ascending && step > 0) {
+    step = -step
+  }
+
+  const result: string[] = []
+  for (let current = start; ascending ? current <= end : current >= end; current += step) {
+    result.push(current.toString())
+  }
+  return result
+}
+
+function expandInlinePattern(pattern: string): string[] {
+  const openIndex = pattern.indexOf('{')
+  if (openIndex === -1) {
+    return [pattern]
+  }
+
+  const prefix = pattern.slice(0, openIndex)
+  const rest = pattern.slice(openIndex)
+  let depth = 0
+  let closeIndex = -1
+  for (let index = 0; index < rest.length; index++) {
+    const character = rest[index]
+    if (character === '{') {
+      depth++
+    }
+    else if (character === '}') {
+      depth--
+      if (depth === 0) {
+        closeIndex = index
+        break
+      }
+    }
+  }
+
+  if (closeIndex === -1) {
+    throw new Error(`The Tailwind CSS v4 inline source pattern "${pattern}" is not balanced.`)
+  }
+
+  const body = rest.slice(1, closeIndex)
+  const suffix = rest.slice(closeIndex + 1)
+  const parts = sequencePattern.test(body)
+    ? expandSequence(body)
+    : splitTopLevel(body, ',').flatMap(part => expandInlinePattern(part))
+  const suffixes = expandInlinePattern(suffix)
+
+  const result: string[] = []
+  for (const part of parts) {
+    for (const expandedSuffix of suffixes) {
+      result.push(`${prefix}${part}${expandedSuffix}`)
+    }
+  }
+  return result
+}
+
+function unquoteCssString(value: string) {
+  const quote = value[0]
+  if ((quote !== '"' && quote !== '\'') || value[value.length - 1] !== quote) {
+    return undefined
+  }
+
+  let result = ''
+  for (let index = 1; index < value.length - 1; index++) {
+    const character = value[index]
+    if (character === '\\') {
+      index++
+      result += value[index] ?? ''
+      continue
+    }
+    result += character
+  }
+  return result
+}
+
+export function extractTailwindV4InlineSourceCandidates(css: string) {
+  const included = new Set<string>()
+  const excluded = new Set<string>()
+
+  const root = postcss.parse(css)
+  root.walkAtRules('source', (rule) => {
+    let params = rule.params.trim()
+    if (!params) {
+      return
+    }
+
+    let negated = false
+    if (params.startsWith('not ')) {
+      negated = true
+      params = params.slice(4).trim()
+    }
+
+    if (!params.startsWith('inline(') || !params.endsWith(')')) {
+      return
+    }
+
+    const inlineValue = unquoteCssString(params.slice(7, -1).trim())
+    if (inlineValue === undefined) {
+      return
+    }
+
+    const target = negated ? excluded : included
+    for (const part of splitTopLevel(inlineValue, ' ')) {
+      for (const candidate of expandInlinePattern(part)) {
+        target.add(candidate)
+      }
+    }
+  })
+
+  return {
+    included,
+    excluded,
+  }
+}

package/src/v4/engine.ts

@@ -0,0 +1,93 @@
+import type {
+  TailwindV4Engine,
+  TailwindV4GenerateOptions,
+  TailwindV4GenerateResult,
+  TailwindV4ResolvedSource,
+  TailwindV4SourcePattern,
+} from './types'
+import { extractRawCandidates, extractRawCandidatesWithPositions } from '../extraction/candidate-extractor'
+import { extractTailwindV4InlineSourceCandidates, resolveValidTailwindV4Candidates } from './candidates'
+import { compileTailwindV4Source, loadTailwindV4DesignSystem } from './node-adapter'
+
+function resolveScanSources(
+  options: TailwindV4GenerateOptions | undefined,
+  compiledSources: TailwindV4SourcePattern[],
+) {
+  if (Array.isArray(options?.scanSources)) {
+    return options.scanSources
+  }
+  if (options?.scanSources === true) {
+    return compiledSources
+  }
+  return []
+}
+
+async function collectRawCandidates(
+  source: TailwindV4ResolvedSource,
+  options: TailwindV4GenerateOptions | undefined,
+  compiledSources: TailwindV4SourcePattern[] = [],
+) {
+  const rawCandidates = new Set<string>()
+
+  for (const candidate of options?.candidates ?? []) {
+    rawCandidates.add(candidate)
+  }
+
+  for (const candidateSource of options?.sources ?? []) {
+    const candidates = await extractRawCandidatesWithPositions(candidateSource.content, candidateSource.extension)
+    for (const candidate of candidates) {
+      rawCandidates.add(candidate.rawCandidate)
+    }
+  }
+
+  const filesystemSources = resolveScanSources(options, compiledSources)
+  if (filesystemSources.length > 0) {
+    for (const candidate of await extractRawCandidates(filesystemSources)) {
+      rawCandidates.add(candidate)
+    }
+  }
+
+  const inlineSources = extractTailwindV4InlineSourceCandidates(source.css)
+  for (const candidate of inlineSources.included) {
+    rawCandidates.add(candidate)
+  }
+  for (const candidate of inlineSources.excluded) {
+    rawCandidates.delete(candidate)
+  }
+
+  return rawCandidates
+}
+
+export function createTailwindV4Engine(source: TailwindV4ResolvedSource): TailwindV4Engine {
+  return {
+    source,
+    loadDesignSystem() {
+      return loadTailwindV4DesignSystem(source)
+    },
+    async validateCandidates(candidates) {
+      const designSystem = await loadTailwindV4DesignSystem(source)
+      return resolveValidTailwindV4Candidates(designSystem, candidates)
+    },
+    async generate(options): Promise<TailwindV4GenerateResult> {
+      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 inlineSources = extractTailwindV4InlineSourceCandidates(source.css)
+      for (const candidate of inlineSources.excluded) {
+        classSet.delete(candidate)
+      }
+
+      const css = compiled.build(Array.from(classSet))
+
+      return {
+        css,
+        classSet,
+        rawCandidates,
+        dependencies: Array.from(dependencies),
+        sources: compiled.sources,
+        root: compiled.root,
+      }
+    },
+  }
+}

package/src/v4/index.ts

@@ -0,0 +1,25 @@
+export {
+  extractTailwindV4InlineSourceCandidates,
+  resolveValidTailwindV4Candidates,
+} from './candidates'
+export { createTailwindV4Engine } from './engine'
+export {
+  compileTailwindV4Source,
+  loadTailwindV4DesignSystem,
+  loadTailwindV4NodeModule,
+} from './node-adapter'
+export {
+  resolveTailwindV4Source,
+  resolveTailwindV4SourceFromPatchOptions,
+  tailwindV4SourceOptionsFromPatchOptions,
+} from './source'
+export type {
+  TailwindV4CandidateSource,
+  TailwindV4DesignSystem,
+  TailwindV4Engine,
+  TailwindV4GenerateOptions,
+  TailwindV4GenerateResult,
+  TailwindV4ResolvedSource,
+  TailwindV4SourceOptions,
+  TailwindV4SourcePattern,
+} from './types'

package/src/v4/node-adapter.ts

@@ -0,0 +1,209 @@
+import type {
+  TailwindV4DesignSystem,
+  TailwindV4ResolvedSource,
+  TailwindV4SourcePattern,
+} from './types'
+import { createRequire } from 'node:module'
+import { pathToFileURL } from 'node:url'
+import path from 'pathe'
+
+interface TailwindV4CompiledSource {
+  sources: TailwindV4SourcePattern[]
+  root: null | 'none' | {
+    base: string
+    pattern: string
+  }
+  build: (candidates: string[]) => string
+}
+
+interface TailwindV4NodeModule {
+  compile: (css: string, options: {
+    base: string
+    onDependency: (dependency: string) => void
+    customCssResolver?: (id: string, base: string) => Promise<string | false | undefined>
+  }) => Promise<TailwindV4CompiledSource>
+  __unstable__loadDesignSystem: (css: string, options: { base: string }) => Promise<TailwindV4DesignSystem>
+}
+
+const nodeModulePromiseCache = new Map<string, Promise<TailwindV4NodeModule>>()
+const designSystemPromiseCache = new Map<string, Promise<TailwindV4DesignSystem>>()
+
+function unique(values: Iterable<string>) {
+  return Array.from(new Set(Array.from(values).filter(Boolean).map(value => path.resolve(value))))
+}
+
+function createRequireBase(base: string) {
+  return path.join(base, 'package.json')
+}
+
+function isRelativeSpecifier(id: string) {
+  return id.startsWith('./') || id.startsWith('../') || id === '.' || id === '..'
+}
+
+function isAbsoluteSpecifier(id: string) {
+  return path.isAbsolute(id)
+}
+
+function isCssSpecifier(id: string) {
+  return path.extname(id) === '.css'
+}
+
+function createCssResolutionCandidates(id: string) {
+  if (isCssSpecifier(id)) {
+    return [id]
+  }
+  return [`${id}/index.css`, id]
+}
+
+function createFallbackCssResolver(baseCandidates: string[]) {
+  const bases = unique(baseCandidates)
+  return async (id: string) => {
+    if (isRelativeSpecifier(id) || isAbsoluteSpecifier(id)) {
+      return undefined
+    }
+
+    for (const base of bases) {
+      const requireFromBase = createRequire(createRequireBase(base))
+      for (const candidate of createCssResolutionCandidates(id)) {
+        try {
+          return requireFromBase.resolve(candidate)
+        }
+        catch {}
+      }
+    }
+    return undefined
+  }
+}
+
+async function importResolvedModule(resolved: string): Promise<TailwindV4NodeModule> {
+  return import(pathToFileURL(resolved).href) as unknown as Promise<TailwindV4NodeModule>
+}
+
+async function importTailwindNodeFromBase(base: string): Promise<TailwindV4NodeModule | undefined> {
+  try {
+    const resolved = createRequire(createRequireBase(base)).resolve('@tailwindcss/node')
+    return await importResolvedModule(resolved)
+  }
+  catch {
+    return undefined
+  }
+}
+
+async function importFallbackTailwindNode(): Promise<TailwindV4NodeModule> {
+  return import('@tailwindcss/node') as unknown as Promise<TailwindV4NodeModule>
+}
+
+export async function loadTailwindV4NodeModule(baseCandidates: string[]): Promise<TailwindV4NodeModule> {
+  const bases = unique(baseCandidates)
+  const cacheKey = JSON.stringify(bases)
+  const cached = nodeModulePromiseCache.get(cacheKey)
+  if (cached) {
+    return cached
+  }
+
+  const promise = (async () => {
+    for (const base of bases) {
+      const loaded = await importTailwindNodeFromBase(base)
+      if (loaded) {
+        return loaded
+      }
+    }
+
+    return importFallbackTailwindNode()
+  })()
+
+  nodeModulePromiseCache.set(cacheKey, promise)
+  promise.catch(() => {
+    if (nodeModulePromiseCache.get(cacheKey) === promise) {
+      nodeModulePromiseCache.delete(cacheKey)
+    }
+  })
+  return promise
+}
+
+function createDesignSystemCacheKey(css: string, bases: string[]) {
+  return JSON.stringify({
+    css,
+    bases: unique(bases),
+  })
+}
+
+export function getTailwindV4DesignSystemCacheKey(source: Pick<TailwindV4ResolvedSource, 'css' | 'base' | 'baseFallbacks'>) {
+  return createDesignSystemCacheKey(source.css, [source.base, ...source.baseFallbacks])
+}
+
+export async function loadTailwindV4DesignSystem(source: TailwindV4ResolvedSource): Promise<TailwindV4DesignSystem> {
+  const bases = unique([source.base, ...source.baseFallbacks])
+  if (bases.length === 0) {
+    throw new Error('No base directories provided for Tailwind CSS v4 design system.')
+  }
+
+  const cacheKey = createDesignSystemCacheKey(source.css, bases)
+  const cached = designSystemPromiseCache.get(cacheKey)
+  if (cached) {
+    return cached
+  }
+
+  const promise = (async () => {
+    const node = await loadTailwindV4NodeModule([source.projectRoot, ...bases])
+    let lastError: unknown
+
+    for (const base of bases) {
+      try {
+        return await node.__unstable__loadDesignSystem(source.css, { base })
+      }
+      catch (error) {
+        lastError = error
+      }
+    }
+
+    if (lastError instanceof Error) {
+      throw lastError
+    }
+    throw new Error('Failed to load Tailwind CSS v4 design system.')
+  })()
+
+  designSystemPromiseCache.set(cacheKey, promise)
+  promise.catch(() => {
+    if (designSystemPromiseCache.get(cacheKey) === promise) {
+      designSystemPromiseCache.delete(cacheKey)
+    }
+  })
+  return promise
+}
+
+export async function compileTailwindV4Source(source: TailwindV4ResolvedSource) {
+  const bases = unique([source.base, ...source.baseFallbacks])
+  if (bases.length === 0) {
+    throw new Error('No base directories provided for Tailwind CSS v4 compiler.')
+  }
+
+  const node = await loadTailwindV4NodeModule([source.projectRoot, ...bases])
+  let lastError: unknown
+
+  for (const base of bases) {
+    const dependencies = new Set(source.dependencies)
+    try {
+      const compiled = await node.compile(source.css, {
+        base,
+        customCssResolver: createFallbackCssResolver([source.projectRoot, ...bases]),
+        onDependency(dependency) {
+          dependencies.add(path.resolve(dependency))
+        },
+      })
+
+      return {
+        compiled,
+        dependencies,
+      }
+    }
+    catch (error) {
+      lastError = error
+    }
+  }
+
+  if (lastError instanceof Error) {
+    throw lastError
+  }
+  throw new Error('Failed to compile Tailwind CSS v4 source.')
+}