lucleray/next-purgecss

Used css codes are also being removed when using semantic-ui custom theme.

YIZHUANG opened this issue · 5 comments

YIZHUANG commented

I am using a custom theme

When i am importing

import '../semantic/dist/semantic.min.css';

in _app.js.

Here is my config:

[
      withPurgeCss
]

After build i can see a bunch of unused css codes are removed, but somehow the needed css codes are also removed by this plugin...

lucleray commented

Thanks for reporting. Can you share a reproduction ? I can help investigate.

YIZHUANG commented

Thanks for reporting. Can you share a reproduction ? I can help investigate.

Hi, this is the repo. https://github.com/YIZHUANG/nextjs-semantic-purgecss

Just npm install and npm run dev

In the TestPage i am using the "Accordion" from "semantic-ui", but there is no styling at all if "withPurgeCss" is added

lucleray commented

Since your pages are in a src directory and that is not standard, you need to add this configuration for purgecss to scan the right files for css classes/ids names :

{
  // some config here
  purgeCssPaths: ['src/pages/**/*']
}
YIZHUANG commented

Since your pages are in a src directory and that is not standard, you need to add this configuration for purgecss to scan the right files for css classes/ids names :

{
  // some config here
  purgeCssPaths: ['src/pages/**/*']
}

Hi, i tried with

const plugins = [withCSS, withSass, [withPurgeCss, {
  purgeCssPaths: ['src/pages/**/*']
}]];

Still doesn't work.

lucleray commented

It doesn't work because the class names are not present in the pages of your app.

The way the purgecss library work is simple : it scans files for class names (here your pages files) and removes unnecessary styles accordingly. From what I see in your code, you're using react components so the class names are not present in the files.

It seems the library you're using is offering solutions for you to only bundle the necessary css : https://medium.com/webmonkeys/webpack-2-semantic-ui-theming-a216ddf60daf