whitelist: transition classes

[MarvinMiles]

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)

[TheAlexLichter]

@MarvinMiles Hey 👋

Interesting idea! Automatically grabbing the classes might be possible with a custom extractor.

Besides that you could always use whitelist patterns to whitelist /-leave/ and /-enter/ though that will whitelist all transition classes.

[koresar]

@manniL this article has a better default extractor configuration: https://medium.com/@kyis/vue-tailwind-purgecss-the-right-way-c70d04461475

It takes care about transitions, vue-router classes, etc. Please, take a look.

[koresar]

I had to drop using the nuxt-purgecss. Here is my build.postcss.plugins value in nuxt.config.js

[
    require("postcss-preset-env")({ stage: 0 }),
    require("tailwindcss")(require("path").join(__dirname, "tailwind.js")),

    process.env.NODE_ENV === "production" &&
        require("@fullhuman/postcss-purgecss")({
            defaultExtractor(content) {
                return content.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || [];
            },
            content: ["components/**/*.vue", "layouts/**/*.vue", "pages/**/*.vue"],
            styleExtensions: [".css"],
            whitelist: ["body", "html", "nuxt-progress"],
            whitelistPatterns: [
                /-(leave|enter|appear)(|-(to|from|active))$/,
                /^(?!(|.*?:)cursor-move).+-move$/,
                /^router-link(|-exact)-active$/
            ]
        }),

    // autoperfixer does not work automatically even though both Nuxt and Tailwind depend on it.
    require("autoprefixer")
].filter(Boolean);

Good news. After applying this configuration my production CSS halved. :) Was 12KB gzipped, become 6KB.

[TheAlexLichter]

@koresar Why exactly did you drop nuxt-purgecss? 🤔
The same setup is achievable with the package ☺️

[TheAlexLichter]

PS: I'd accept a PR that adds transition and link classes to the whitelist patterns by default.

[koresar]

I dropped it because I didn't understand from the README how to do it.

[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: {}
      }
    }
  }
}

[TheAlexLichter]

@koresar thanks for the insights

Hope the answer from @curtisbelt helped you but I try to improve the readme.

For v1 of the module, I think the settings provided in the previous comment are sensible defaults in addition to current ones ☺️

[marcfilleul]

Thanks @curtisbelt, I was just wondering how to add the extended extractor part.
I was not sure how to add the "style" part of kyis Medium post:

defaultExtractor: (content) => {
    const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
    return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
  }

Then I realized that if styles in a SFC are not used, they shouldn't be here in the first place ;)

@koresar: As far as I'm concerned, autoprefixer works well without adding it in the conf.
How did you come to the conclusion it wasn't working automatically ?

[TheAlexLichter]

@willdante If you are using a postcss.config.js, autoprefixer won't work as expected, so that can happen (see nuxt/nuxt#5419)

[koresar]

Oh! That's why! Thanks

Side note: the IDEA IDE from Jetbrains have just got support for .nuxtignore
JetBrains/idea-gitignore#576 (comment)

[marcfilleul]

@willdante If you are using a postcss.config.js, autoprefixer won't work as expected, so that can happen (see nuxt/nuxt.js#5419)

@manniL Just to be sure, the issue happens only if wa have a separate postcss.config.js file and not if we use postcss mode and setup build.postcss.plugins values in nuxt.config.js, is that right ?

[TheAlexLichter]

@willdante Correct.

[TheAlexLichter]

Already resolved through #59

[zernonia]

Already resolved through #59

My main.css has

.page-enter-active {
  transition: all .5s;
  transform: translate(00px,0);
}
.page-leave-active {
  transition: all .5s;
  transform: translate(-100px,0);
}
.page-enter, .page-leave-to {
  opacity: 0;
}

yet they are still being purged.

"devDependencies": {
    "@nuxtjs/tailwindcss": "^1.0.0"
  }

[TheAlexLichter]

@zernonia "@nuxtjs/tailwindcss": "^1.0.0" doesn't include nuxt-purgecss version ^2.0.0. That's why.

Feel free to upgrade the module ☺️

[zernonia]

@zernonia "@nuxtjs/tailwindcss": "^1.0.0" doesn't include nuxt-purgecss version ^2.0.0. That's why.

Feel free to upgrade the module ☺️

THAKN YOU SO MUCH for replying fast.. I didnt realised that this module wasnt included in @nuxtjs/tailwindcss..

[TheAlexLichter]

@zernonia "@nuxtjs/tailwindcss": "^1.0.0" doesn't include nuxt-purgecss version ^2.0.0. That's why.
Feel free to upgrade the module ☺️

THAKN YOU SO MUCH for replying fast.. I didnt realised that this module wasnt included in @nuxtjs/tailwindcss..

No problem ☺️
It's included, but not the newest version. And tailwind comes with it's own purgecss process now btw, so updating the tailwind module + using tailwindcss.config.js purge options should be enough.