refactor: split vite bundle flow and normalize css selectors

Author: sonofmagic

packages/weapp-tailwindcss/package.json

@@ -214,6 +214,7 @@
     "magic-string": "0.30.21",
     "micromatch": "^4.0.8",
     "postcss-load-config": "^6.0.1",
+    "postcss-selector-parser": "^7.1.2",
     "semver": "~7.8.4",
     "tailwindcss-config": "workspace:*",
     "tailwindcss-patch": "catalog:tailwindcssPatch",

packages/weapp-tailwindcss/src/bundlers/vite/generate-bundle.ts

@@ -0,0 +1,124 @@
+import type { InternalUserDefinedOptions } from '@/types'
+import { existsSync } from 'node:fs'
+import path from 'node:path'
+import { resolveTailwindV4CssSourceBase } from '@/tailwindcss/source-scan'
+import { slash } from '../utils'
+import { normalizeCssSourceForCompare } from './css-output'
+import { hasMatchingStyleFileBase, isMatchingCssSourceFile } from './style-matching'
+
+function isPackageJsonImportRequest(request: string) {
+  return request.startsWith('#')
+}
+
+function normalizeMatchedCssSourcePath(file: string | undefined) {
+  if (!file || !path.isAbsolute(file)) {
+    return undefined
+  }
+  return path.resolve(file.replace(/[?#].*$/, ''))
+}
+
+function collectConfiguredTailwindV4CssSources(opts: InternalUserDefinedOptions) {
+  const patcherCssSources = ((opts.tailwindcssPatcherOptions as any)?.tailwindcss?.v4?.cssSources ?? []) as NonNullable<NonNullable<InternalUserDefinedOptions['tailwindcss']>['v4']>['cssSources'] | undefined
+  return [
+    ...(opts.tailwindcss?.v4?.cssSources ?? []),
+    ...(patcherCssSources ?? []),
+  ]
+}
+
+function collectConfiguredCssEntries(opts: InternalUserDefinedOptions) {
+  const patcherCssEntries = ((opts.tailwindcssPatcherOptions as any)?.tailwindcss?.v4?.cssEntries ?? []) as string[] | undefined
+  return [
+    ...(opts.cssEntries ?? []),
+    ...(opts.tailwindcss?.v4?.cssEntries ?? []),
+    ...(patcherCssEntries ?? []),
+  ].filter((entry): entry is string => typeof entry === 'string' && entry.length > 0)
+}
+
+function collectCssConfigBaseCandidates(
+  source: string,
+  file: string,
+  outputRoot: string,
+  opts: InternalUserDefinedOptions,
+) {
+  const candidates: string[] = []
+  const seen = new Set<string>()
+  const addCandidate = (candidate: string | undefined) => {
+    if (!candidate) {
+      return
+    }
+    const normalized = path.resolve(candidate)
+    if (seen.has(normalized)) {
+      return
+    }
+    seen.add(normalized)
+    candidates.push(normalized)
+  }
+
+  addCandidate(path.dirname(path.resolve(outputRoot, file.replace(/[?#].*$/, ''))))
+
+  const normalizedSource = normalizeCssSourceForCompare(source)
+  const patcherProjectRoot = typeof opts.tailwindcssPatcherOptions?.projectRoot === 'string'
+    ? opts.tailwindcssPatcherOptions.projectRoot
+    : undefined
+  const sourceBaseFallback = opts.tailwindcss?.v4?.base
+    ?? patcherProjectRoot
+    ?? opts.tailwindcssBasedir
+    ?? outputRoot
+  const sourceRoot = opts.tailwindcssBasedir ?? patcherProjectRoot
+  const configuredCssEntries = collectConfiguredCssEntries(opts)
+  for (const cssEntry of configuredCssEntries) {
+    const resolvedCssEntry = path.resolve(cssEntry)
+    if (
+      configuredCssEntries.length === 1
+      || isMatchingCssSourceFile(file, resolvedCssEntry, outputRoot)
+      || hasMatchingStyleFileBase(file, resolvedCssEntry, outputRoot, sourceRoot)
+    ) {
+      addCandidate(path.dirname(resolvedCssEntry))
+    }
+  }
+  for (const cssSource of collectConfiguredTailwindV4CssSources(opts)) {
+    const cssSourceFile = normalizeMatchedCssSourcePath(cssSource.file)
+    const cssSourceCss = typeof cssSource.css === 'string'
+      ? normalizeCssSourceForCompare(cssSource.css)
+      : undefined
+    if (
+      cssSourceFile
+      && !isMatchingCssSourceFile(file, cssSourceFile, outputRoot)
+      && cssSourceCss !== normalizedSource
+    ) {
+      continue
+    }
+    addCandidate(cssSourceFile ? path.dirname(cssSourceFile) : undefined)
+    addCandidate(resolveTailwindV4CssSourceBase(cssSource, sourceBaseFallback))
+  }
+
+  return candidates
+}
+
+export function normalizeRelativeCssConfigDirectives(
+  source: string,
+  file: string,
+  outputRoot: string,
+  opts: InternalUserDefinedOptions,
+) {
+  if (!source.includes('@config')) {
+    return source
+  }
+
+  const baseCandidates = collectCssConfigBaseCandidates(source, file, outputRoot, opts)
+
+  return source.replace(/@config\s+(["'])(.+?)\1\s*;?/g, (full, quote: string, request: string) => {
+    if (path.isAbsolute(request) || isPackageJsonImportRequest(request)) {
+      return full
+    }
+
+    for (const base of baseCandidates) {
+      const configFile = path.resolve(base, request)
+      if (existsSync(configFile)) {
+        return `@config ${quote}${slash(configFile)}${quote};`
+      }
+    }
+
+    return full
+  })
+}

packages/weapp-tailwindcss/src/bundlers/vite/generate-bundle/css-config-directives.ts

@@ -0,0 +1,103 @@
+import type { InternalUserDefinedOptions } from '@/types'
+import path from 'node:path'
+import postcss from 'postcss'
+import { normalizeOutputPathKey } from '../../shared/module-graph'
+import { isCSSRequest } from '../utils'
+
+export const SOURCE_STYLE_OUTPUT_EXT_RE = /\.(?:less|sass|scss|styl|stylus|pcss|postcss)$/i
+export const CSS_SOURCE_OUTPUT_EXT_RE = /\.(?:css|less|sass|scss|styl|stylus|pcss|postcss)$/i
+export const MINI_PROGRAM_STYLE_OUTPUT_EXT_RE = /\.(?:wx|ac|jx|tt|q|ty)ss$/i
+
+const SOURCE_STYLE_NON_CSS_SYNTAX_RE = /(?:^|\n)\s*(?:\/\/|\$[\w-]+\s*:|@(?:use|forward|mixin|include|function)\b)/
+
+export function resolveReplayCssOutputFile(rootDir: string, file: string) {
+  const nextFile = path.isAbsolute(file) ? path.relative(rootDir, file) : file
+  const normalizedFile = normalizeOutputPathKey(nextFile)
+  if (
+    normalizedFile.length === 0
+    || normalizedFile === '.'
+    || normalizedFile === '..'
+    || normalizedFile.startsWith('../')
+  ) {
+    return normalizeOutputPathKey(path.basename(file))
+  }
+  return normalizedFile
+}
+
+export function resolveViteCssOutputFile(
+  file: string,
+  opts: InternalUserDefinedOptions,
+  isWebGeneratorTarget: boolean,
+  preserveCssExtension = false,
+) {
+  if (
+    isWebGeneratorTarget
+    || preserveCssExtension
+    || opts.cssMatcher(file)
+    || !SOURCE_STYLE_OUTPUT_EXT_RE.test(file)
+    || !isCSSRequest(file)
+  ) {
+    return file
+  }
+  return file.replace(SOURCE_STYLE_OUTPUT_EXT_RE, '.wxss')
+}
+
+export function resolveViteCssPipelineOutputFile(
+  file: string,
+  _opts: Pick<InternalUserDefinedOptions, 'cssMatcher'>,
+  rootDir: string,
+  isWebGeneratorTarget = false,
+  preserveCssExtension = false,
+) {
+  const normalizedFile = resolveReplayCssOutputFile(rootDir, file)
+  if (
+    isWebGeneratorTarget
+    || preserveCssExtension
+    || MINI_PROGRAM_STYLE_OUTPUT_EXT_RE.test(normalizedFile)
+    || !CSS_SOURCE_OUTPUT_EXT_RE.test(normalizedFile)
+    || !isCSSRequest(normalizedFile)
+  ) {
+    return normalizedFile
+  }
+  return normalizedFile.replace(CSS_SOURCE_OUTPUT_EXT_RE, '.wxss')
+}
+
+export function canProcessViteSourceStyleAsCss(source: string, file: string) {
+  if (SOURCE_STYLE_NON_CSS_SYNTAX_RE.test(source)) {
+    return false
+  }
+  try {
+    postcss.parse(source, { from: file })
+    return true
+  }
+  catch {
+    return false
+  }
+}
+
+export function normalizeCssSourceForCompare(css: string) {
+  return css.trim()
+}
+
+export function stripStyleFileExtension(file: string) {
+  const normalized = file.replace(/[?#].*$/, '')
+  const ext = path.extname(normalized)
+  return ext ? normalized.slice(0, -ext.length) : normalized
+}
+
+export function isAppOriginCssFile(file: string) {
+  return path.basename(stripStyleFileExtension(file)) === 'app-origin'
+}
+
+export function isMainAppCssFile(file: string) {
+  return path.basename(stripStyleFileExtension(file)) === 'app'
+}
+
+export function isMainStyleEntryCssFile(file: string) {
+  const basename = path.basename(stripStyleFileExtension(file))
+  return basename === 'app' || basename === 'main'
+}
+
+export function isTailwindEntryCssFile(file: string) {
+  return path.basename(stripStyleFileExtension(file)) === 'tailwind'
+}

packages/weapp-tailwindcss/src/bundlers/vite/generate-bundle/css-output.ts

@@ -0,0 +1,154 @@
+import type { OutputAsset } from 'rollup'
+import type { RememberedCssSource } from './types'
+import type { InternalUserDefinedOptions } from '@/types'
+import { hasBundlerGeneratedCssMarker, parseBundlerGeneratedCssMarkerBlocks } from '../../shared/generated-css-marker'
+import { hasTailwindApplyDirective } from '../../shared/generator-css/directives'
+import { normalizeOutputPathKey } from '../../shared/module-graph'
+import { isAppOriginCssFile, isMainAppCssFile, resolveViteCssPipelineOutputFile } from './css-output'
+import { hasTailwindGenerationSource } from './sfc-style-source'
+import { scoreMatchingStyleFileBase } from './style-matching'
+
+export function createRememberedCssRuntimeSignature(cssRuntimeSignature: string, cssRuntimeAffectingHash: string) {
+  return `${cssRuntimeSignature}:${cssRuntimeAffectingHash}`
+}
+
+export function resolveRememberedCssSourceForTest(
+  sources: Iterable<[string, RememberedCssSource]> | undefined,
+  outputFile: string,
+  file: string,
+  originalSource: OutputAsset,
+  outputRoot: string,
+  sourceRoot: string | undefined,
+) {
+  return findRememberedCssSource(sources, outputFile, file, originalSource, outputRoot, sourceRoot)
+}
+
+function findRememberedCssSource(
+  sources: Iterable<[string, RememberedCssSource]> | undefined,
+  outputFile: string,
+  file: string,
+  originalSource: OutputAsset,
+  outputRoot: string,
+  sourceRoot: string | undefined,
+) {
+  const matched = findRememberedCssSources(sources, outputFile, file, originalSource, outputRoot, sourceRoot)
+  return matched.length === 1 ? matched[0] : undefined
+}
+
+export function findRememberedCssSources(
+  sources: Iterable<[string, RememberedCssSource]> | undefined,
+  outputFile: string,
+  file: string,
+  originalSource: OutputAsset,
+  outputRoot: string,
+  sourceRoot: string | undefined,
+) {
+  if (!sources) {
+    return []
+  }
+  const rememberedSources = [...sources].map(([, remembered]) => remembered)
+  const source = typeof originalSource.source === 'string'
+    ? originalSource.source
+    : originalSource.source.toString()
+  const markerFiles = new Set(parseBundlerGeneratedCssMarkerBlocks(source)
+    .filter(block => block.bundler === 'vite' && typeof block.file === 'string' && block.file.length > 0)
+    .map(block => normalizeOutputPathKey(block.file!)))
+  if (markerFiles.size > 0) {
+    const markerMatched = rememberedSources.filter(remembered =>
+      markerFiles.has(normalizeOutputPathKey(remembered.sourceFile.replace(/[?#].*$/, ''))),
+    )
+    if (markerMatched.length > 0) {
+      return markerMatched
+    }
+  }
+  const originalFiles = [
+    file,
+    originalSource.originalFileName,
+    ...(originalSource.originalFileNames ?? []),
+  ].filter((item): item is string => typeof item === 'string' && item.length > 0)
+
+  const sourceMatched = rememberedSources.filter(remembered =>
+    originalFiles.some(originalFile => normalizeOutputPathKey(remembered.sourceFile) === normalizeOutputPathKey(originalFile)),
+  )
+  if (sourceMatched.length > 0) {
+    return sourceMatched
+  }
+
+  const outputMatched = rememberedSources.filter(remembered =>
+    normalizeOutputPathKey(remembered.outputFile) === normalizeOutputPathKey(outputFile),
+  )
+  if (outputMatched.length > 0) {
+    return outputMatched
+  }
+
+  const shouldUseRememberedApplyFallback = !hasBundlerGeneratedCssMarker(source)
+    && !hasTailwindGenerationSource(source)
+  if (shouldUseRememberedApplyFallback && !rememberedSources.some(remembered => hasTailwindApplyDirective(remembered.rawSource))) {
+    return []
+  }
+
+  const scoredMatches = rememberedSources
+    .filter(remembered => !shouldUseRememberedApplyFallback || hasTailwindApplyDirective(remembered.rawSource))
+    .filter(remembered => !(isMainAppCssFile(outputFile) && isAppOriginCssFile(remembered.outputFile)))
+    .map(remembered => ({
+      remembered,
+      score: Math.max(
+        scoreMatchingStyleFileBase(outputFile, remembered.sourceFile, outputRoot, sourceRoot),
+        scoreMatchingStyleFileBase(outputFile, remembered.outputFile, outputRoot, sourceRoot),
+      ),
+    }))
+    .filter(match => match.score > 0)
+    .sort((a, b) => b.score - a.score)
+  const bestScore = scoredMatches[0]?.score
+  return bestScore
+    ? scoredMatches.filter(match => match.score === bestScore).map(match => match.remembered)
+    : []
+}
+
+export function mergeRememberedCssSources(
+  sources: RememberedCssSource[],
+  outputFile: string,
+) {
+  if (sources.length <= 1) {
+    return sources[0]
+  }
+  const seen = new Set<string>()
+  const rawSources: string[] = []
+  for (const source of sources) {
+    const key = `${source.sourceFile}\0${source.rawSource}`
+    if (seen.has(key)) {
+      continue
+    }
+    seen.add(key)
+    rawSources.push(source.rawSource)
+  }
+  return {
+    outputFile,
+    rawSource: rawSources.join('\n'),
+    sourceFile: sources[0]?.sourceFile ?? outputFile,
+  }
+}
+
+export function collectRememberedCssReplayGroups(
+  sources: Iterable<[string, RememberedCssSource]> | undefined,
+  opts: Pick<InternalUserDefinedOptions, 'cssMatcher'>,
+  rootDir: string,
+  isWebGeneratorTarget: boolean,
+  preserveCssExtension: boolean,
+) {
+  const groups = new Map<string, Array<{ key: string, remembered: RememberedCssSource }>>()
+  for (const [key, remembered] of sources ?? []) {
+    const outputFile = resolveViteCssPipelineOutputFile(
+      remembered.outputFile,
+      opts,
+      rootDir,
+      isWebGeneratorTarget,
+      preserveCssExtension,
+    )
+    const outputKey = normalizeOutputPathKey(outputFile)
+    const group = groups.get(outputKey) ?? []
+    group.push({ key, remembered })
+    groups.set(outputKey, group)
+  }
+  return groups
+}