# babel-plugin-encapsulate-jsx

> babel plugin to encapsulate jsx based on filename

Latest version **3.1.0** (published 2018-05-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-encapsulate-jsx
pnpm add babel-plugin-encapsulate-jsx
yarn add babel-plugin-encapsulate-jsx
bun add babel-plugin-encapsulate-jsx
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2018-05-18 |
| First published | 2016-02-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 72.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Craftsy and Sympoz Inc. |
| Maintainers | chandlerprall |
| Keywords | babel, plugin, jsx, react, encapsulate, css, encapsulation, namespace |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-encapsulate-jsx
- Repository: https://github.com/Craftsy/babel-plugin-encapsulate-jsx
- Homepage: https://github.com/Craftsy/babel-plugin-encapsulate-jsx#readme
- Issues: https://github.com/Craftsy/babel-plugin-encapsulate-jsx/issues
- npm.io page: https://npm.io/package/babel-plugin-encapsulate-jsx

## Dependencies (1)

- [babel-core](https://npm.io/package/babel-core.md) ^6.3.17

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.1.0 (latest) — 2018-05-18
- 3.0.0 — 2018-03-26
- 3.0.0-rc1 — 2018-02-28
- 2.0.0 — 2017-01-09
- 1.0.1 — 2016-02-06

## README

babel-plugin-encapsulate-jsx
============================

TLDR; A babel plugin to auto-generate CSS classnames for JSX components.

This plugin uses the filename to generate a CSS classname for all JSX elements in that file.

We're pretty aggressive here, and there are more optimal ways to add class names everywhere. However, with gzip, the additional bytesize for adding this complexity is pretty minimal.

Use
---

Install with `npm install --save-dev babel-plugin-encapsulate-jsx`. Then, add the plugin section to your .babelrc:

`.babelrc`:
```
{
    "presets": ["es2015", "react"],
    "plugins": ["babel-plugin-encapsulate-jsx"]
}
```

By default the plugin will add a className attribute to every JSX element except React.Fragment and Fragment elements as those cannot receive properties. You can override this default list of exclusions and add your own with the `ignoredElements` configuration:

```
{
    "presets": ["es2015", "react"],
    "plugins": [
        ["babel-plugin-encapsulate-jsx", {ignoredElements: ['React.Fragment', 'Fragment', 'IgnoreThis', 'IgnoreThat']}]
    ]
}
```

Building
--------
`npm run test` runs the tests against the ES6 src code.

`npm run build` transpiles the encapsulate code into the `dist` directory.

---
_Source: https://npm.io/package/babel-plugin-encapsulate-jsx · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._