Not removing unused classes properly

[zaguiini]

Versions: "purify-css": "^1.2.5", "purifycss-webpack": "^0.7.0"

I'm trying to purify CSS modules, but unused classes are being exported as well. Yes, I did everything that is stated in the README:

weback.config.js

use: [
  {
    loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
        modules: true,
        localIdentName: 'td__[local]__[hash:base64:5]',
        minimize: true,
        sourceMap: shouldUseSourceMap,
      },
  },
],
...
plugins: [
  new PurifyCSSPlugin({
    paths: glob.sync(`${paths.appSrc}/**/*.js`), // tried both public and src folders
    purifyOptions: {
      whitelist: ['*td*']
    },
  }),
],

App.css file:

.unused-class {
  font-size: 32px;
  background: red;
}

.App {
  text-align: center;
}

.App-logo {
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import styles from './App.css';

class App extends Component {
  render() {
    return (
      <div className={styles['App']}>
        <header className={styles['App-header']}>
          <img src={logo} className={styles['App-logo']} alt="logo" />
          <h1 className={styles['App-title']}>Welcome to React</h1>
        </header>
        <p className={styles['App-intro']}>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

But when I run the build, I get the .unused-class exported as well, even though I'm obviously not using it 😖

main.css (output):

.td__unused-class__l3_t2 {
  font-size: 32px;
  background: red;
}

.td__App__1o-Fp {
  text-align: center;
}

.td__App-logo__3JCPt {
  height: 80px;
}

.td__App-header__3iH8L {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: #fff;
}

.td__App-title__EIoWq {
  font-size: 1.5em;
}

.td__App-intro__1OgPc {
  font-size: large;
}
/*# sourceMappingURL=main.79a81fd0.css.map*/

Is something wrong? Is that expected behavior?

[zaguiini]

Ok, so... Messing around I've found that with this config:

new PurifyCSSPlugin({
  // Give paths to parse for rules. These should be absolute!
  paths: glob.sync(`${paths.appSrc}/**/*`),
  moduleExtensions: ['.css', '.html', '.js'],
}),

It removes things, but removes way too much:

.td__unused-class__l3_t2 {
  font-size: 32px;
  background: red;
}

.td__App-header__3iH8L {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: #fff;
}

And the damned .unused-class is still there... WTF?

[lucky-newbie]

@zaguiini hi, did you solve it? i met the same issue....

[lucky-newbie]

the version of them are purify-css 1.2.5 and purifycss-webpack 0.7.0.

[zaguiini]

No :/

[lucky-newbie]

en. thx, i also use the example in the project, and the example code doesn't remove unused class...

[betancourtl]

This plugins is useless when using css modules. It includes everything.