Provide Normalize as a Template Literal

[joe-bell]

Is your feature request related to a problem? Please describe.

There are a number of existing ports that transform Normalize for use as a template literal/to work with CSS in JS. For example:

1. https://github.com/cssinjs/normalize-jss
2. https://github.com/lestad/styled-normalize

Although it's great to see people going out of their way to make this work for CSS in JS, I'm cautious to install a non-affiliated and separately maintained library

Describe the solution you'd like

What I propose is an additional npm prepublishOnly step that essentially transforms normalize.css into a template literal for consumption via index.js.

// normalize.css/index.js (proposed)
export default `
  /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
  ...
`

For example, if I then wanted to consume Normalize in Emotion, I could use:

// Consuming Normalize
import normalize from 'normalize.css'

injectGlobal`
  ${normalize}
`

I understand you're probably keen to keep this as platform agnostic as possible, but I think a lot of CSS in JS users will really benefit from this. Plus as a template string it can be used with any library!

Describe alternatives you've considered

I'm not sure of any alternatives for this but I'd be happy to discuss some other options, perhaps an official extension that transforms the dependency rather than hard-coded (like the above examples)?

Additional context

Currently spiking a 'full Emotion' example as part of my CSS methodology - "Smoothie"

[necolas]

I'm cautious to install a non-affiliated and separately maintained library

I can understand that. If you look at this styled-normalize script it installs the normalize.css package and transforms it into a string exported by a JS module. You could also use a parser like postcss to convert the CSS into whatever JS format you want to end up with. The cssinjs project does not do this.

I understand you're probably keen to keep this as platform agnostic as possible, but I think a lot of CSS in JS users will really benefit from this.

As styled-normalize shows, this is straight-forward for someone to do on a per-project basis if they want to. I don't happen to think normalize.css should be used this way. Adding CSS strings to JS bundles is mostly cost and little reward. This is less of an issue when using a JS object syntax, but one of the areas styles in JS has most value is in component styles avoiding a dependency on a shared global style base like normalize.css.

[joe-bell]

Thanks for the feedback @necolas

[ghost]

Don't use CSSX. Just because Facebook have started inlining html stuff people are jumping on the bandwagon and going too far.

[joe-bell]

people are jumping on the bandwagon and going too far.

because it's ace @def14nt!

I was a sceptic just like you, here are some resources that helped change my mind. If you're still unsure please don't hesistate to ping me directly

[ghost]

@joe-bell It isn't ace because it's called bad practice. OK then, what if you want to edit your css? Instead of just opening a file and editing the content, let's scroll through a bunch of JS because Facebook are doing it! It's also called being a sheep.

[Toddses]

This probably not the place for a conversation about the merits of CSSX.

[ghost]

@Toddses Agreed. Sorry.