https://github.com/fi3ework/postcss-rename-selector
🌖 Effortlessly Rename CSS Selectors.
https://github.com/fi3ework/postcss-rename-selector
ant-design antd css less postcss postcss-plugin
Last synced: 2 months ago
JSON representation
🌖 Effortlessly Rename CSS Selectors.
- Host: GitHub
- URL: https://github.com/fi3ework/postcss-rename-selector
- Owner: fi3ework
- License: mit
- Created: 2020-04-04T08:55:11.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-06-08T15:43:56.000Z (about 5 years ago)
- Last Synced: 2025-04-08T22:35:14.073Z (3 months ago)
- Topics: ant-design, antd, css, less, postcss, postcss-plugin
- Language: TypeScript
- Homepage:
- Size: 162 KB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-rename-selector
A PostCSS plugin for modify CSS selector flexible.
## Usage
Plugin support two ways to modify selectors. In raw mode, you can return a new string from original selector string. In AST mode, you can modify the AST to get a generated selector string.
### raw mode
In this mode, type should be fixed to `string`. Argument `raw` is the raw selector string, and the selector will use the returned new string.
```tsx
import postcss from 'postcss'
import { replacer } from 'postcss-rename-selector'
module.exports = {
plugins: [
replacer({
type: 'string',
replacer: (raw) => {
return raw.replace('.b', '.ant-b')
},
}),
],
}
// in 👇
// .a, .b, .c { color: red };
// out 👇
// .a, .ant-b, .c { color: red };
```
### AST mode
Based on [postcss-selector-parser](https://github.com/postcss/postcss-selector-parser/blob/master/API.md), `type` could be `each`, `walk`, `walkAttributes`, `walkClasses`, `walkCombinators`, `walkComments`, `walkIds`, `walkNesting`, `walkPseudos`, `walkTags`. Modify node on the AST, and new string will be generated after modification.
```tsx
import postcss from 'postcss'
import { replacer } from 'postcss-rename-selector'
module.exports = {
plugins: [
replacer({
type: 'string',
replacer: (node) => {
const value = node.value
if (!value) return
node.value = value.startsWith('ant-') ? value.slice(4) : value
},
}),
],
}
// in 👇
// .ant-a,
// .ant-b,
// .c,
// .ant-d {
// color: red
// };
// out 👇
// .a,
// .b,
// .c,
// .d {
// color: red
// };
```
## License
MIT