# esbuild-react-css-scoped

**Repository Path**: mooselee/esbuild-react-css-scoped

## Basic Information

- **Project Name**: esbuild-react-css-scoped
- **Description**: 一个在esbuild构建下针对React的css隔离插件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-11-28
- **Last Updated**: 2024-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 介绍
一个在esbuild构建下针对React的css隔离插件

## 如何工作
在当前组件引入以.scoped.(le|c|ss)结尾的文件以生效，编译后会生成data-v-{hash}的属性，标记在每个html节点，同时在css选择器中加入对应散列。
```html
<div class="title" data-v-12345678>title</div>
<p data-v-12345678>paragraph</p>
```
```css
.title[data-v-12345678] {
	color: #00ffff;
}
p[data-v-12345678] {
	color: #dddddd;
}
```
### 选择子组件中的元素
```less
.parent /deep/ .child {
	...;
}
```
将会编译成
```css
.parent[data-v-12345678] .child {
	...;
}
```


## 如何使用
```cmd
npm i esbuild-scoped-css
```

```javascript
// esbuild.js
import esbuild from 'esbuild';
import { cssLoader, scopedIdPlugin } from 'esbuild-scoped-css';

require('esbuild').buildSync({
  entryPoints: ['app.js'],
  bundle: true,
  outdir: 'out',
  plugins: [
	cssLoader,
 	scopedIdPlugin
  ]
})
```

```jsx
import './index.scoped.less';

export default function Main() {
	return <div className="title">Hello world</div>;
}
```
```css
.title {
	color: #00ffff;
}
```

## Gitee
https://gitee.com/mooselee/esbuild-scoped-css.git