Purgecss: Question: How to keep the sourcemap in the css

[maartenvanbenthem]

When using purgecss the sourcemap is being deleted. How can I prevent this?

I am using webpack encore and this is my configuration:

```
addPlugin(
new PurgeCssPlugin({
paths: glob.sync([
path.join(__dirname, 'app/Resources/views//.html.twig'),
path.join(__dirname, 'app/Resources/_online-frontend/src/assets/javascripts/vuejs/nieuwbouwform/src//.vue'),
path.join(__dirname, 'app/Resources/_online-frontend/src/assets/javascripts/vuejs/nieuwbouwform/src/*/.js')
], { nodir: true }),
whitelist: collectWhitelist(),
keyframes: true,
fontFace: false
})
)

[maartenvanbenthem]

And I also don't understand how the rejected parameter works. I would like to see a list of rejected classes and that is what I expect.

[maartenvanbenthem]

@Ffloriel you don't have an answer at this moment 😃 ?

[Ffloriel]

Sorry for the late reply 😄
I didn't look at the sourcemap and I can't tell you how to prevent them to be removed at the moment.
The rejected option is supposed to work the way you describe it. It prints the list of selectors that have been removed by purgecss.

[kevintruby]

Hey @maartenvanbenthem I know this thread is about a month old now, but if you're still looking on how to implement this, I think I found a solution. _My own use case involved a Laravel 5 application and it's preconfigured webpack options via laravel-mix_, but the scenario and solution should be largely similar to yours.

When I attempted to explicitly add this to the webpack config, or to use a simplified Laravel wrapper, it would completely break my sourcemaps while producing reduced CSS files. In order to use both, I had to use PostCSS (_there's an associated plugin for this_) to cull stylesheet rules _after_ the main scss compilation and generation of sourcemaps was done.

The postcss-loader plugin documentation has an example similar to what I did, linked directly. The documentation they provide is for the Extract CSS plugin, but the sample code looks really similar to how I was able to configure laravel-mix.

In case it helps, here's a snippet of my own PostCSS definition:

let glob = require("glob-all");
const purgecss = require('@fullhuman/postcss-purgecss');

// ... remember this is passed to laravel-mix; should be the equivalent of the plugins [] array

mix.sass('resources/assets/sass/app.scss', 'public/css')
    .options({
        postCss: [
            purgecss({
                content: glob.sync([
                    path.join(__dirname, "resources/views/**/*.blade.php"),
                    path.join(__dirname, "resources/assets/js/**/*.vue"),
                    path.join(__dirname, "resources/assets/js/**/*.js")
                    // it's possible we may want to consider looking at SVG files as well?
                ]),
                /**
                 * FYI -- PurgeCss is unable to determine dynamic classes generated at runtime (i.e. not hard-coded onto the template files)
                 * this option defines namespaced classes to not get cut, and the commented example is critical for the
                 * common bootstrap components of Carousel and Modal to work; it's likely there are others, and we
                 * should expand documentation of classes to whitelist by component over time
                 */
                // whitelistPatterns: [/carousel-.*/, /modal-.*/, /show/],
                extractors: [
                    {
                        extractor: class {
                            static extract(content) {
                                return content.match(/[a-zA-Z0-9-:_/]+/g) || [];
                            }
                        },
                        // it's possible we may want to consider looking at SVG files as well?
                        extensions: ['html', 'js', 'jsx', 'ts', 'tsx', 'php', 'vue']
                    }
                ]
            })
        ]
    });