search

lucleray / next-purgecss

nextjs + purgecss for smaller css bundles
https://www.npmjs.com/package/next-purgecss
134 stars 8 forks source link

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

Closed YIZHUANG closed 5 years ago

YIZHUANG commented 5 years ago

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 5 years ago

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

YIZHUANG commented 5 years ago

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 5 years ago

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 5 years ago

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 5 years ago

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