How to distribute CSS via NPM

Question

I'm trying to break up my monolithic React app into reusable parts that can be shared with other projects.

I want to extract some generic components (e.g. Button, Header, Dropdown, etc.) into my own little UI library. The problem I'm running into is how to manage the CSS. Right now, my app just has a single stylesheet that takes care of everything.

These are the solutions I have seen:

Embed the CSS styles for each component in the JS for the component itself (CSS in JS).
import or require the CSS files in the JS for the component and use webpack to bundle the CSS file for you.

I really don't love either option. I understand the appeal of co-locating the styles with the component, but I feel like: a) it clutters the component definition, and b) it fights with how CSS works (no more taking advantage of cascading styles since everything is so tightly scoped to the individual component).

And, I can't bring myself to import a CSS file. That just feels so wrong. We're not even writing javascript anymore at that point.

I realize that these aren't exactly popular opinions, but is there a 3rd option that I'm missing for getting a good old fashioned CSS file from an NPM module that I can just drop in my HTML and use? Ideally one that doesn't involve copy/pasting it from node_modules. :)

Just a tip, not a full solution, but I would suggest using Sass (scss) to generate the CSS. It's then easier to split your styling into small files and import them from different repositories. — Emile Bergeron
– Emile Bergeron, Commented Oct 19, 2018 at 18:42
Bootstrap works like this, while they provide compiled CSS files, it's possible to use just the SCSS files you need. — Emile Bergeron
– Emile Bergeron, Commented Oct 19, 2018 at 18:44
Thanks for the tip @EmileBergeron. I haven't used SCSS before. Could you show me an example of how you import SCSS files from a third party repo in your project? — Dominic P
– Dominic P, Commented Oct 19, 2018 at 18:48
It's all documented on the bootstrap website, but it really depends on your project configuration. — Emile Bergeron
– Emile Bergeron, Commented Oct 19, 2018 at 19:15
Thanks for the link, that's very helpful. So, I guess the magic there is: @import "~bootstrap/scss/bootstrap"; in the main SCSS file. Webpack can use that to find the appropriate files to bundle together. I like it. :) — Dominic P
– Dominic P, Commented Oct 19, 2018 at 20:02

Dominic P · Accepted Answer · 2018-10-22 18:04:32Z

3

Thanks to the tip from @EmileBergeron I found the PostCSS import plugin. It can find and inline stylesheets in node_modules and in your own code.

So, my workflow will be:

npm install my-ui-library
Import the React components you want to use into your JS files import { Button } from 'my-ui-library'
Import the corresponding stylesheets into your CSS files @import 'my-ui-library/Button.css'

That way I'm importing CSS into CSS and JS into JS which feels a lot more natural to me. It might also make sense to just have one stylesheet for all components instead of breaking it up per-component, but that's a detail I can figure out later.

Then, I just need to add PostCSS into my build system to inline everything which has been pretty simple in testing.

edited Oct 22, 2018 at 18:04

answered Oct 22, 2018 at 17:57

Dominic P

2,4222 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to distribute CSS via NPM

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related