whitelist: transition classes

Hey!

Currently I have to manually write white list like this: whitelist: [..., 'page-enter-active', 'page-leave-active', 'page-enter', 'page-leave-to', 'smooth-enter-active', 'smooth-leave-active', 'smooth-enter', 'smooth-leave-to', 'fade-enter-active', 'fade-leave-active', 'fade-enter', 'fade-leave-to' ...]

Is it possible to configure module for auto whitelisting transition classes which nuxt uses? If not, it would be super cool to get this functionality in the future)

[curtisbelt]

@koresar

Thank you for sharing that article, I am actually updating my config on a project now based on your post and that article!

I’m keeping nuxt-purgecss, I believe the config below is equivalent to what you posted. Note I updated router-link to nuxt-link.

// nuxt.config.js

module.exports = {
  purgeCSS: {
    mode: 'postcss',
    extractors: [
      {
        extractor: class {
          static extract(content) {
            return content.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || [];
          }
        }
      }
    ],
    whitelistPatterns: [
      /-(leave|enter|appear)(|-(to|from|active))$/,
      /^(?!(|.*?:)cursor-move).+-move$/,
      /^nuxt-link(|-exact)-active$/
    ]
  },
  build: {
    postcss: {
      preset: {
        stage: 0
      },
      plugins: {
        tailwindcss: './tailwind.js',
        autoprefixer: {}
      }
    }
  }
}

[manniL]

@willdante If you are using a postcss.config.js, autoprefixer won’t work as expected, so that can happen (see https://github.com/nuxt/nuxt.js/pull/5419)