Duplicated critical css

[caxapexac]

What is the current behaviour?
Inlined critical styles:

Also exists in this bundle:


Which is includes into build
How to control

Steps to Reproduce
Just preact build

What is the expected behaviour?
Part of css is critical so I can choose what to inline and what to place into bundle.css

Btw how to control which css files are inlined at all? No info in readme

[rschristian]

This is intentional and correct. bundle.css needs to have the full styles, but inlining critical styles ensures fast first paint. The benefits of this should outweigh the cost of a few duplicated styles.

Critters is used to generate critical CSS.

Btw how to control which css files are inlined at all? No info in readme

CSS files aren't inlined, critical styles are. I don't know what you're looking to control. Input stylesheets? You can't, AFAIK. You could reduce the built stylesheets that Critters can use to generate critical styles, but I don't know why you would. Below is how you could alter it.

preact.config.js

export default (config, env, helpers) => {
  const critters = helpers.getPluginsByName(config, 'Critters')[0];
  if (critters) {
    critters.plugin.option.additionalStylesheets = [ '*.css' ];
  }
}

[caxapexac]

Oh I just understood critters finds critical css automatically, so duplicating makes sense