0

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;
            })
       }
}
Erin
  • 5,315
  • 2
  • 20
  • 36

0 Answers0