# babel-plugin-bem-prefix

> ## Description

Latest version **0.0.2** (published 2021-09-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-bem-prefix
pnpm add babel-plugin-bem-prefix
yarn add babel-plugin-bem-prefix
bun add babel-plugin-bem-prefix
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2021-09-09 |
| First published | 2021-09-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mr-zsy |
| Maintainers | mr-zsy |
| Keywords | BEM, prefix |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-bem-prefix
- Homepage: https://github.com/Mr-zsy/babel-plugin-bem-prefix
- npm.io page: https://npm.io/package/babel-plugin-bem-prefix

## Recent versions

- 0.0.2 (latest) — 2021-09-09
- 0.0.1 — 2021-09-02

## README

# babel-plugin-bem-prefix

## Description

配合BEM规范使用，为`React`组件`className`加`prefix`,默认替换`&__`为`prefix`的值，`prefix`值默认为当前`React`组件的组件名，支持`prefixFlag`配置替换占位符，支持函数组件和类组件

## Download
```
npm install --save-dev babel-plugin-bem-prefix
```

## Options

### prefix
想要为`className`加的前缀值。

### prefixFlag
前缀替换标识，默认为`&__`。

### commentPrefixFlag
利用注释配置文件级别前缀获取标识，优先级高于`prefix`。
（注意：要在最外层作用域添加才能生效，且重复定义无效读取第一个值）

> .babelrc
```
{
    "plugins": [["babel-plugin-bem-prefix", {
      "prefixFlag": "&__",
      "prefix": "prefix-",
      "commentPrefixFlag": "commentPrefix"
    }]]
}
```

```
 // commentPrefix:  xxxx
import './App.css';


// commentPrefix: xxxx1     invalid


function App() {
    // commentPrefix: xxxx1     invalid
  const aaa = function() {
    return <div className="&__test2222"></div>
  }
  return (
    <div className="&__test"></div>
  );
}

export default App;

```

## TODO
- 补充单测

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