webpack: PurfiyCSSPlugin does not include styles referenced by bundle.js

Question

I try to use webpacks PurifyCSSPlugin. My config looks like this

new PurifyCSSPlugin({
    paths: glob.sync([
          path.join(env.outputDirectory, './*.html'),
          path.join(env.outputDirectory, './**/*.js'),
          path.join(__dirname, './**/*.tsx')
        ]),
    purifyOptions: {
        info: true,
        minify: false
    }
})

and I use styles in this way:

import { title } from "./styles.scss";
...
return <h1  className={title}>Hello!</h1>;

(the entire project can be found on GitHub).

The problems I have are

1. If run the build for the first time at get this output:

   PurifyCSS has reduced the file size by ~ 99.4%

   and the page is not correctly rendered because style references within tsx/jsx are missing (or transitive style dependencies).

2. If I run the build for the second time then I get this output:

   PurifyCSS has reduced the file size by ~ 93.2%

   and the page is correctly rendered. My paths settings causes to find the bunde.js of the previous build and this is the reason why also my the styles of tsx/jsx are honored. The output is perfectly optimized.

3. If I follow PurifiyCSS' hint for CSS modules I get this output:

   PurifyCSS has reduced the file size by ~ 1.5%

   and the page is also correctly rendered. But all styles (used and unused) are included and the package size is much bigger. Only a couple of bytes smaller than without PurifyCSS.

My question now is: How can I achieve to get the output of "2." even on the first build run? It seems the output is not serialized anywhere and so I can't tell PurifyCSS to take it into account.

Has anyone solved this problem? I couldn't find anything on the web.

Thx, Stephan