encapsulate-css
TLDR; A utility function to namespace your css. There is an associated jsx plugin.
why
At Craftsy, we use a monorepo: each React component is in it's own npm package.
src/example/package.json
:
src/example/yay.css
:
src/example/index.js
:
; text url background imgUrl imgAlt return <div className="example" style=backgroundImage: `url()`> <h2>text</h2> <a href=url> <div className="awesomeness"> <img src=imgUrl alt=imgAlt/> </div> </a> </div> ;
We realized that to maximize component reuse, we'd have to make sure that css is scoped to just that component AND it's version (so we could potentially have 2 versions of one component on a page). We could just use BEM or a namespacing pattern, but then we'd have to change the CSS and JSX EVERY time we pushed a new version. We also knew we'd make a lot of mistakes.
So we automated namespacing.
This utility function takes a className and namespaces css so all selectors use that className.
Use
example use:
;; console;
output:
Building
npm run test
runs the tests against the ES6 src code.
npm run build
transpiles the ES6 code to ES5 and puts it in the dist
directory.