How to use it with next-compose-plugins and next-sass?

[VBagmut]

No description provided.

[lucleray]

You should be able to use it like this :

// next.config.js
const withPlugins = require('next-compose-plugins');
const purgecss = require('next-purgecss');
const sass = require('@zeit/next-sass');

const nextConfig = {
  // your next.js configuration
};

const plugins = [
  [sass, {
    // purgecss config
  }],
  [purgecss, {
    // sass config
  }]
];

module.exports = withPlugins(plugins, nextConfig);

Let me know if it works for you 🙂

[nagman]

Does it work with SASS Modules ?
I'm using this config with cssModules on true, and all my css in components and pages is removed.
Only my global css remains intact.

[lucleray]

Can you share a reproduction?

The order of the plugins might be the issue.

[nagman]

Sure, here's my next.config.js:

const withPlugins = require('next-compose-plugins');
const css = require('@zeit/next-css');
const sass = require('@zeit/next-sass');
const purgecss = require('next-purgecss');

const sassConfig = {
	cssModules: true,
	cssLoaderOptions: {
		localIdentName: '[local]__[hash:base64:5]',
	},
	sassLoaderOptions: {
		includePaths: ['theme'],
		outputStyle: 'compressed',
	},
};

const nextConfig = {};

module.exports = withPlugins(
	[css, [sass, sassConfig], purgecss],
	nextConfig,
);

[lucleray]

Thanks!

I'm not really familiar with next-compose-plugins, but could you try to put purgecss first in the list ?

Like this:

module.exports = withPlugins(
	[purgecss, css, [sass, sassConfig]],
	nextConfig,
);

[nagman]

If I do this, node throws me this error:

TypeError: webpack is not a function
    at Object.webpack (/home/adelios/dev/wth/node_modules/next-purgecss/index.js:29:12)
    at Object.webpack (/home/adelios/dev/wth/node_modules/@zeit/next-css/index.js:30:27)
    at webpack (/home/adelios/dev/wth/node_modules/@zeit/next-sass/index.js:47:27)
    at Object.webpack (/home/adelios/dev/wth/node_modules/next-size/index.js:21:12)
    at Object.getBaseWebpackConfig [as default] (/home/adelios/dev/wth/node_modules/next/dist/build/webpack-config.js:290:32)
    at HotReloader.getWebpackConfig (/home/adelios/dev/wth/node_modules/next/dist/server/hot-reloader.js:165:37)
error Command failed with exit code 1.

[lucleray]

@nagman Awesome! I have published a new version of the package (3.0.1), can you try it and tell me if it works?

[nagman]

Thanks @lucleray!
Now I don't get any error, but my CSS modules are still thrown away.

[lucleray]

Oh, that's unexpected. It may be the underlying packages :

https://github.com/FullHuman/purgecss
https://github.com/FullHuman/purgecss-webpack-plugin

I don't really have control over those. I found an open issue that seems to be related to yours here : FullHuman/purgecss#163

[fractefactos]

I have the same problem but this make can i work without any error, thanks @nagman!

@nagman Awesome! I have published a new version of the package (3.0.1), can you try it and tell me if it works?

[nagman]

@dr-martin I don't understand what you mean by

this make can i work without any error

Does it work? Or does it fail without any error?

If it works for you, I'd like to see your next.config.js and your package.json.

[skywickenden]

@dr-martin & @nagman Did Either of you manage to solve this. I have the same problem.

[nagman]

@skywickenden Nope. I've given up with this.

[serhiislobodian]

Had same error, worked for me only without any of sass config options (and next-css can be omitted). Like:

const withPlugins = require('next-compose-plugins');
const sass = require('@zeit/next-sass');
const purgecss = require('next-purgecss');

const nextConfig = {};

module.exports = withPlugins(
	[sass, purgecss],
	nextConfig,
);

[bhkim526]

I am having the same issue. Anyone solved it?

[rinkusam12]

Anyone still facing the problem of using purgecss with css module, use @fullhuman/postcss-purgecss with the postcss config, see their site for usage documentation. The problem with this plugin is it uses purgecss webpack loader and it runs before the hashed CSS class is generated. Hence it removes all the CSS. With the postcss purge it runs on the final CSS that gets generated.

[bhkim526]

@rinkusam12 Thank you for your tips but @fullhuman/postcss-purgecss still won't work since Next.js generated HTML dynamically so can't set the content. Please let me know if you have a better way to set the content. Thank you.

const purgecss = require('@fullhuman/postcss-purgecss')
postcss([
purgecss({
content: ['./src/**/*.html']
})
])

[rinkusam12]

@bhkim526 Its not working because you are targetting the wrong file. replace content: ['./src/**/*.html'] with " content: ['components/**/*.js', 'pages/**/*.js']

[th-devangnaghera]

Is anybody able to fix the issue? I am stuck as well. I tried all the mentioned solutions but none of them working as expected.
Her's my sass config
[ sass, { cssModules: true, cssLoaderOptions: { localIdentName: isProd ? '[hash:base64:8]' : '[name]_[local]_[hash:base64:5]', }, }, ],

[dpkpaa]

i have to use purgecss with compose-plugins only i tried all of the config that is mention above but it's not working my css chunk is showing 100% of code is unused

[tilman]

I had the same problem and ended up in a solution without using any next plugins at all, by only using the postcss config. Just let the next.config.js file untouched and create a new file postcss.config.js with following content:

module.exports = {
    plugins: [
        "postcss-flexbugs-fixes",
        [
            '@fullhuman/postcss-purgecss',
            {
                content: [
                    './pages/**/*.{js,jsx,ts,tsx}',
                    './pages/**/**/*.{js,jsx,ts,tsx}',
                    './pages/**/**/**/*.{js,jsx,ts,tsx}',
                    './pages/**/**/**/**/*.{js,jsx,ts,tsx}',
                    './components/**/*.{js,jsx,ts,tsx}',
                    './components/**/**/*.{js,jsx,ts,tsx}',
                    './components/**/**/**/*.{js,jsx,ts,tsx}',
                    './components/**/**/**/**/*.{js,jsx,ts,tsx}',
                ]
            }
        ],
        [
            "postcss-preset-env",
            {
                "autoprefixer": {
                    "flexbox": "no-2009"
                },
                "stage": 3,
                "features": {
                    "custom-properties": false
                }
            }
        ],
    ]
};

[dpkpaa]

react slick slider and phone-input2 styles are removing which is used in my components

[kayix]

I had the same problem and ended up in a solution without using any next plugins at all, by only using the postcss config. Just let the next.config.js file untouched and create a new file postcss.config.js with following content:

module.exports = {
    plugins: [
        "postcss-flexbugs-fixes",
        [
            '@fullhuman/postcss-purgecss',
            {
                content: [
                    './pages/**/*.{js,jsx,ts,tsx}',
                    './pages/**/**/*.{js,jsx,ts,tsx}',
                    './pages/**/**/**/*.{js,jsx,ts,tsx}',
                    './pages/**/**/**/**/*.{js,jsx,ts,tsx}',
                    './components/**/*.{js,jsx,ts,tsx}',
                    './components/**/**/*.{js,jsx,ts,tsx}',
                    './components/**/**/**/*.{js,jsx,ts,tsx}',
                    './components/**/**/**/**/*.{js,jsx,ts,tsx}',
                ]
            }
        ],
        [
            "postcss-preset-env",
            {
                "autoprefixer": {
                    "flexbox": "no-2009"
                },
                "stage": 3,
                "features": {
                    "custom-properties": false
                }
            }
        ],
    ]
};

its not working mate :(

[armsteadj1]

I did similar to @tilman .

I copied what nextjs says to start with into postcss.config.js then added @fullhuman/postcss-purgecss. Finally I removed the next-purgecss module entirely from my nextjs.config.

I included my additional node_modules and whitelist example because it is different than how next-purgecss does it, as it is a newer version of the purgecss plugin.

Unfortunately, this solution doesn't use the next-purgecss module, although it gave me all of my css module css. I'm not sure the best path to including this solution in the existing plugin. Possibly upgrading to the newest version of @fullhuman/postcss-purgecss would fix it. I'll try that if i get a chance.

const glob = require("glob-all");

module.exports = {
  plugins: [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009",
        },
        stage: 3,
        features: {
          "custom-properties": false,
        },
      },
    ],
    [
      "@fullhuman/postcss-purgecss",
      {
        content: glob.sync(
          [
            "./pages/**/*.js",
            "./components/**/*.js",
            "./blogs/**/*.js",
            "./node_modules/react-bootstrap/**/*",
            "./node_modules/react-bootstrap-range-slider/**/*",
          ],
          {
            nodir: true,
          }
        ),
        safelist: {
          greedy: [
            /^float/,
            /^btn.*/,
            /.*(sm|md|lg|xl)+.*/,
            /text.*/,
            /font.*/,
            /container.*/,
            /.*active.*/,
            /.*nav-tabs.*/,
          ],
        },
      },
    ],
  ],
};

[Vsion]

Has anyone solved the problem (with cssModules)?