feat(css): css.devSourcemap option (#7471)

packages/playground/css-sourcemap/vite.config.js

@@ -10,6 +10,7 @@ module.exports = {
     }
   },
   css: {
+    devSourcemap: true,
     preprocessorOptions: {
       less: {
         additionalData: '@color: red;'

packages/playground/vue-sourcemap/vite.config.js

@@ -5,6 +5,7 @@ const vuePlugin = require('@vitejs/plugin-vue')
  */
 module.exports = {
   css: {
+    devSourcemap: true,
     preprocessorOptions: {
       less: {
         additionalData: '@color: red;'

packages/plugin-vue/src/index.ts

@@ -63,6 +63,7 @@ export interface ResolvedOptions extends Options {
   compiler: typeof _compiler
   root: string
   sourceMap: boolean
+  cssDevSourcemap: boolean
   devServer?: ViteDevServer
   devToolsEnabled?: boolean
 }
@@ -99,6 +100,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
     reactivityTransform,
     root: process.cwd(),
     sourceMap: true,
+    cssDevSourcemap: false,
     devToolsEnabled: process.env.NODE_ENV !== 'production'
   }
 
@@ -137,6 +139,7 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
         ...options,
         root: config.root,
         sourceMap: config.command === 'build' ? !!config.build.sourcemap : true,
+        cssDevSourcemap: config.css?.devSourcemap ?? false,
         isProduction: config.isProduction,
         devToolsEnabled:
           !!config.define!.__VUE_PROD_DEVTOOLS__ || !config.isProduction

packages/plugin-vue/src/style.ts

@@ -23,13 +23,17 @@ export async function transformStyle(
     isProd: options.isProduction,
     source: code,
     scoped: block.scoped,
-    postcssOptions: {
-      map: {
-        from: filename,
-        inline: false,
-        annotation: false
-      }
-    }
+    ...(options.cssDevSourcemap
+      ? {
+          postcssOptions: {
+            map: {
+              from: filename,
+              inline: false,
+              annotation: false
+            }
+          }
+        }
+      : {})
   })
 
   if (result.errors.length) {

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

@@ -62,6 +62,12 @@ export interface CSSOptions {
     | (Postcss.ProcessOptions & {
         plugins?: Postcss.Plugin[]
       })
+  /**
+   * Enables css sourcemaps during dev
+   * @default false
+   * @experimental
+   */
+  devSourcemap?: boolean
 }
 
 export interface CSSModulesOptions {
@@ -309,9 +315,12 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
             return `export default ${JSON.stringify(css)}`
           }
 
-          const sourcemap = this.getCombinedSourcemap()
-          await injectSourcesContent(sourcemap, cleanUrl(id), config.logger)
-          const cssContent = getCodeWithSourcemap('css', css, sourcemap)
+          let cssContent = css
+          if (config.css?.devSourcemap) {
+            const sourcemap = this.getCombinedSourcemap()
+            await injectSourcesContent(sourcemap, cleanUrl(id), config.logger)
+            cssContent = getCodeWithSourcemap('css', css, sourcemap)
+          }
 
           return [
             `import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from ${JSON.stringify(
@@ -612,7 +621,11 @@ async function compileCSS(
   modules?: Record<string, string>
   deps?: Set<string>
 }> {
-  const { modules: modulesOptions, preprocessorOptions } = config.css || {}
+  const {
+    modules: modulesOptions,
+    preprocessorOptions,
+    devSourcemap
+  } = config.css || {}
   const isModule = modulesOptions !== false && cssModuleRE.test(id)
   // although at serve time it can work without processing, we do need to
   // crawl them in order to register watch dependencies.
@@ -661,6 +674,7 @@ async function compileCSS(
     }
     // important: set this for relative import resolving
     opts.filename = cleanUrl(id)
+    opts.enableSourcemap = devSourcemap ?? false
 
     const preprocessResult = await preProcessor(
       code,
@@ -815,6 +829,16 @@ async function compileCSS(
     }
   }
 
+  if (!devSourcemap) {
+    return {
+      ast: postcssResult,
+      code: postcssResult.css,
+      map: { mappings: '' },
+      modules,
+      deps
+    }
+  }
+
   const rawPostcssMap = postcssResult.map.toJSON()
 
   const postcssMap = formatPostcssSourceMap(
@@ -1086,6 +1110,7 @@ type StylePreprocessorOptions = {
   additionalData?: PreprocessorAdditionalData
   filename: string
   alias: Alias[]
+  enableSourcemap: boolean
 }
 
 type SassStylePreprocessorOptions = StylePreprocessorOptions & Sass.Options
@@ -1175,17 +1200,22 @@ const scss: SassStylePreprocessor = async (
   const { content: data, map: additionalMap } = await getSource(
     source,
     options.filename,
-    options.additionalData
+    options.additionalData,
+    options.enableSourcemap
   )
   const finalOptions: Sass.Options = {
     ...options,
     data,
     file: options.filename,
     outFile: options.filename,
     importer,
-    sourceMap: true,
-    omitSourceMapUrl: true,
-    sourceMapRoot: path.dirname(options.filename)
+    ...(options.enableSourcemap
+      ? {
+          sourceMap: true,
+          omitSourceMapUrl: true,
+          sourceMapRoot: path.dirname(options.filename)
+        }
+      : {})
   }
 
   try {
@@ -1299,18 +1329,23 @@ const less: StylePreprocessor = async (source, root, options, resolvers) => {
   const { content, map: additionalMap } = await getSource(
     source,
     options.filename,
-    options.additionalData
+    options.additionalData,
+    options.enableSourcemap
   )
 
   let result: Less.RenderOutput | undefined
   try {
     result = await nodeLess.render(content, {
       ...options,
       plugins: [viteResolverPlugin, ...(options.plugins || [])],
-      sourceMap: {
-        outputSourceFiles: true,
-        sourceMapFileInline: false
-      }
+      ...(options.enableSourcemap
+        ? {
+            sourceMap: {
+              outputSourceFiles: true,
+              sourceMapFileInline: false
+            }
+          }
+        : {})
     })
   } catch (e) {
     const error = e as Less.RenderError
@@ -1418,6 +1453,7 @@ const styl: StylePreprocessor = async (source, root, options) => {
     source,
     options.filename,
     options.additionalData,
+    options.enableSourcemap,
     '\n'
   )
   // Get preprocessor options.imports dependencies as stylus
@@ -1427,19 +1463,21 @@ const styl: StylePreprocessor = async (source, root, options) => {
   )
   try {
     const ref = nodeStylus(content, options)
-    ref.set('sourcemap', {
-      comment: false,
-      inline: false,
-      basePath: root
-    })
+    if (options.enableSourcemap) {
+      ref.set('sourcemap', {
+        comment: false,
+        inline: false,
+        basePath: root
+      })
+    }
 
     const result = ref.render()
 
     // Concat imports deps with computed deps
     const deps = [...ref.deps(), ...importsDeps]
 
     // @ts-expect-error sourcemap exists
-    const map: ExistingRawSourceMap = ref.sourcemap
+    const map: ExistingRawSourceMap | undefined = ref.sourcemap
 
     return {
       code: result,
@@ -1454,9 +1492,10 @@ const styl: StylePreprocessor = async (source, root, options) => {
 }
 
 function formatStylusSourceMap(
-  mapBefore: ExistingRawSourceMap,
+  mapBefore: ExistingRawSourceMap | undefined,
   root: string
-): ExistingRawSourceMap {
+): ExistingRawSourceMap | undefined {
+  if (!mapBefore) return undefined
   const map = { ...mapBefore }
 
   const resolveFromRoot = (p: string) => normalizePath(path.resolve(root, p))
@@ -1472,7 +1511,8 @@ function formatStylusSourceMap(
 async function getSource(
   source: string,
   filename: string,
-  additionalData?: PreprocessorAdditionalData,
+  additionalData: PreprocessorAdditionalData | undefined,
+  enableSourcemap: boolean,
   sep: string = ''
 ): Promise<{ content: string; map?: ExistingRawSourceMap }> {
   if (!additionalData) return { content: source }
@@ -1485,6 +1525,10 @@ async function getSource(
     return newContent
   }
 
+  if (!enableSourcemap) {
+    return { content: additionalData + sep + source }
+  }
+
   const ms = new MagicString(source)
   ms.appendLeft(0, sep)
   ms.appendLeft(0, additionalData)