what's the strategy for including css classes that only exist inside node_modules component?

[vesper8]

I've almost got this fully working now.. but am running into one last problem it seems

I'm using this vue component https://github.com/spatie/vue-tabs-component in my app.

I don't have this component in my /resources/assets folder because it's not needed there.

Inside the node_modules folder where npm installed that component, are references to CSS classes

Right now those classes are being skipped by purgeCss and the needed classes are being stripped as expected

What's the best strategy for dealing with this?

Adding the entire node_modules folder to the extractor paths seems like the wrong way to go. And adding just the node_modules/vue-tabs-component/src/components to the paths would fix the problem but I'm wondering if there's an even better strategy

I suppose having purgeCss determine which components are loaded and then looking automatically inside the node_modules folder for those would be overkill and out of scope

Thoughts?

[vesper8]

I think perhaps using a whitelist would do the trick but I can't seem to get the whitelist to work.. could you provide an example?

Here's what I tried

        new purgeCss({
            paths: glob.sync([
                path.join(__dirname, 'resources/views/**/*.blade.php'),
                path.join(__dirname, 'resources/assets/js/**/*.vue'),
            ]),
            whitelist: [
                '*tabs*.css',
                'agent.css',
            ],
            extractors: [
                {
                    extractor: class {
                        static extract(content) {
                            return content.match(/[A-z0-9-:\/]+/g) || []
                        }
                    },
                    extensions: ['html', 'js', 'php', 'vue']
                }
            ]

[Ffloriel]

I suppose having purgeCss determine which components are loaded and then looking automatically inside the node_modules folder for those would be overkill and out of scope

I agree with you.
This is where Webpack should be useful. Webpack will use the node_modules used, then with the plugin, you should be able to purge the css.

[Ffloriel]

Whitelist is used for the css selectors and not for the files. If you want to use .tabs for example in your application but it does not appear in your content files, you can use the whitelist option to tell purgecss not to remove the class

[vesper8]

@Ffloriel does the whitelist support wildcards?

like if I want to whitelist all classes beginning with "tabs-" (such as tabs-component) can I do

            whitelist: [
                'tabs-*',
            ],

[vesper8]

@Ffloriel also I think there's a use-case for being able to whitelist files as well as classes

take https://github.com/AudithSoftworks/Uniform as an example.

This css is only applied through javascript onload so it is being completely excluded. It also doesn't have a whitelistable prefix since it changes the style for form elements and buttons. Seems like the only way for me to use this right now is to import it separately in a file purgeCss doesn't process

[Ffloriel]

You can't use whitelist with wildcards but you can use whitelistPatterns with multiple regex

whitelistPatterns: [/^tabs-/]

[mwmcode]

Hello,

Any chance of getting an ignoreFiles option? Perhaps something like:

    content: [
        './src/**/*.tsx', 
        './index.template.html', 

        '!./src/ignore/this/file.tsx',
    ],

Using whitelistPatterns for every library is not easy to maintain... especially when the codebase uses several ones (maps, datetime pickers, sliders...etc)

[gynekolog]

I tried to ignore storybook files. I'm done with:

content: [
    "./**/!(*.stories)*.{ts,tsx}",
]