feat(css): support preprocessor with lightningcss (#19071)

Co-authored-by: Jeremiasz Major <[email protected]>

Author: sapphi-red

packages/vite/src/node/plugins/css.ts

@@ -114,7 +114,7 @@ export interface CSSOptions {
   /**
    * Using lightningcss is an experimental option to handle CSS modules,
    * assets and imports via Lightning CSS. It requires to install it as a
-   * peer dependency. This is incompatible with the use of preprocessors.
+   * peer dependency.
    *
    * @default 'postcss'
    * @experimental
@@ -206,7 +206,7 @@ export const cssConfigDefaults = Object.freeze({
 } satisfies CSSOptions)
 
 export type ResolvedCSSOptions = Omit<CSSOptions, 'lightningcss'> &
-  Required<Pick<CSSOptions, 'transformer'>> & {
+  Required<Pick<CSSOptions, 'transformer' | 'devSourcemap'>> & {
     lightningcss?: LightningCSSOptions
   }
 
@@ -1267,7 +1267,11 @@ async function compileCSSPreprocessors(
   lang: PreprocessLang,
   code: string,
   workerController: PreprocessorWorkerController,
-): Promise<{ code: string; map?: ExistingRawSourceMap; deps?: Set<string> }> {
+): Promise<{
+  code: string
+  map?: ExistingRawSourceMap | { mappings: '' }
+  deps?: Set<string>
+}> {
   const { config } = environment
   const { preprocessorOptions, devSourcemap } = config.css
   const atImportResolvers = getAtImportResolvers(
@@ -1341,15 +1345,11 @@ async function compileCSS(
   deps?: Set<string>
 }> {
   const { config } = environment
-  if (config.css.transformer === 'lightningcss') {
-    return compileLightningCSS(id, code, environment, urlResolver)
-  }
-
   const lang = CSS_LANGS_RE.exec(id)?.[1] as CssLang | undefined
   const deps = new Set<string>()
 
   // pre-processors: sass etc.
-  let preprocessorMap: ExistingRawSourceMap | undefined
+  let preprocessorMap: ExistingRawSourceMap | { mappings: '' } | undefined
   if (isPreProcessor(lang)) {
     const preprocessorResult = await compileCSSPreprocessors(
       environment,
@@ -1361,8 +1361,71 @@ async function compileCSS(
     code = preprocessorResult.code
     preprocessorMap = preprocessorResult.map
     preprocessorResult.deps?.forEach((dep) => deps.add(dep))
+  } else if (lang === 'sss' && config.css.transformer === 'lightningcss') {
+    const sssResult = await transformSugarSS(environment, id, code)
+    code = sssResult.code
+    preprocessorMap = sssResult.map
+  }
+
+  const transformResult = await (config.css.transformer === 'lightningcss'
+    ? compileLightningCSS(
+        environment,
+        id,
+        code,
+        deps,
+        workerController,
+        urlResolver,
+      )
+    : compilePostCSS(
+        environment,
+        id,
+        code,
+        deps,
+        lang,
+        workerController,
+        urlResolver,
+      ))
+
+  if (!transformResult) {
+    return {
+      code,
+      map: config.css.devSourcemap ? preprocessorMap : { mappings: '' },
+      deps,
+    }
   }
 
+  return {
+    ...transformResult,
+    map: config.css.devSourcemap
+      ? combineSourcemapsIfExists(
+          cleanUrl(id),
+          typeof transformResult.map === 'string'
+            ? JSON.parse(transformResult.map)
+            : transformResult.map,
+          preprocessorMap,
+        )
+      : { mappings: '' },
+    deps,
+  }
+}
+
+async function compilePostCSS(
+  environment: PartialEnvironment,
+  id: string,
+  code: string,
+  deps: Set<string>,
+  lang: CssLang | undefined,
+  workerController: PreprocessorWorkerController,
+  urlResolver?: CssUrlResolver,
+): Promise<
+  | {
+      code: string
+      map?: Exclude<SourceMapInput, string>
+      modules?: Record<string, string>
+    }
+  | undefined
+> {
+  const { config } = environment
   const { modules: modulesOptions, devSourcemap } = config.css
   const isModule = modulesOptions !== false && cssModuleRE.test(id)
   // although at serve time it can work without processing, we do need to
@@ -1381,7 +1444,7 @@ async function compileCSS(
     !needInlineImport &&
     !hasUrl
   ) {
-    return { code, map: preprocessorMap ?? null, deps }
+    return
   }
 
   // postcss
@@ -1506,25 +1569,61 @@ async function compileCSS(
     lang === 'sss' ? loadSss(config.root) : postcssOptions.parser
 
   if (!postcssPlugins.length && !postcssParser) {
-    return {
-      code,
-      map: preprocessorMap,
-      deps,
-    }
+    return
   }
 
+  const result = await runPostCSS(
+    id,
+    code,
+    postcssPlugins,
+    { ...postcssOptions, parser: postcssParser },
+    deps,
+    environment.logger,
+    devSourcemap,
+  )
+  return { ...result, modules }
+}
+
+async function transformSugarSS(
+  environment: PartialEnvironment,
+  id: string,
+  code: string,
+) {
+  const { config } = environment
+  const { devSourcemap } = config.css
+
+  const result = await runPostCSS(
+    id,
+    code,
+    [],
+    { parser: loadSss(config.root) },
+    undefined,
+    environment.logger,
+    devSourcemap,
+  )
+  return result
+}
+
+async function runPostCSS(
+  id: string,
+  code: string,
+  plugins: PostCSS.AcceptedPlugin[],
+  options: PostCSS.ProcessOptions,
+  deps: Set<string> | undefined,
+  logger: Logger,
+  enableSourcemap: boolean,
+) {
   let postcssResult: PostCSS.Result
   try {
     const source = removeDirectQuery(id)
     const postcss = await importPostcss()
 
     // postcss is an unbundled dep and should be lazy imported
-    postcssResult = await postcss.default(postcssPlugins).process(code, {
-      ...postcssOptions,
-      parser: postcssParser,
+    postcssResult = await postcss.default(plugins).process(code, {
+      ...options,
       to: source,
       from: source,
-      ...(devSourcemap
+      ...(enableSourcemap
         ? {
             map: {
               inline: false,
@@ -1542,7 +1641,7 @@ async function compileCSS(
     // record CSS dependencies from @imports
     for (const message of postcssResult.messages) {
       if (message.type === 'dependency') {
-        deps.add(normalizePath(message.file as string))
+        deps?.add(normalizePath(message.file as string))
       } else if (message.type === 'dir-dependency') {
         // https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md#3-dependencies
         const { dir, glob: globPattern = '**' } = message
@@ -1553,7 +1652,7 @@ async function compileCSS(
           ignore: ['**/node_modules/**'],
         })
         for (let i = 0; i < files.length; i++) {
-          deps.add(files[i])
+          deps?.add(files[i])
         }
       } else if (message.type === 'warning') {
         const warning = message as PostCSS.Warning
@@ -1571,7 +1670,7 @@ async function compileCSS(
               }
             : undefined,
         )}`
-        environment.logger.warn(colors.yellow(msg))
+        logger.warn(colors.yellow(msg))
       }
     }
   } catch (e) {
@@ -1585,17 +1684,14 @@ async function compileCSS(
     throw e
   }
 
-  if (!devSourcemap) {
+  if (!enableSourcemap) {
     return {
       code: postcssResult.css,
-      map: { mappings: '' },
-      modules,
-      deps,
+      map: { mappings: '' as const },
     }
   }
 
   const rawPostcssMap = postcssResult.map.toJSON()
-
   const postcssMap = await formatPostcssSourceMap(
     // version property of rawPostcssMap is declared as string
     // but actually it is a number
@@ -1605,9 +1701,7 @@ async function compileCSS(
 
   return {
     code: postcssResult.css,
-    map: combineSourcemapsIfExists(cleanUrl(id), postcssMap, preprocessorMap),
-    modules,
-    deps,
+    map: postcssMap,
   }
 }
 
@@ -1702,17 +1796,21 @@ export async function formatPostcssSourceMap(
 
 function combineSourcemapsIfExists(
   filename: string,
-  map1: ExistingRawSourceMap | undefined,
-  map2: ExistingRawSourceMap | undefined,
-): ExistingRawSourceMap | undefined {
-  return map1 && map2
-    ? (combineSourcemaps(filename, [
-        // type of version property of ExistingRawSourceMap is number
-        // but it is always 3
-        map1 as RawSourceMap,
-        map2 as RawSourceMap,
-      ]) as ExistingRawSourceMap)
-    : map1
+  map1: ExistingRawSourceMap | { mappings: '' } | undefined,
+  map2: ExistingRawSourceMap | { mappings: '' } | undefined,
+): ExistingRawSourceMap | { mappings: '' } | undefined {
+  if (!map1 || !map2) {
+    return map1
+  }
+  if (map1.mappings === '' || map2.mappings === '') {
+    return { mappings: '' }
+  }
+  return combineSourcemaps(filename, [
+    // type of version property of ExistingRawSourceMap is number
+    // but it is always 3
+    map1 as RawSourceMap,
+    map2 as RawSourceMap,
+  ]) as ExistingRawSourceMap
 }
 
 const viteHashUpdateMarker = '/*$vite$:1*/'
@@ -3269,13 +3367,18 @@ function isPreProcessor(lang: any): lang is PreprocessLang {
 
 const importLightningCSS = createCachedImport(() => import('lightningcss'))
 async function compileLightningCSS(
+  environment: PartialEnvironment,
   id: string,
   src: string,
-  environment: PartialEnvironment,
+  deps: Set<string>,
+  workerController: PreprocessorWorkerController,
   urlResolver?: CssUrlResolver,
-): ReturnType<typeof compileCSS> {
+): Promise<{
+  code: string
+  map?: string | undefined
+  modules?: Record<string, string>
+}> {
   const { config } = environment
-  const deps = new Set<string>()
   // replace null byte as lightningcss treats that as a string terminator
   // https://github.com/parcel-bundler/lightningcss/issues/874
   const filename = removeDirectQuery(id).replace('\0', NULL_BYTE_PLACEHOLDER)
@@ -3298,11 +3401,32 @@ async function compileLightningCSS(
           // projectRoot is needed to get stable hash when using CSS modules
           projectRoot: config.root,
           resolver: {
-            read(filePath) {
+            async read(filePath) {
               if (filePath === filename) {
                 return src
               }
-              return fs.readFileSync(filePath, 'utf-8')
+
+              const code = fs.readFileSync(filePath, 'utf-8')
+              const lang = CSS_LANGS_RE.exec(filePath)?.[1] as
+                | CssLang
+                | undefined
+              if (isPreProcessor(lang)) {
+                const result = await compileCSSPreprocessors(
+                  environment,
+                  id,
+                  lang,
+                  code,
+                  workerController,
+                )
+                result.deps?.forEach((dep) => deps.add(dep))
+                // TODO: support source map
+                return result.code
+              } else if (lang === 'sss') {
+                const sssResult = await transformSugarSS(environment, id, code)
+                // TODO: support source map
+                return sssResult.code
+              }
+              return code
             },
             async resolve(id, from) {
               const publicFile = checkPublicFile(
@@ -3313,10 +3437,34 @@ async function compileLightningCSS(
                 return publicFile
               }
 
-              const resolved = await getAtImportResolvers(
+              // NOTE: with `transformer: 'postcss'`, CSS modules `composes` tried to resolve with
+              //       all resolvers, but in `transformer: 'lightningcss'`, only the one for the
+              //       current file type is used.
+              const atImportResolvers = getAtImportResolvers(
                 environment.getTopLevelConfig(),
-              ).css(environment, id, from)
+              )
+              const lang = CSS_LANGS_RE.exec(from)?.[1] as CssLang | undefined
+              let resolver: ResolveIdFn
+              switch (lang) {
+                case 'css':
+                case 'sss':
+                case 'styl':
+                case 'stylus':
+                case undefined:
+                  resolver = atImportResolvers.css
+                  break
+                case 'sass':
+                case 'scss':
+                  resolver = atImportResolvers.sass
+                  break
+                case 'less':
+                  resolver = atImportResolvers.less
+                  break
+                default:
+                  throw new Error(`Unknown lang: ${lang satisfies never}`)
+              }
 
+              const resolved = await resolver(environment, id, from)
               if (resolved) {
                 deps.add(resolved)
                 return resolved
@@ -3431,7 +3579,6 @@ async function compileLightningCSS(
   return {
     code: css,
     map: 'map' in res ? res.map?.toString() : undefined,
-    deps,
     modules,
   }
 }