https://github.com/fabiospampinato/css-flatten
Flattens a nested (S)CSS string, "&" placeholders are supported too.
https://github.com/fabiospampinato/css-flatten
css fast flatten nested sass scss small tiny
Last synced: 2 months ago
JSON representation
Flattens a nested (S)CSS string, "&" placeholders are supported too.
- Host: GitHub
- URL: https://github.com/fabiospampinato/css-flatten
- Owner: fabiospampinato
- License: mit
- Created: 2020-01-29T23:13:01.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-01-25T20:28:58.000Z (8 months ago)
- Last Synced: 2025-06-20T14:43:26.215Z (4 months ago)
- Topics: css, fast, flatten, nested, sass, scss, small, tiny
- Language: JavaScript
- Homepage:
- Size: 15.6 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# CSS Flatten
Flattens a nested (S)CSS string, `&` placeholders are supported too.
This is implemented using [css-simple-parser](https://github.com/fabiospampinato/css-simple-parser), which makes it tiny and blazing fast, but there are some limitations to be aware of, read the parser's readme to learn about them.
## Install
```sh
npm install css-flatten
```
## Usage
```ts
import flatten from 'css-flatten';
// Let's make some CSS to flatten
const css = `
.foo {
color: red;
&:hover {
color: green;
}
.bar {
color: blue;
}
}
`;
// Let's flatten that CSS
flatten ( css );
// .foo {
// color: red;
// }
// .foo:hover {
// color: green;
// }
// .foo .bar {
// color: blue;
// }
```
## License
MIT © Fabio Spampinato