feat: css sourcemap support during dev

packages/playground/vue/PreProcessors.vue

@@ -9,6 +9,12 @@ p.pug-less
 p.pug-stylus
   | This is rendered from <template lang="pug">
   | and styled with <style lang="stylus">. It should be orange.
+p.pug-sass-import
+  | This is rendered from <template lang="pug">
+  | and styled with <style lang="sass"> which has import. It should be blue.
+p.pug-sass-non-import
+  | This is rendered from <template lang="pug">
+  | and styled with <style lang="sass"> which has import. It should be yellow.
 SlotComponent
   template(v-slot:test-slot)
     div.pug-slot slot content
@@ -42,3 +48,10 @@ color = orange
 .pug-stylus
   color: color
 </style>
+
+<style lang="sass">
+@import './import.sass'
+
+.pug-sass-non-import
+  color: yellow
+</style>

packages/playground/vue/import.sass

@@ -0,0 +1,2 @@
+.pug-sass-import
+  color: blue

packages/plugin-vue/src/index.ts

@@ -235,7 +235,8 @@ export default function vuePlugin(rawOptions: Options = {}): Plugin {
             descriptor,
             Number(query.index),
             options,
-            this
+            this,
+            filename
           )
         }
       }

packages/plugin-vue/src/style.ts

@@ -1,14 +1,16 @@
 import type { SFCDescriptor } from 'vue/compiler-sfc'
 import type { TransformPluginContext } from 'rollup'
 import type { ResolvedOptions } from '.'
+import { formatPostcssSourceMap } from 'vite'
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export async function transformStyle(
   code: string,
   descriptor: SFCDescriptor,
   index: number,
   options: ResolvedOptions,
-  pluginContext: TransformPluginContext
+  pluginContext: TransformPluginContext,
+  filename: string
 ) {
   const block = descriptor.styles[index]
   // vite already handles pre-processors and CSS module so this is only
@@ -19,7 +21,14 @@ export async function transformStyle(
     id: `data-v-${descriptor.id}`,
     isProd: options.isProduction,
     source: code,
-    scoped: block.scoped
+    scoped: block.scoped,
+    postcssOptions: {
+      map: {
+        from: filename,
+        inline: false,
+        annotation: false
+      }
+    }
   })
 
   if (result.errors.length) {
@@ -36,8 +45,12 @@ export async function transformStyle(
     return null
   }
 
+  const map = result.map
+    ? formatPostcssSourceMap(result.map, filename)
+    : ({ mappings: '' } as any)
+
   return {
     code: result.code,
-    map: result.map || ({ mappings: '' } as any)
+    map: map
   }
 }

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

@@ -2,6 +2,7 @@ import { cssUrlRE, cssPlugin } from '../../plugins/css'
 import { resolveConfig } from '../../config'
 import fs from 'fs'
 import path from 'path'
+import { normalizePath } from '../../utils'
 
 describe('search css url function', () => {
   test('some spaces before it', () => {
@@ -114,3 +115,130 @@ describe('css path resolutions', () => {
     mockFs.mockReset()
   })
 })
+
+describe('css source maps', () => {
+  const root = normalizePath(process.cwd())
+  const testcases = [
+    {
+      name: 'cssmodule',
+      code: `
+    .foo {
+      color: red;
+    }
+  `,
+      id: `${root}/foo.module.css`,
+      expectedMap: {
+        file: `${root}/foo.module.css`,
+        mappings: ';IACI;MACE,UAAU;IACZ',
+        names: [],
+        sources: [`${root}/foo.module.css`],
+        version: 3
+      }
+    },
+    {
+      name: 'sass',
+      code: `
+    .foo
+      color: red
+  `,
+      id: `${root}/foo.sass`,
+      expectedMap: {
+        file: `${root}/foo.sass`,
+        mappings: 'AACI;EACE',
+        names: [],
+        sources: [`${root}/foo.sass`],
+        version: 3
+      }
+    },
+    {
+      name: 'scss',
+      code: `
+      .foo {
+        color: red;
+      }
+  `,
+      id: `${root}/foo.scss`,
+      expectedMap: {
+        file: `${root}/foo.scss`,
+        mappings: 'AACM;EACE',
+        names: [],
+        sources: [`${root}/foo.scss`],
+        version: 3
+      }
+    },
+    {
+      name: 'less',
+      code: `
+      .foo {
+        color: red;
+      }
+  `,
+      id: `${root}/foo.less`,
+      expectedMap: {
+        file: `${root}/foo.less`,
+        mappings: 'AACM;EACE',
+        names: [],
+        sources: [`${root}/foo.less`],
+        version: 3
+      }
+    },
+    {
+      name: 'stylus',
+      code: `
+      .foo
+        color: red
+  `,
+      id: `${root}/foo.styl`,
+      expectedMap: {
+        file: `${root}/foo.styl`,
+        mappings: 'AACM;EACE,WAAO',
+        names: [],
+        sources: [`${root}/foo.styl`],
+        version: 3
+      }
+    },
+    {
+      name: 'scss module',
+      code: `
+      .foo {
+        color: red;
+      }
+  `,
+      id: `${root}/foo.module.scss`,
+      expectedMap: {
+        file: `${root}/foo.module.scss`,
+        mappings: 'AACM;EACE',
+        names: [],
+        sources: [`${root}/foo.module.scss`],
+        version: 3
+      }
+    }
+  ]
+
+  test.concurrent.each(testcases)(
+    '$name',
+    async ({ code, id, expectedMap }) => {
+      const config = await resolveConfig(
+        {
+          root
+        },
+        'serve'
+      )
+      const { transform, buildStart } = cssPlugin(config)
+
+      await buildStart.call({})
+
+      const { map } = await transform.call(
+        {
+          addWatchFile() {
+            return
+          }
+        },
+        code,
+        id
+      )
+
+      expect(map).toMatchObject(expectedMap)
+    }
+  )
+})

packages/vite/src/node/index.ts

@@ -5,6 +5,7 @@ export { build } from './build'
 export { optimizeDeps } from './optimizer'
 export { send } from './server/send'
 export { createLogger, printHttpServerUrls } from './logger'
+export { formatPostcssSourceMap } from './plugins/css'
 export { transformWithEsbuild } from './plugins/esbuild'
 export { resolvePackageEntry } from './plugins/resolve'
 export { resolvePackageData } from './packages'