encapsulate-css
v1.0.1
Published
utility to add a class to all css selectors
Downloads
4
Maintainers
Readme
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
:
{
"name": "@craftsy/example",
"version": "1.0.0"
}
src/example/yay.css
:
.example {
background: #00ff00 no-repeat fixed center;
}
.awesomeness {
border: 1px solid black;
}
src/example/index.js
:
import React from 'react';
export default Example({text, url, background, imgUrl, imgAlt}) {
return (
<div className="example" style={{backgroundImage: `url(${background})`}}>
<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:
import encapsulateCss from 'encapsulate-css';
import fs from 'fs';
console.log(encapsulateCss(
fs.readfileSync('src/example/yay.css', '_craftsy_example_1_0_0')));
output:
.example._craftsy_example_1_0_0 {
background: #00ff00 no-repeat fixed center;
}
.awesomeness._craftsy_example_1_0_0 {
border: 1px solid black;
}
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.