encapsulate
Transform CSS and JSX content by scoping the CSS classes to a provided module name.
why
To prevent CSS styles intended for specific React components to cascade and apply to other components, encapsulate ensures that all elements are given a class name and all CSS styles are scoped to the same class. For example, given a class name of FooComponent-1-0-0 the JSX and CSS
<section> <h1 =>Hello World</h1> <p ="small">This is some text</p></section>
are transformed into
<section ="FooComponent-1-0-0"> <h1 =>Hello World</h1> <p ="small FooComponent-1-0-0">This is some text</p></section>
how
There are a couple ways to use encapsulate
specifying a custom CSS class name
let encapsulate = ; // somehow populate the JSX and CSS into theselet jsxContent;let cssContent; let transformedJsx = encapsulate;let transformedCss = encapsulate;
computing the CSS class name from a package.json file
let encapsulate = ; // somehow populate the JSX and CSS into theselet jsxContent;let cssContent; // This can be any path that that has a package.json in its hierarchy// e.g. /path/to/the/module// /path/to/the/module/package.json// /path/to/the/module/some/other/filelet pathToModule = '/path/to/module'; let transformedJsx = encapsulate;let transformedCss = encapsulate;
developing
git clone
the repository and npm install
to install all of the dependencies needed to build & run tests.
running tests
npm test
building
gulp build
transpiles the encapsulate code into the dist
directory.