Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fabiospampinato/css-simple-parser
A (S)CSS parser that's tiny, blazing fast and (too) simple.
https://github.com/fabiospampinato/css-simple-parser
ast css fast parser sass scss simple small tiny
Last synced: 2 days ago
JSON representation
A (S)CSS parser that's tiny, blazing fast and (too) simple.
- Host: GitHub
- URL: https://github.com/fabiospampinato/css-simple-parser
- Owner: fabiospampinato
- License: mit
- Created: 2020-01-29T23:08:18.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-09-24T16:28:48.000Z (about 1 year ago)
- Last Synced: 2024-10-25T21:56:13.515Z (9 days ago)
- Topics: ast, css, fast, parser, sass, scss, simple, small, tiny
- Language: JavaScript
- Size: 22.5 KB
- Stars: 10
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
- awesome-blazingly-fast - css-simple-parser - A (S)CSS parser that's tiny, blazing fast and (too) simple. (JavaScript)
README
# CSS Simple Parser
A (S)CSS parser that's tiny, blazing fast and (too) simple.
## Features
- **Tiny**: at ~1.5kb (min + gzip) this is about as small a CSS parser as you can get.
- **Blazing fast**: on a mid-2014 MBP it takes ~0.03ms, on average when benchmarking, to generate an AST for [this](https://github.com/fabiospampinato/css-simple-parser/blob/master/test/fixtures.js) ~500 lines CSS string, about 100x faster than PostCSS.
- **Nesting**: nested (S)CSS rules are supported.
## Caveats
The _big_ caveat is that this is not a full-blown CSS parser, it can only parse (S)CSS strings with the following limitations:
- Only rule blocks are supported at the top-level, e.g. no `@charset`, `@import` etc.
- No `{`, `}` or `;` can be used inside strings, e.g. `div[attr=";{}"]`, `content: "{}"` etc.
- Lastly, the generated AST is quite crude and might require further processing.
## Install
```sh
npm install --save css-simple-parser
```
## Usage
### AST
The AST (Abstract Syntax Tree) provided by this library has the following shape:
```ts
type AST = ROOT_NODE;
type ROOT_NODE = {
parent: null,
children: NODE[]
};
type NODE = {
parent: ROOT_NODE | NODE,
index: number,
indexEnd: number,
selector: string,
selectorIndex: number,
selectorIndexEnd: number,
body: string,
bodyIndex: number,
bodyIndexEnd: number,
children: NODE[]
};
```
### `Parser.parse`
This method computes an AST from the given CSS string.
```ts
import Parser from 'css-simple-parser';
const ast = Parser.parse ( '.foo {}' );
```
### `Parser.stringify`
This method computes a CSS string given an AST.
```ts
import Parser from 'css-simple-parser';
const ast = Parser.parse ( '.foo {}' );
const css = Parser.stringify ( ast );
```
### `Parser.traverse`
This method calls a function with each node found in the AST, the AST is being traversed depth-first.
```ts
import Parser from 'css-simple-parser';
const ast = Parser.parse ( '.foo {}' );
Parser.traverse ( ast, node => {
console.log ( node.selector );
});
```
## Related
- **[css-flatten](https://github.com/fabiospampinato/css-flatten)**: Flattens a nested CSS string, `&` placeholders are supported too.
- **[css-simple-minifier](https://github.com/fabiospampinato/css-simple-minifier)**: A CSS minifier that's tiny and very fast.
## License
MIT © Fabio Spampinato