fix: do not purge vue transition css classes (#59)

Author: trecenti

lib/module.js

@@ -26,7 +26,9 @@ export default function nuxtPurgeCss(moduleOptions) {
     ],
     styleExtensions: ['.css'],
     whitelist: ['body', 'html', 'nuxt-progress', '__nuxt', '__layout'],
-    whitelistPatterns: [],
+    whitelistPatterns: [
+      /.*-(enter|enter-active|enter-to|leave|leave-active|leave-to)/
+    ],
     whitelistPatternsChildren: [],
     extractors: [
       {

test/fixture/assets/a.css

@@ -17,3 +17,55 @@ h1 {
 .pattern-a {
     color: red
 }
+
+.v-enter {
+    color: pink
+}
+
+/* Default Vue Transitions */
+
+.v-enter-active {
+    color: violet
+}
+
+.v-enter-to {
+    color: yellow
+}
+
+.v-leave {
+    color: aqua
+}
+
+.v-leave-active {
+    color: magenta
+}
+
+.v-leave-to {
+    color: brown
+}
+
+/* Named Vue Transitions */
+
+.named-transition-enter {
+    color: pink
+}
+
+.named-transition-enter-active {
+    color: violet
+}
+
+.named-transition-enter-to {
+    color: yellow
+}
+
+.named-transition-leave {
+    color: aqua
+}
+
+.named-transition-leave-active {
+    color: magenta
+}
+
+.named-transition-leave-to {
+    color: brown
+}

test/module.test.js

@@ -100,6 +100,32 @@ describe('nuxt-purgecss', () => {
       expect(testCSS).not.toMatch('.abc')
       expect(testCSS).not.toMatch('.ymca')
     })
+
+    describe('vue transitions', () => {
+      test('does not purge vue default transitions', async () => {
+        nuxt = await setupNuxt(require('./fixture/configs/webpack/default'))
+
+        const globalCSS = await getGlobalCSS()
+        expect(globalCSS).toMatch('.v-enter')
+        expect(globalCSS).toMatch('.v-enter-active')
+        expect(globalCSS).toMatch('.v-enter-to')
+        expect(globalCSS).toMatch('.v-leave')
+        expect(globalCSS).toMatch('.v-leave-active')
+        expect(globalCSS).toMatch('.v-leave-to')
+      })
+
+      test('does not purge vue named transitions', async () => {
+        nuxt = await setupNuxt(require('./fixture/configs/webpack/default'))
+
+        const globalCSS = await getGlobalCSS()
+        expect(globalCSS).toMatch('.named-transition-enter')
+        expect(globalCSS).toMatch('.named-transition-enter-active')
+        expect(globalCSS).toMatch('.named-transition-enter-to')
+        expect(globalCSS).toMatch('.named-transition-leave')
+        expect(globalCSS).toMatch('.named-transition-leave-active')
+        expect(globalCSS).toMatch('.named-transition-leave-to')
+      })
+    })
   })
   describe('postcss', () => {
     test('purge css by default', async () => {