Encapsulate NPM

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 className={this.props.headerClass}>Hello World</h1>
    <p className="small">This is some text.</p>
</section>

section: {
    background-color: grey;
}

section h1 {
    display: inline-block;
}

section p.small {
    font-size: 10px;
}

are transformed into

<section className="FooComponent-1-0-0">
    <h1 className={this.props.headerClass + ' FooComponent-1-0-0'}>Hello World</h1>
    <p className="small FooComponent-1-0-0">This is some text.</p>
</section>

section.FooComponent-1-0-0: {
    background-color: grey;
}

section.FooComponent-1-0-0 h1.FooComponent-1-0-0 {
    display: inline-block;
}

section.FooComponent-1-0-0 p.small.FooComponent-1-0-0 {
    font-size: 10px;
}

how

There are a couple ways to use encapsulate

specifying a custom CSS class name

let encapsulate = require('encapsulate');

// somehow populate the JSX and CSS into these
let jsxContent;
let cssContent;

let transformedJsx = encapsulate.transformJsx(jsxContent, 'FooComponent-1-0-0');
let transformedCss = encapsulate.transformCss(cssContent, 'FooComponent-1-0-0');

computing the CSS class name from a package.json file

let encapsulate = require('encapsulate');

// somehow populate the JSX and CSS into these
let 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/file
let pathToModule = '/path/to/module';

let transformedJsx = encapsulate.encapsulateJsxWithPackage(pathToModule, jsxContent);
let transformedCss = encapsulate.encapsulateCssWithPackage(pathToModule, cssContent);