tailwindcss-patch 9.3.2 → 9.3.4

package/src/extraction/candidate-extractor.ts

@@ -55,6 +55,190 @@ export interface ExtractValidCandidatesOption {
   bareArbitraryValues?: boolean | BareArbitraryValueOptions
 }
 
+export interface ExtractSourceCandidate {
+  rawCandidate: string
+  start: number
+  end: number
+}
+
+interface ExtractSourceCandidateWithContext extends ExtractSourceCandidate {
+  content: string
+  extension: string
+  localStart: number
+}
+
+const HTML_ATTRIBUTE_NAME_CANDIDATE_RE = /^(?:class|className|hover-class|hoverClass)$/
+const CSS_DIRECTIVE_CANDIDATE_RE = /^@(?:apply|tailwind|source|config|plugin|theme|utility|custom-variant|variant)$/
+const CSS_APPLY_IMPORTANT = '!important'
+const JS_LIKE_SOURCE_EXTENSION_RE = /^(?:[cm]?[jt]sx?)$/
+const MIXED_TEMPLATE_SOURCE_EXTENSION_RE = /^(?:vue|uvue|nvue|svelte|mpx)$/
+const CSS_LIKE_SOURCE_EXTENSION_RE = /^(?:css|wxss|acss|jxss|ttss|qss|tyss|scss|sass|less|styl|stylus)$/
+const SFC_SCRIPT_BLOCK_RE = /<script\b[^>]*>([\s\S]*?)<\/script>/gi
+
+function isWhitespace(value: string | undefined) {
+  return value === ' ' || value === '\n' || value === '\r' || value === '\t' || value === '\f'
+}
+
+function isHtmlAttributeNameCandidate(content: string, candidate: ExtractSourceCandidate) {
+  if (!HTML_ATTRIBUTE_NAME_CANDIDATE_RE.test(candidate.rawCandidate)) {
+    return false
+  }
+  let index = candidate.end
+  while (isWhitespace(content[index])) {
+    index++
+  }
+  return content[index] === '='
+}
+
+function isInsideHtmlTagText(content: string, candidate: ExtractSourceCandidate) {
+  const open = content.lastIndexOf('<', candidate.start)
+  const close = content.lastIndexOf('>', candidate.start)
+  if (open > close) {
+    return false
+  }
+  const nextOpen = content.indexOf('<', candidate.end)
+  return nextOpen !== -1 && (nextOpen < content.indexOf('>', candidate.end) || content.indexOf('>', candidate.end) === -1)
+}
+
+function isCssDirectiveCandidate(candidate: string) {
+  return candidate === CSS_APPLY_IMPORTANT || CSS_DIRECTIVE_CANDIDATE_RE.test(candidate)
+}
+
+function isCandidateInCssApplyParams(content: string, candidate: ExtractSourceCandidate) {
+  const apply = content.lastIndexOf('@apply', candidate.start)
+  if (apply === -1) {
+    return false
+  }
+  const boundary = content.slice(apply + '@apply'.length, candidate.start)
+  return !/[;{}]/.test(boundary)
+}
+
+function isCandidateInsideJsStringStaticContent(content: string, start: number) {
+  let quote: '"' | '\'' | '`' | undefined
+  let templateExpressionDepth = 0
+  for (let index = 0; index < start; index++) {
+    const char = content[index]
+    const next = content[index + 1]
+
+    if (quote && char === '\\') {
+      index++
+      continue
+    }
+
+    if (quote === '`' && templateExpressionDepth > 0) {
+      if (char === '"' || char === '\'') {
+        const nestedQuote = char
+        index++
+        while (index < start) {
+          const nestedChar = content[index]
+          if (nestedChar === '\\') {
+            index += 2
+            continue
+          }
+          if (nestedChar === nestedQuote) {
+            break
+          }
+          index++
+        }
+        continue
+      }
+      if (char === '`') {
+        index++
+        while (index < start) {
+          const nestedChar = content[index]
+          if (nestedChar === '\\') {
+            index += 2
+            continue
+          }
+          if (nestedChar === '`') {
+            break
+          }
+          index++
+        }
+        continue
+      }
+      if (char === '{') {
+        templateExpressionDepth++
+        continue
+      }
+      if (char === '}') {
+        templateExpressionDepth--
+        continue
+      }
+      continue
+    }
+
+    if (quote) {
+      if (quote === '`' && char === '$' && next === '{') {
+        templateExpressionDepth = 1
+        index++
+        continue
+      }
+      if (char === quote) {
+        quote = undefined
+      }
+      continue
+    }
+
+    if (char === '"' || char === '\'' || char === '`') {
+      quote = char
+    }
+  }
+
+  return quote !== undefined && templateExpressionDepth === 0
+}
+
+function shouldKeepSourceCandidate(content: string, extension: string, candidate: ExtractSourceCandidate) {
+  if (!candidate.rawCandidate || isCssDirectiveCandidate(candidate.rawCandidate)) {
+    return false
+  }
+  if (CSS_LIKE_SOURCE_EXTENSION_RE.test(extension) && !isCandidateInCssApplyParams(content, candidate)) {
+    return false
+  }
+  if (isHtmlAttributeNameCandidate(content, candidate)) {
+    return false
+  }
+  if (isInsideHtmlTagText(content, candidate)) {
+    return false
+  }
+  if (
+    JS_LIKE_SOURCE_EXTENSION_RE.test(extension)
+    && !isCandidateInsideJsStringStaticContent(content, candidate.start)
+  ) {
+    return false
+  }
+  return true
+}
+
+function createLocalCandidate(candidate: ExtractSourceCandidateWithContext): ExtractSourceCandidate {
+  return {
+    rawCandidate: candidate.rawCandidate,
+    start: candidate.localStart,
+    end: candidate.localStart + candidate.rawCandidate.length,
+  }
+}
+
+async function extractMixedSourceScriptCandidates(content: string) {
+  const candidates: ExtractSourceCandidateWithContext[] = []
+  SFC_SCRIPT_BLOCK_RE.lastIndex = 0
+  let match = SFC_SCRIPT_BLOCK_RE.exec(content)
+  while (match !== null) {
+    const scriptContent = match[1] ?? ''
+    const scriptStart = match.index + match[0].indexOf(scriptContent)
+    const scriptCandidates = await extractRawCandidatesWithPositions(scriptContent, 'js')
+    candidates.push(...scriptCandidates.map(candidate => ({
+      content: scriptContent,
+      extension: 'js',
+      localStart: candidate.start,
+      rawCandidate: candidate.rawCandidate,
+      start: candidate.start + scriptStart,
+      end: candidate.end + scriptStart,
+    })))
+    match = SFC_SCRIPT_BLOCK_RE.exec(content)
+  }
+  return candidates
+}
+
 function createCandidateCacheKey(
   designSystemKey: string,
   options: Pick<ExtractValidCandidatesOption, 'bareArbitraryValues'>,
@@ -68,7 +252,7 @@ function createCandidateCacheKey(
 export async function extractRawCandidatesWithPositions(
   content: string,
   extension: string = 'html',
-): Promise<{ rawCandidate: string, start: number, end: number }[]> {
+): Promise<ExtractSourceCandidate[]> {
   const { Scanner } = await getOxideModule()
   const scanner = new Scanner({})
   const result = scanner.getCandidatesWithPositions({ content, extension })
@@ -80,6 +264,43 @@ export async function extractRawCandidatesWithPositions(
   }))
 }
 
+export async function extractSourceCandidatesWithPositions(
+  content: string,
+  extension: string = 'html',
+): Promise<ExtractSourceCandidate[]> {
+  const normalizedExtension = extension.replace(/^\./, '')
+  const candidates: ExtractSourceCandidateWithContext[] = (await extractRawCandidatesWithPositions(content, normalizedExtension))
+    .map(candidate => ({
+      ...candidate,
+      content,
+      extension: normalizedExtension,
+      localStart: candidate.start,
+    }))
+  if (MIXED_TEMPLATE_SOURCE_EXTENSION_RE.test(normalizedExtension)) {
+    candidates.push(...await extractMixedSourceScriptCandidates(content))
+  }
+  const seen = new Set<string>()
+  return candidates.filter((candidate) => {
+    if (!shouldKeepSourceCandidate(candidate.content, candidate.extension, createLocalCandidate(candidate))) {
+      return false
+    }
+    const key = `${candidate.start}:${candidate.end}:${candidate.rawCandidate}`
+    if (seen.has(key)) {
+      return false
+    }
+    seen.add(key)
+    return true
+  }).map(({ rawCandidate, start, end }) => ({ rawCandidate, start, end }))
+}
+
+export async function extractSourceCandidates(
+  content: string,
+  extension: string = 'html',
+): Promise<string[]> {
+  const candidates = await extractSourceCandidatesWithPositions(content, extension)
+  return [...new Set(candidates.map(candidate => candidate.rawCandidate))]
+}
+
 export async function extractRawCandidates(
   sources?: SourceEntry[],
 ): Promise<string[]> {

package/src/index.bundle.ts

@@ -22,6 +22,8 @@ import {
   extractProjectCandidatesWithPositions,
   extractRawCandidates,
   extractRawCandidatesWithPositions,
+  extractSourceCandidates,
+  extractSourceCandidatesWithPositions,
   extractValidCandidates,
   groupTokensByFile,
 } from './extraction/candidate-extractor'
@@ -57,6 +59,8 @@ export {
   extractProjectCandidatesWithPositions,
   extractRawCandidates,
   extractRawCandidatesWithPositions,
+  extractSourceCandidates,
+  extractSourceCandidatesWithPositions,
   extractValidCandidates,
   getPatchStatusReport,
   groupTokensByFile,
@@ -105,6 +109,7 @@ export type { TailwindCssPatchOptions } from './config'
 export * from './types'
 export type {
   TailwindV4CandidateSource,
+  TailwindV4CssSource,
   TailwindV4DesignSystem,
   TailwindV4Engine,
   TailwindV4GenerateOptions,

package/src/index.ts

@@ -39,8 +39,11 @@ export {
   extractProjectCandidatesWithPositions,
   extractRawCandidates,
   extractRawCandidatesWithPositions,
+  extractSourceCandidates,
+  extractSourceCandidatesWithPositions,
   extractValidCandidates,
   groupTokensByFile,
+  type ExtractSourceCandidate,
 } from './extraction/candidate-extractor'
 export {
   collectClassesFromContexts,
@@ -60,6 +63,7 @@ export {
 } from './v4'
 export type {
   TailwindV4CandidateSource,
+  TailwindV4CssSource,
   TailwindV4DesignSystem,
   TailwindV4Engine,
   TailwindV4GenerateOptions,

package/src/options/normalize.ts

@@ -148,6 +148,19 @@ function normalizeTailwindV4Options(
 ): NormalizedTailwindV4Options {
   const configuredBase = v4?.base ? path.resolve(v4.base) : undefined
   const base = configuredBase ?? fallbackBase
+  const resolveV4Path = (value: string) => path.isAbsolute(value) ? path.resolve(value) : path.resolve(fallbackBase, value)
+  const cssSources = Array.isArray(v4?.cssSources)
+    ? v4!.cssSources
+        .filter(source => typeof source?.css === 'string')
+        .map(source => ({
+          css: source.css,
+          ...(source.base === undefined ? {} : { base: resolveV4Path(source.base) }),
+          ...(source.file === undefined ? {} : { file: resolveV4Path(source.file) }),
+          ...(source.dependencies === undefined
+            ? {}
+            : { dependencies: source.dependencies.filter(Boolean).map(resolveV4Path) }),
+        }))
+    : []
   const cssEntries = Array.isArray(v4?.cssEntries)
     ? v4!.cssEntries.filter((entry): entry is string => Boolean(entry)).map(entry => path.resolve(entry))
     : []
@@ -167,6 +180,7 @@ function normalizeTailwindV4Options(
     base,
     ...(configuredBase === undefined ? {} : { configuredBase }),
     ...(v4?.css === undefined ? {} : { css: v4.css }),
+    cssSources,
     cssEntries,
     sources,
     hasUserDefinedSources,

package/src/options/types.ts

@@ -1,6 +1,7 @@
 import type { SourceEntry } from '@tailwindcss/oxide'
 import type { PackageResolvingOptions } from 'local-pkg'
 import type { ILengthUnitsPatchOptions } from '../types'
+import type { TailwindV4CssSource } from '../v4/types'
 
 export type CacheStrategy = 'merge' | 'overwrite'
 export type CacheDriver = 'file' | 'memory' | 'noop'
@@ -97,6 +98,8 @@ export interface TailwindV4Options {
   base?: string
   /** Raw CSS passed directly to the v4 design system. */
   css?: string
+  /** 构建器在 CSS 落盘前捕获的内存 CSS 入口。 */
+  cssSources?: TailwindV4CssSource[]
   /** Set of CSS entry files that should be scanned for `@config` directives. */
   cssEntries?: string[]
   /** Overrides the content sources scanned by the oxide scanner. */
@@ -187,6 +190,7 @@ export interface NormalizedTailwindV4Options {
   base: string
   configuredBase?: string
   css?: string
+  cssSources: TailwindV4CssSource[]
   cssEntries: string[]
   sources: SourceEntry[]
   hasUserDefinedSources: boolean

package/src/runtime/class-collector.ts

@@ -1,3 +1,4 @@
+import type { ExtractValidCandidatesOption } from '../extraction/candidate-extractor'
 import type { NormalizedTailwindCssPatchOptions } from '../options/types'
 import type { TailwindcssRuntimeContext } from '../types'
 import process from 'node:process'
@@ -63,6 +64,35 @@ export async function collectClassesFromTailwindV4(
       negated: source.negated,
     }))
   }
+  const addCandidates = async (extractOptions: ExtractValidCandidatesOption) => {
+    const candidates = await extractValidCandidates(extractOptions)
+    for (const candidate of candidates) {
+      if (options.filter(candidate)) {
+        set.add(candidate)
+      }
+    }
+  }
+
+  if (v4Options.cssSources.length > 0) {
+    for (const source of v4Options.cssSources) {
+      const sourceFile = toAbsolute(source.file)
+      const sourceBase = toAbsolute(source.base)
+        ?? (sourceFile ? path.dirname(sourceFile) : resolvedDefaultBase)
+      const designSystemBases = resolvedConfiguredBase && resolvedConfiguredBase !== sourceBase
+        ? [sourceBase, resolvedConfiguredBase]
+        : [sourceBase]
+      const sources = resolveSources(sourceBase)
+      const firstBase = designSystemBases[0] ?? sourceBase
+      await addCandidates({
+        cwd: options.projectRoot,
+        base: firstBase,
+        baseFallbacks: designSystemBases.slice(1),
+        css: source.css,
+        ...(v4Options.bareArbitraryValues === undefined ? {} : { bareArbitraryValues: v4Options.bareArbitraryValues }),
+        ...(sources === undefined ? {} : { sources }),
+      })
+    }
+  }
 
   if (v4Options.cssEntries.length > 0) {
     for (const entry of v4Options.cssEntries) {
@@ -86,15 +116,10 @@ export async function collectClassesFromTailwindV4(
         ...(v4Options.bareArbitraryValues === undefined ? {} : { bareArbitraryValues: v4Options.bareArbitraryValues }),
         ...(sources === undefined ? {} : { sources }),
       }
-      const candidates = await extractValidCandidates(extractOptions)
-      for (const candidate of candidates) {
-        if (options.filter(candidate)) {
-          set.add(candidate)
-        }
-      }
+      await addCandidates(extractOptions)
     }
   }
-  else {
+  else if (v4Options.cssSources.length === 0) {
     const baseForCss = resolvedConfiguredBase ?? resolvedDefaultBase
     const sources = resolveSources(baseForCss)
     const extractOptions = {
@@ -104,12 +129,7 @@ export async function collectClassesFromTailwindV4(
       ...(v4Options.css === undefined ? {} : { css: v4Options.css }),
       ...(sources === undefined ? {} : { sources }),
     }
-    const candidates = await extractValidCandidates(extractOptions)
-    for (const candidate of candidates) {
-      if (options.filter(candidate)) {
-        set.add(candidate)
-      }
-    }
+    await addCandidates(extractOptions)
   }
 
   return set

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