I have a Rollup plugin (via Vite) to extract some CSS rules into a separate stylesheet (originally LESS, but CSS by this time in the build). I'm having some issues with the source maps. Only the extracted sheet has a source map included. The original sheet's source map is gone. And I get a warning during the build.
build warning:
Sourcemap is likely to be incorrect: a plugin (my-plugin) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
plugin:
{
name: 'my-plugin',
transform(code, id) {
if (fileMatches(id, opts)) {
// Parse the original CSS file
const cssRoot = postcss.parse(code, {from: sourceName}).clone();
// Get the original source map
const oldMap = cssRoot.source.input.map;// PreviousMap
// Decide on a name for the new (extracted) css file
const newName = opts.sourceFileName(sourceName, opts.rootPath);
// Extract media atrules for desktop
const {extracted, results} = extractMediaAtRulesFromRoot(cssRoot, opts);
if (!extracted) {
return null; // Don't change the original file
}
// Build postcss options
const pOpts = {
...opts.postcss.options,
map: {
...opts.postcss.options.map,
prev: oldMap
},
// to: buildCssFilenameFrom(sourceName), -- I don't know the hashed name yet. Hm.
from: cssRoot.source.input.from
};
// Run the files through the postcss plugins again
// @todo See https://github.com/vitejs/vite/issues/4939
// This (the extracted) source map is generated, but the original source map is lost
return Promise.all([
processor.process(extracted, opts.postcss.options),
processor.process(cssRoot, pOpts)
]).then(([extractedResult, cssRootResult]) => {
// Add the new extracted file to the build
this.emitFile({type: 'asset', newName, extractedResult.css})
// Return the changed root file. Return css only. If we return the whole result, the files remain unchanged.
return cssRootResult.css;
})
}
}