DEV Community

Cover image for What is the best way to distribute styles with npm package?

What is the best way to distribute styles with npm package?

stereobooster on June 03, 2019

Let's say we have an npm package with React components. These components have/need styling. Some styles are overridable, for example, colors or dim...
Collapse
 
thekashey profile image
Anton Korzunov

It depends on SSR. Without SSR it it could be a simple inject-style-tag solution, like react-style-singleton.

With SSR it become complex.

  • first your styles might be become bound to the users environment, like CSSModules for .css
  • next you might affect the users environment, like shipping SC4 while user has SC2

So - I would say - CSS. CSS with a webpack-loader of you choice, or node-loader to do the same, like css-modules-require-hook. It's just keeps a bit more freedom for everyone.

Collapse
 
stereobooster profile image
stereobooster

react-style-singleton is interesting I need to play with it. I didn't quite get the idea behind css-modules-require-hook, what the value there

Collapse
 
thekashey profile image
Anton Korzunov

css-modules-require-hook is just a good example of a node-loader. Like - you may process source CSS and transform to the thing you need, like you may do using webpack-loader.
Almost nobody consider this as an option, or calling some loader-based approaches bad, cos they are not repeatable for node, while they are :)

Thread Thread
 
andreynovikovrelef profile image
Andrey Novikov • Edited

What about babel-plugin-transform-postcss? I think this is better than css-modules-require-hook, because postcss and postcss-modules are used directly. And no CSS is actually included in the resulting JavaScript

Thread Thread
 
thekashey profile image
Anton Korzunov

A very good option

Collapse
 
kalpeshsingh profile image
Kalpesh Singh

I was recently stumbled upon this situation and finally uploaded the CSS file from package itself.
I also generate one asset manifest file which has location of main css file.

Now, it's upto consumer app to use it as <Link> tag or add it in their bundle.

Collapse
 
stereobooster profile image
stereobooster