Remove unused css with React and Webpack : <p>I'm trying to remove unused css classes from my app using <a href="https://github.com/webpack-contrib/purifycss-webpack" rel="noreferrer">purify-css</a> for WebPack.</p>

<p>To build this project I'm usin <code>React</code>, <code>scss</code>, <code>WebPack</code> and <code>PostCss</code> to build and compile everything.</p>

<p>So far I was able to have progress, but there is something wrong and I don't know why, but the expected result isn't correct. I have a very very basic setup just to test these scenarios, so this is my index.html and app.js files (the only files I have so far):</p>

<p><strong>index.html</strong></p>

<pre><code>&lt;body&gt;
    &lt;nav&gt;
        &lt;a href=""&gt;home&lt;/a&gt;
    &lt;/nav&gt;
    &lt;hr /&gt;
    &lt;div id="app"&gt;&lt;/div&gt;
    &lt;footer class="my-other-heading"&gt;&lt;/footer&gt;
&lt;/body&gt;
</code></pre>

<p><strong>app.js</strong></p>

<pre><code>class App extends React.Component {
    render() {
        return (
            &lt;h1 className="my-other-heading"&gt;Mamamia!&lt;/h1&gt;
        );
    }
}

render(&lt;App /&gt;, window.document.getElementById("app"));
</code></pre>

<p>On the css files I'm using <a href="https://necolas.github.io/normalize.css/" rel="noreferrer">Normalize.css</a> (with a bunch of css classess) and just 3 custom classes:</p>

<pre><code>.my-class {
    background-color: #CCDDEE;
}

.my-heading {
    color: red;
}

.my-other-heading {
    color: blue;
}
</code></pre>

<p>The expected output should contain only these classes:</p>

<pre><code>html, body, nav, a, hr, div, footer, h1, .my-other-heading
</code></pre>

<p>However it has some other classes:</p>

<pre><code>.my-heading, h2, h3, h4, [type='checkbox'] (and other similar, e.g.: [type='button']
</code></pre>

<p>Why is this happening? It's removing almost all the classes it should, but some of them are still here, and classes that are clearly not being used on the index file. I don't know if they persist because of some other declaration on the React side, but i'm refering only the src files. This is my purify-css config:</p>

<pre><code>new PurifyCSSPlugin({
  paths: glob.sync([
    path.join(__dirname, '..', 'src', '**/*.html'),
    path.join(__dirname, '..', 'src', '**/*.js'),
  ]),
})
</code></pre>
