# vite-plugin-atom-css-generator

> A Vite plugin to auto generate atomic CSS from class names in Vue Single File Components.

Latest version **1.0.8** (published 2023-09-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-atom-css-generator
pnpm add vite-plugin-atom-css-generator
yarn add vite-plugin-atom-css-generator
bun add vite-plugin-atom-css-generator
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2023-09-13 |
| First published | 2023-08-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Your Name |
| Maintainers | libuyan |
| Keywords | vite, plugin, atom-css, atomic-css, auto-generate |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-atom-css-generator
- Repository: https://github.com/lyclown/atom-css-generator
- Homepage: https://github.com/lyclown/atom-css-generator#readme
- Issues: https://github.com/lyclown/atom-css-generator/issues
- npm.io page: https://npm.io/package/vite-plugin-atom-css-generator

## Dependencies (1)

- [@vue/compiler-sfc](https://npm.io/package/@vue/compiler-sfc.md) ^3.3.4

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2023-09-13
- 1.0.7 — 2023-09-13
- 1.0.6 — 2023-09-13
- 1.0.5 — 2023-09-13
- 1.0.4 — 2023-09-13
- 1.0.3 — 2023-08-24
- 1.0.2 — 2023-08-24
- 1.0.1 — 2023-08-24

## README

# Vite Atom CSS Generator 插件

一个简单的Vite插件，用于从Vue 3模板中的类名自动生成原子级CSS样式，并自动注入到项目中。

## 安装

使用npm或yarn或pnpm进行安装:

```bash
npm i vite-plugin-atom-css-generator
yarn add vite-plugin-atom-css-generator
pnpm add vite-plugin-atom-css-generator
```

## 使用方法

1. 在你的vite.config.js中引入并使用此插件：

```
import atomCssGenerator from 'vite-plugin-atom-css-generator';

export default {
  plugins: [
    atomCssGenerator({ outputPath: 'desired_output_path' }),
    // ...其他插件
  ]
}
```


#### ⚠️ 必须放在@vitejs/plugin-vue插件的前面

```
plugins:[atomCssGenerator(),vue()]
```

3. 在Vue组件的模板中使用特定格式的类名，例如：fc-fff。在构建时，插件将自动生成如下的CSS：

```
.fc-fff { color: #fff; }
```

3. 构建项目后，style.css将自动被生成在指定的outputPath目录中，并自动注入到项目的HTML文件中。

## 配置

以下是插件可接受的配置选项：

* outputPath (可选): 指定生成的style.css文件的路径。默认值为public。
  例子：

```
atomCssGenerator({ outputPath: 'assets/styles' })
```

使用上述配置，style.css将被生成在assets/styles目录中，并在HTML中自动注入为/assets/styles/style.css。

## 原子类名规则

目前，此插件只支持以下格式的原子类名：

### 类名规则

#### 颜色类

| 类名            | 样式描述   | 示例                                           |
| --------------- | ---------- | ---------------------------------------------- |
| `fc-{color}`  | 文字颜色   | `.fc-333 { color: #333; }`                   |
| `bgc-{color}` | 背景颜色   | `.bgc-f2f2f2 { background-color: #f2f2f2; }` |
| `bc-{color}`  | 边框颜色   | `.bc-ccc { border-color: #ccc; }`            |
| `btc-{color}` | 上边框颜色 | `.btc-000 { border-top-color: #000; }`       |
| `brc-{color}` | 右边框颜色 | `.brc-333 { border-right-color: #333; }`     |
| `bbc-{color}` | 下边框颜色 | `.bbc-f00 { border-bottom-color: #f00; }`    |
| `blc-{color}` | 左边框颜色 | `.blc-0f0 { border-left-color: #0f0; }`      |

#### 边距类

| 类名          | 样式描述 | 示例                                 |
| ------------- | -------- | ------------------------------------ |
| `m-{size}`  | 外边距   | `.m-20 { margin: 20px; }`          |
| `mt-{size}` | 上外边距 | `.mt-10 { margin-top: 10px; }`     |
| `mr-{size}` | 右外边距 | `.mr-15 { margin-right: 15px; }`   |
| `mb-{size}` | 下外边距 | `.mb-30 { margin-bottom: 30px; }`  |
| `ml-{size}` | 左外边距 | `.ml-5 { margin-left: 5px; }`      |
| `p-{size}`  | 内边距   | `.p-20 { padding: 20px; }`         |
| `pt-{size}` | 上内边距 | `.pt-10 { padding-top: 10px; }`    |
| `pr-{size}` | 右内边距 | `.pr-15 { padding-right: 15px; }`  |
| `pb-{size}` | 下内边距 | `.pb-30 { padding-bottom: 30px; }` |
| `pl-{size}` | 左内边距 | `.pl-5 { padding-left: 5px; }`     |

#### 宽高大小类

| 类名                | 样式描述 | 示例                                              |
| ------------------- | -------- | ------------------------------------------------- |
| `w-{size}`        | 宽度     | `.w-100 { width: 100px; }`                      |
| w-{size}p           | 宽度%    | `.w-50p { width: 50%; }`                        |
| `h-{size}`        | 高度     | `.h-200 { height: 200px; }`                     |
| h-{size}p           | 高度%    | `.h-50p {height`: 50%; }                        |
| `fs-{size}`       | 字体大小 | `.fs-14 { font-size: 14px; }`                   |
| `fw-{weight}`     | 字体粗细 | `.fw-bold { font-weight: bold; }`               |
| `fs-{style}`      | 字体样式 | `.fs-italic { font-style: italic; }`            |
| `td-{decoration}` | 文本装饰 | `.td-underline { text-decoration: underline; }` |

#### flex布局类

| 类名           | 样式描述     | 示例                                        |
| -------------- | ------------ | ------------------------------------------- |
| `d-flex`     | Flexbox布局  | `.d-flex { display: flex; }`              |
| `fd-column`  | 纵向布局     | `.fd-column { flex-direction: column; }`  |
| `jc-center`  | 水平居中     | `.jc-center { justify-content: center; }` |
| `ai-stretch` | 垂直拉伸对齐 | `.ai-stretch { align-items: stretch; }`   |

#### 边框类

| 类名                           | 样式描述 | 示例                                                     |
| ------------------------------ | -------- | -------------------------------------------------------- |
| `bw-{width}`                 | 边框宽度 | `.bw-2 { border-width: 2px; }`                         |
| `bs-{style}`                 | 边框样式 | `.bs-dashed { border-style: dashed; }`                 |
| `bc-{color}`                 | 边框颜色 | `.bc-333 { border-color: #333; }`                      |
| `bt-{width}-{color}-{style}` | 上边框   | `.bt-1-f00-solid { border-top: 1px #f00 solid; }`      |
| `br-{width}-{color}-{style}` | 右边框   | `.br-2-0f0-dotted { border-right: 2px #0f0 dotted; }`  |
| `bb-{width}-{color}-{style}` | 下边框   | `.bb-3-00f-double { border-bottom: 3px #00f double; }` |
| `bl-{width}-{color}-{style}` | 左边框   | `.bl-1-fff-dashed { border-left: 1px #fff dashed; }`   |

#### 布局类

| 类名           | 样式描述 | 示例                                    |
| -------------- | -------- | --------------------------------------- |
| `p-relative` | 相对定位 | `.p-relative { position: relative; }` |
| `p-absolute` | 绝对定位 | `.p-absolute { position: absolute; }` |
| `p-fixed`    | 固定定位 | `.p-fixed { position: fixed; }`       |

#### 鼠标样式类

| 类名          | 样式描述 | 示例                                |
| ------------- | -------- | ----------------------------------- |
| `c-pointer` | 鼠标手形 | `.c-pointer { cursor: pointer; }` |
| `c-wait`    | 鼠标等待 | `.c-wait { cursor: wait; }`       |

#### 其他类

| 类名          | 样式描述     | 示例                                   |
| ------------- | ------------ | -------------------------------------- |
| `o-hidden`  | 内容溢出隐藏 | `.o-hidden { overflow: hidden; }`    |
| `ox-scroll` | 水平滚动     | `.ox-scroll { overflow-x: scroll; }` |
| `oy-auto`   | 垂直自动     | `.oy-auto { overflow-y: auto; }`     |

### 预定义的实用样式

| 类名          | 样式描述                          |
| ------------- | --------------------------------- |
| te-ellipsis   | 单行文本溢出显示省略号            |
| te-ellipsis-2 | 多行文本溢出显示省略号 (最多两行) |
| grid-3cols    | 使用 Grid 实现三列布局            |
| card-shadow   | 实现一个卡片的阴影边框            |

## 常见问题

### 我可以扩展原子类名规则吗？

目前，此插件固定了原子类名规则。要添加更多规则，你需要直接编辑插件的源代码。

### 为什么我的style.css没有被注入？

确保outputPath的配置正确，并且HTML中存在 `</head>`标签，因为插件是将 `<link>`标签插入到此位置的。

---
_Source: https://npm.io/package/vite-plugin-atom-css-generator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._