Inline css mixes display and print styles

[maxfriedrich]

Do you want to request a feature or report a bug? Bug

What is the current behaviour? In a Preact CLI project that uses Bootstrap, the inline CSS of the build includes a print-only style body {min-width: 992px !important}. In dev mode, everything works as expected.

If the current behaviour is a bug, please provide the steps to reproduce. I created a repo with my config, it's just the simple template with Bootstrap dependency: https://github.com/maxfriedrich/preact-cli-bug-bootstrap-inline-css/, the inline CSS from the resulting build/index.html is linked in the README. I tried to isolate this with a simple CSS in the project but had no success, not sure if the styles must come from a different package?

What is the expected behaviour? The print-only style should not be included in the inline CSS.

If this is a feature request, what is motivation or use case for changing the behaviour? n/a

Please mention other relevant information. n/a

Please paste the results of preact info here.

Environment Info:
  System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-3635QM CPU @ 2.40GHz
  Binaries:
    Node: 13.12.0 - /usr/local/bin/node
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 81.0.4044.138
    Firefox: 59.0.1
    Safari: 13.0.5
  npmPackages:
    preact: ^10.1.0 => 10.4.4 
    preact-cli: ^3.0.0-rc.9 => 3.0.0-rc.10 
    preact-render-to-string: ^5.1.2 => 5.1.8 
  npmGlobalPackages:
    preact-cli: 2.2.1

[prateekbh]

cc @developit , I guess this is something we can fix in Critters webpack plugin

[developit]

Yeah this needs to be fixed there. It should skip print styles.

[prateekbh]

@developit I cant transfer it from here to critters, can you?