CODEWITHSUNDEEP
vue.jsdebuggingslick.jsgridsomepurgecss
Abhishek Singh
Abhishek Singh

Reputation: 21

Slick crausel css is breaking and removing css class from code when i am trying to purge css in gridsome project

I tried using Purgecss to remove unused CSS. I have used

"@fullhuman/postcss-purgecss": "3.0.0"

and whitelisted all dynamic classes on Node 18x version. Implementation is done but while building the application purgecss removed all slick-related classes even though I have whitelisted all classes. Any suggestion as to why it is breaking or how to fix?

module.exports = {
    content: [
        './src/**/*.vue',
        './src/**/*.js',
        './src/**/*.jsx',
        './src/**/*.html',
        './src/**/*.pug',
        './src/**/*.md',
    ],
    whitelist: [
        'body',
        'html',
        'img',
        'a',
        'g-image',
        'g-image--lazy',
        'g-image--loaded',
        'p',
        'h1',
        'h2',
        'h3',
        'h4',
        'h5',
        'h6',
        'div',
        'header',
        'footer',
        'aside',
        'nav',
        'company-carousel',
        'slick',
        'slick-slide',
        'slick-list',
        'slick-slider',
        'slick-track',
        'slick-center',
        'slick-cloned',
        'slick-prev',
        'slick-arrow',
        'slick-initialized',
        'slick-active',
        'slick-current',

    ],
    extractors: [
        {
            extractor: content => content.match(/[A-z0-9-:\\/]+/g),
            extensions: ['vue', 'js', 'jsx', 'md', 'html', 'pug'],
            // Treat every word in the bundle as a CSS selector
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
        },
    ],
}

I want slick carousel-related classes to be removed as they break the UI.

Upvotes: 1

Views: 126

Answers (1)

kissu
kissu

Reputation: 46774

I have a few bad news so far:

Good news tho:

  • you could use NuxtJS, Quasar or even Vitesse if you want to rebuild something similar to Gridsome, even AstroJS could somehow replace it too
  • Purge CSS is still alive, even tho nowadays we tend to not remove those classes but build only the ones with need with CSS frameworks like TailwindCSS because we realized that it was quite some un-necessary work and that it might lead to issues like yours
  • even if slick-carousel could still be used, consider some alternatives like the ones you could find here, not all of them are great but you have some choice at least
  • bumping Node's version might not be the most difficult process if you only need to go from v18, nvm after reading your other question here (aka starting from Node v10), I recommend starting with something brand fresh like Nuxt3.

Upvotes: 3

Related Questions