Skip to content

Commit

Permalink
feat(css): css.devSourcemap option (#7471)
Browse files Browse the repository at this point in the history
  • Loading branch information
sapphi-red authored Mar 26, 2022
1 parent e29ea8e commit 57f14cb
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 29 deletions.
1 change: 1 addition & 0 deletions packages/playground/css-sourcemap/vite.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ module.exports = {
}
},
css: {
devSourcemap: true,
preprocessorOptions: {
less: {
additionalData: '@color: red;'
Expand Down
1 change: 1 addition & 0 deletions packages/playground/vue-sourcemap/vite.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const vuePlugin = require('@vitejs/plugin-vue')
*/
module.exports = {
css: {
devSourcemap: true,
preprocessorOptions: {
less: {
additionalData: '@color: red;'
Expand Down
3 changes: 3 additions & 0 deletions packages/plugin-vue/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export interface ResolvedOptions extends Options {
compiler: typeof _compiler
root: string
sourceMap: boolean
cssDevSourcemap: boolean
devServer?: ViteDevServer
devToolsEnabled?: boolean
}
Expand Down Expand Up @@ -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'
}

Expand Down Expand Up @@ -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
Expand Down
18 changes: 11 additions & 7 deletions packages/plugin-vue/src/style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
88 changes: 66 additions & 22 deletions packages/vite/src/node/plugins/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -1086,6 +1110,7 @@ type StylePreprocessorOptions = {
additionalData?: PreprocessorAdditionalData
filename: string
alias: Alias[]
enableSourcemap: boolean
}

type SassStylePreprocessorOptions = StylePreprocessorOptions & Sass.Options
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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,
Expand All @@ -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))
Expand All @@ -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 }
Expand All @@ -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)
Expand Down

0 comments on commit 57f14cb

Please sign in to comment.