Skip to content

Commit a74bdd5

Browse files
committed
flatten @import and web export #3
1 parent 6ca0440 commit a74bdd5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+46677
-718
lines changed

README.md

Lines changed: 80 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,50 @@ CSS parser for node and the browser
66

77
```shell
88
$ npm install @tbela99/css-parser
9+
910
```
1011

1112
## Transform
1213

1314
Parse and render css in a single pass.
1415

16+
### Usage
17+
1518
```javascript
16-
import {transform} from '@tbela99/css-parser';
1719

18-
const {ast, code, errors, stats} = transform(css);
20+
transform(css, transformOptions = {})
1921
```
2022

21-
### Usage
23+
### Example
2224

2325
```javascript
2426

25-
transform(css, transformOptions = {})
27+
import {transform} from '@tbela99/css-parser';
28+
29+
const {ast, code, errors, stats} = await transform(css, {compress: true, resolveImport: true, cwd: 'files/css'});
2630
```
31+
2732
### TransformOptions
2833

29-
Include both ParseOptions and RenderOptions
34+
Include ParseOptions and RenderOptions
35+
36+
#### ParseOptions
3037

3138
- src: string, optional. css file location to be used with sourcemap.
32-
- location: boolean, optional. includes node location in the ast, required for sourcemap generation.
33-
- processImport: boolean, process @import node - not yet implemented
34-
- compress: boolean, default to _true_. optimize ast and minify css.
39+
- compress: boolean, optional. default to _true_. optimize ast and minify css.
3540
- removeEmpty: boolean, remove empty nodes from the ast.
41+
- location: boolean, optional. includes node location in the ast, required for sourcemap generation.
42+
- cwd: string, optional. the current working directory. when specified url() are resolved using this value
43+
- resolveImport: boolean, optional. replace @import node by the content of the referenced stylesheet.
44+
- resolveUrls: boolean, optional. resolve css url() according to the parameters 'src' and 'cwd'
45+
46+
#### RenderOptions
47+
- compress: boolean, optional. default to _true_. optimize ast and minify css.
3648
- indent: string, optional. css indention string. uses space character by default.
3749
- newLine: string, new line character.
3850
- removeComments: boolean, remove comments in generated css.
3951
- preserveLicense: boolean, force preserving comments starting with '/\*!' when compress is enabling.
52+
- colorConvert: boolean, convert colors to hex.
4053

4154

4255
## Parsing
@@ -53,38 +66,33 @@ const {ast, errors} = parse(css);
5366

5467
parse(css, parseOptions = {})
5568
```
56-
### ParseOptions
5769

58-
- src: string, optional. css file location
59-
- location: boolean, optional. includes node location in the ast
60-
- processImport: boolean, process @import node - not yet implemented
61-
- deduplicate: boolean, remove duplicate node and merge rules
62-
- removeEmpty: boolean, remove empty nodes
70+
### Example
6371

72+
````javascript
73+
74+
const {ast, errors} = await parse(css);
75+
````
6476

6577
## Rendering
6678

6779
### Usage
6880

81+
```javascript
82+
render(ast, RenderOptions = {});
83+
```
84+
85+
### Example
86+
6987
```javascript
7088
import {render} from '@tbela99/css-parser';
7189

72-
// pretty print
73-
const prettyPrint = render(ast);
7490
// minified
7591
const {code} = render(ast, {compress: true});
7692

7793
console.log(code);
7894
```
7995

80-
### RenderOptions
81-
82-
- compress: boolean, optional. minify output. Also remove comments
83-
- indent: string, optional. indention string. uses space character by default.
84-
- newLine: string, new line character
85-
- removeComments: boolean, remove comments
86-
- preserveLicense: boolean, force preserving comments starting with '/\*!'
87-
8896
## Node Walker
8997

9098
```javascript
@@ -96,6 +104,54 @@ for (const {node, parent, root} of walk(ast)) {
96104
}
97105
```
98106

107+
## Exports
108+
109+
There are several ways to import the library into your application.
110+
111+
### Node exports
112+
113+
import as a module
114+
115+
```javascript
116+
117+
import {transform} from '@tbela99/css-parser';
118+
119+
// ...
120+
```
121+
import as a CommonJS module
122+
123+
```javascript
124+
125+
import {transform} from '@tbela99/css-parser/cjs';
126+
127+
// ...
128+
```
129+
130+
### Web export
131+
132+
Programmatic import
133+
134+
```javascript
135+
136+
import {transform} from '@tbela99/css-parser/web';
137+
138+
// ...
139+
```
140+
141+
Javascript module
142+
143+
```javascript
144+
145+
<script src="dist/web/index.js" type="module"></script>
146+
```
147+
148+
Single JavaScript file
149+
150+
```javascript
151+
152+
<script src="dist/index-umd-web.js"></script>
153+
```
154+
99155
## AST
100156

101157
### Comment

0 commit comments

Comments
 (0)