Optional insertion point?

[madeleineostoja]

First of all whoa, love what you've done with this plugin @jonathantneal!

What do you think about providing an optional insertion point hook for the Normalize styles? It's common for buildsteps to operate on multiple CSS files and since postcss-normalize blindly injects into everything it finds you could easily end up with duplicated code without realising, which defeats the purpose of saving bytes with browserlist. This is especially true of more complex SPAs and the like.

Of course you can mitigate this with a dedicated buildstep just for postcss-normalize, but it seems like a gotcha for users.

Maybe something like

/* Inject browserlisted Normalize here */
@normalize

.rest-of-my-rules {
  ...
}

require('postcss-normalize').process(YOUR_CSS, {
  atRule: true
});

Then if it doesn't find the @normalize rule in a given document it doesn't inject anything. Also gives this method with the current standard of importing Normalize.css with postcss-import, ie:

/* Inject Normalize here */
@import 'normalize.css'


.rest-of-my-rules {
  ...
}

[jonathantneal]

I think this is a great idea. I’d love to know what others think. I wonder if there’s another injection pattern we can borrow. I like your idea. I just want to give others a chance to show us an even better way, if one exists.

[ben-eb]

https://github.com/postcss/postcss-plugin-context would do that.

[madeleineostoja]

Ah perfect thanks @ben-eb

Maybe we should just mention that pattern in the readme? Common enough use-case IMO.

[jonathantneal]

This is now possible!

@import "postcss-normalize";

[madeleineostoja]

Nice! So just to clarify - if a given CSS file/input doesn't have an import statement, postcss-normalize won't get injected at all? Because from the docs sounds like this just controls the injection point within the same bundle/CSS file.

If that's the case, I still think it would need an optional Boolean to only use the injection point. Or as ben-eb pointed out, just document using postcss-plugin-context (using that pattern on simpla.io and works a treat).