Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/slhsxcmy/postcss-split-selectors
https://github.com/slhsxcmy/postcss-split-selectors
css npm postcss postcss-plugin
Last synced: 1 day ago
JSON representation
- Host: GitHub
- URL: https://github.com/slhsxcmy/postcss-split-selectors
- Owner: slhsxcmy
- License: mit
- Created: 2023-01-26T01:51:28.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-03-17T18:30:54.000Z (over 1 year ago)
- Last Synced: 2024-11-10T08:22:32.253Z (6 days ago)
- Topics: css, npm, postcss, postcss-plugin
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/postcss-split-selectors
- Size: 66.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-split-selectors
[PostCSS] plugin that splits selectors by comma, then merges the same selectors under the same parent **ignoring adjacency**.
[postcss]: https://github.com/postcss/postcss
## Example Input
```css
.a {
p0: v0;
}
.a,
.b {
.d {
p1: v1;
}
p2: v2;
.c,
.d {
p3: v3;
}
.c {
p4: v4;
}
}
.b {
p5: v5;
}
```
## Example Output
```css
.a {
p0: v0;
.d {
p1: v1;
p3: v3;
}
p2: v2;
.c {
p3: v3;
p4: v4;
}
}
.b {
.d {
p1: v1;
p3: v3;
}
p2: v2;
.c {
p3: v3;
p4: v4;
}
p5: v5;
}
```
## Usage
**Step 1:** Install plugin:
```sh
npm install --save-dev postcss postcss-split-selectors
```
**Step 2:** Check you project for existed PostCSS config: `postcss.config.js`
in the project root, `"postcss"` section in `package.json`
or `postcss` in bundle config.
If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.
**Step 3:** Add the plugin to plugins list:
```diff
module.exports = {
plugins: [
+ require('postcss-split-selectors'),
require('autoprefixer')
]
}
```
[official docs]: https://github.com/postcss/postcss#usage