Page transitions removed when adding nuxt-purgecss defaults

[bovas85]

I noticed my page transitions are gone once I add purgecss. Removing the module re enables them.

My sass:

.page-enter-active {
  animation: acrossIn .40s ease-out both;
}

.page-leave-active {
  display: block;
  animation: acrossOut .80s ease-in both;
}

@keyframes acrossIn {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes acrossOut {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -100%, 0);
  }
}

My nuxt config

modules: [
    ...
    'nuxt-purgecss'
  ],
  purgeCSS: {
    whitelistPatterns: [/^page/],
    whitelist: ['body', 'html', 'page', 'nuxt-progress'],
    rejected: true
  },

[manniL]

As you don't use the classes "directly" in code, you have to whitelist them.

Try /^\.page/ (or /page/) as pattern. /^page/ won't work because classes start with a dot :exclamation:

[bovas85]

this worked for me

paths: [
        'assets/css/*'
      ],
      whitelist: [
        'body',
        'html',
        'nuxt-progress',
        'page-enter-active',
        'page-leave-active'
      ],

[bovas85]

as that folder is not in the defaults I needed to add it there

[manniL]

Scanning your css folder will lead to including all CSS you've created in the files of that folder.

I don't think that's what you wanted :thinking:

[bovas85]

hmm let me try your solution then, good point

[bovas85]

nope, that doesn't work. Maybe the keyframes are not being ignored?

[bovas85]

yep, this worked whitelistPatterns: [/^keyframes/], although I'm not sure why it's being purged

[manniL]

There you go :relaxed: