feat(css): export preprocessCSS API (#10429)

vitejs · Oct 26, 2022 · 177b427 · 177b427
1 parent 4f4a39f
commit 177b427
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 20 deletions.
diff --git a/packages/vite/src/node/index.ts b/packages/vite/src/node/index.ts
@@ -3,7 +3,7 @@ export { createServer } from './server'
 export { preview } from './preview'
 export { build } from './build'
 export { optimizeDeps } from './optimizer'
-export { formatPostcssSourceMap } from './plugins/css'
+export { formatPostcssSourceMap, preprocessCSS } from './plugins/css'
 export { transformWithEsbuild } from './plugins/esbuild'
 export { resolvePackageEntry } from './plugins/resolve'
 export { resolvePackageData } from './packages'
@@ -67,7 +67,11 @@ export type {
   IndexHtmlTransformResult,
   HtmlTagDescriptor
 } from './plugins/html'
-export type { CSSOptions, CSSModulesOptions } from './plugins/css'
+export type {
+  CSSOptions,
+  CSSModulesOptions,
+  PreprocessCSSResult
+} from './plugins/css'
 export type { ChunkMetadata } from './plugins/metadata'
 export type { JsonOptions } from './plugins/json'
 export type { TransformOptions as EsbuildTransformOptions } from 'esbuild'

diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -179,7 +179,6 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
     tryIndex: false,
     extensions: []
   })
-  const atImportResolvers = createCSSResolvers(config)
 
   return {
     name: 'vite:css',
@@ -233,14 +232,7 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
         modules,
         deps,
         map
-      } = await compileCSS(
-        id,
-        raw,
-        config,
-        urlReplacer,
-        atImportResolvers,
-        server
-      )
+      } = await compileCSS(id, raw, config, urlReplacer)
       if (modules) {
         moduleCache.set(id, modules)
       }
@@ -744,13 +736,16 @@ function getCssResolversKeys(
   return Object.keys(resolvers) as unknown as Array<keyof CSSAtImportResolvers>
 }
 
+const configToAtImportResolvers = new WeakMap<
+  ResolvedConfig,
+  CSSAtImportResolvers
+>()
+
 async function compileCSS(
   id: string,
   code: string,
   config: ResolvedConfig,
-  urlReplacer: CssUrlReplacer,
-  atImportResolvers: CSSAtImportResolvers,
-  server?: ViteDevServer
+  urlReplacer?: CssUrlReplacer
 ): Promise<{
   code: string
   map?: SourceMapInput
@@ -786,6 +781,12 @@ async function compileCSS(
   let modules: Record<string, string> | undefined
   const deps = new Set<string>()
 
+  let atImportResolvers = configToAtImportResolvers.get(config)!
+  if (!atImportResolvers) {
+    atImportResolvers = createCSSResolvers(config)
+    configToAtImportResolvers.set(config, atImportResolvers)
+  }
+
   // 2. pre-processors: sass etc.
   if (isPreProcessor(lang)) {
     const preProcessor = preProcessors[lang]
@@ -880,12 +881,15 @@ async function compileCSS(
       })
     )
   }
-  postcssPlugins.push(
-    UrlRewritePostcssPlugin({
-      replacer: urlReplacer,
-      logger: config.logger
-    })
-  )
+
+  if (urlReplacer) {
+    postcssPlugins.push(
+      UrlRewritePostcssPlugin({
+        replacer: urlReplacer,
+        logger: config.logger
+      })
+    )
+  }
 
   if (isModule) {
     postcssPlugins.unshift(
@@ -1013,6 +1017,24 @@ async function compileCSS(
   }
 }
 
+export interface PreprocessCSSResult {
+  code: string
+  map?: SourceMapInput
+  modules?: Record<string, string>
+  deps?: Set<string>
+}
+
+/**
+ * @experimental
+ */
+export async function preprocessCSS(
+  code: string,
+  filename: string,
+  config: ResolvedConfig
+): Promise<PreprocessCSSResult> {
+  return await compileCSS(filename, code, config)
+}
+
 export async function formatPostcssSourceMap(
   rawMap: ExistingRawSourceMap,
   file: string