Tailwindcss-module: Adding purge whitelist options breaks Production Build

[fayazara]

Version

@nuxtjs/tailwindcss: 1.4.1
nuxt: 2.11.0

Reproduction Link

None as Build fails, bug is in dev env.

Steps to reproduce

Add purge options as mentioned in the docs - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css

Example:

module.exports = {
  purge: {
    options: {
      whitelistPatterns: [/agile*/],
      whitelistPatternsChildren: [/agile*/]
    }
  },
  variants: {},
  plugins: []
}

What is Expected?

Skip the agile classes and add them in the css output in production build

What is actually happening?

Breaks the production build with the below error.

ERROR in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/string-replace-loader??ref--12!./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&)
8:10:13 PM: Module build failed (from ./node_modules/postcss-loader/src/index.js):
8:10:13 PM: TypeError: Cannot read property 'filter' of undefined
8:10:13 PM:     at /opt/build/repo/node_modules/tailwindcss/node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js:1:483
8:10:13 PM:     at LazyResult.run (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:295:14)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:208:26)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:221:14)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:221:14)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:221:14)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:221:14)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:221:14)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:221:14)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:221:14)
8:10:13 PM:     at /opt/build/repo/node_modules/postcss/lib/lazy-result.js:250:14
8:10:13 PM:     at new Promise (<anonymous>)
8:10:13 PM:     at LazyResult.async (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:246:23)
8:10:13 PM:     at LazyResult.then (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:127:17)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:212:17)
8:10:13 PM:     at LazyResult.asyncTick (/opt/build/repo/node_modules/postcss/lib/lazy-result.js:221:1

[mornir]

My guess is that you're missing the content property. Cannot read property 'filter' of undefined, undefined being the content property.
Adding content: [] should fix the problem, but then you wouldn't be purging anything. Could you try adding the following default config and see if it's working?
```js
module.exports = {
purge: {
enabled: process.env.NODE_ENV === 'production',
content: [
'components//.vue',
'layouts//.vue',
'pages//.vue',
'plugins//.js',
'nuxt.config.js',
],
options: {
whitelistPatterns: [/agile/],
whitelistPatternsChildren: [/agile/]
}
},
variants: {},
plugins: []
}

[fayazara]

Well, the build is succeding now, but the whilelisting is now working.

I am still not getting classes for my vue-agile third party plugin and everything is still messed up.

[mornir]

a wild guess: try
whitelistPatterns: [/agile.*/]
(with a dot)

(and I don't think that you need whitelistPatternsChildren)

[fayazara]

Tried, does not work.

Even the other nuxt-modules classes are now being removed. For Eg, nuxt-lazy load has stopped working since its classes are now being purged.

[fayazara]

Should I just downgrade to nuxt where it had the OG purgeCSS built in and prev TailwindCSS version. Since debugging this is hampering my work time.

[mornir]

ah sorry I meant whitelistPatterns: [/^agile.+/]. Make sure that your regex is correct (https://regex101.com/) according the CSS of vue-agile: https://unpkg.com/[email protected]/dist/VueAgile.css
yeah, you also need to whitelist nuxt-lazy-load classes.

[fayazara]

Nope, does not work. I tried manually adding every single agile class in the whitelist array, it still didnt work.

I know its not vue-agile's issue because it works in dev server.

How it looks in dev server

Here is how it looks in production build

I even tried

purge: {
  enabled: false
}

The slider still wont work, this is very frustating, I used to work with tailwindcss and nuxt every single time in my work flow and never came across this issue.

[jhull]

Same issue here. Whitelisting not working at all...(nuxt 2.13)

[bart]

Same issue here. Using purgecss-whitelister module and getting many errors of

Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (7:0)

The only option I currently see to fix this quickly is disabling purging in tailwind and using nuxt-purgecss plugin for purging

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Atinux]

Please upgrade to Nuxt Tailwind v2 or v3 since we don't maintain anymore the v1 since Tailwind has an official way of purging the css now.