purifycss-webpack icon indicating copy to clipboard operation
purifycss-webpack copied to clipboard

Styles imported in an async split bundle are incorrectly filtered out

Open vitosamson opened this issue 8 years ago • 1 comments

Minimal repro project: https://github.com/vitosamson/purifycss-webpack-repro.

There are two entry points: src/split and src/not-split. Both pull in src/Child, but split does so via require.ensure for async code splitting. Child imports react-select's css.

The split css bundle for some reason is 3kb smaller than the non-split bundle. One example of a missing css rule is .Select-arrow-zone.

It's not clear to me why the two entries are being treated differently. Clearly at least some of the css selectors in the split bundle are being picked up, but not all of them.

purifycss-webpack: 0.7.0 webpack: 2.6.1 node: 6.9.1 OS: OSX 10.11.1

vitosamson avatar May 27 '17 18:05 vitosamson

After a little digging I've found the following:

  • src/Child.js is never included in filesToSearch here
  • this is probably due to Child being in a different chunk (it's not in the main chunk's files)
  • the Child chunk is included in compilation.chunks here, however since ExtractTextPlugin pulls all child chunks css into the main chunk, there are no assetsToPurify for it here - the only asset that chunk has is its .js

I'm not really sure how to work around this. I also can't figure out why the split css bundle includes any react-select styles at all, rather than dropping all of them since Child is never included in the files to search.

vitosamson avatar May 28 '17 16:05 vitosamson