# postcss-gentcss

> PostCSS plugin implementing gentcss

Latest version **0.1.0** (published 2017-04-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-gentcss
pnpm add postcss-gentcss
yarn add postcss-gentcss
bun add postcss-gentcss
```

## 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.1.0 |
| Published | 2017-04-08 |
| First published | 2017-04-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | sherry |
| Keywords | postcss, css, postcss-plugin, gentcss |

## Links

- npm: https://www.npmjs.com/package/postcss-gentcss
- Repository: https://github.com/gentcss/postcss-gentcss
- Homepage: https://github.com/gentcss/postcss-gentcss#readme
- Issues: https://github.com/gentcss/postcss-gentcss/issues
- npm.io page: https://npm.io/package/postcss-gentcss

## Dependencies (1)

- [postcss](https://npm.io/package/postcss.md) ^4.1.9

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2017-04-08

## README

# gent-css

> `gentcss`是一种类似`BEM`的css命名规范, `postcss-gentcss`是一个[postcss](https://github.com/postcss/postcss)插件，用来将css代码转换为`gentcss`规范。

## gentcss命名规范

> 命名分为四部分：组件、节点、角色、状态, 每部分都采用驼峰命名方式，只能包含字符数字。

```css
.libName-componentName-elementName {
  /**/
}

.libName-componentName-elementName.libName-is-roleName {
  /**/
}

.libName-componentName-elementName.libName-has-stateName {
  /**/
}
```

## 书写

> 编写时，类名用两个中划线(`--`)分割，左边标识这个类名是`gentcss`的哪一种，右边标识对应的名字。

- .comp--componentName: 组件
- .elem--elementName: 节点，必须包含在组件内，为组件的直接子元素
- .is--roleName: 角色
- .has--stateName: 状态
- .sel--componentName-elementName: 直接生产节点选择器，不用包含在组件内

## 实例

输入：
```scss
.comp--componentName {
  background: #fff;

  .elem--elementName {
    line-height: 24px;

    &.is--roleNameA {
      background: red;
    }

    &.is--roleNameB {
      background: blue;
    }

    &.has--stateName {
      cursor: not-allowed;
    }
  }
}

.sel--componentName-elementName {
  line-height: 24px;

  &.has--stateName {
    cursor: not-allowed;
  }
}
```

输出：
```scss
.gent-componentName {
  background: #fff
}

.gent-componentName-elementName {
  line-height: 24px;

  &.gent-is-roleNameA {
    background: red;
  }

  &.gent-is-roleNameB {
    background: blue;
  }

  &.gent-has-stateName {
    cursor: not-allowed;
  }
}

.gent-componentName-elementName {
  line-height: 24px;

  &.gent-has-stateName {
    cursor: not-allowed;
  }
}
```

## 配置

```js
var gentcss = require('postcss-gentcss');

postcss([
  gentcss({
    // 类库名称
    libName: 'gent',

    // 组件前缀
    componentInputPrefix: 'comp--',

    // 节点前缀
    elementInputPrefix: 'elem--',

    // 角色前缀
    roleInputPrefix: 'is--',

    // 状态前缀
    stateInputPrefix: 'has--',

    // 选择器前缀
    selectorInputPrefix: 'sel--'
  })
])
```

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