|
1 | | -# css-parse [](https://travis-ci.org/reworkcss/css-parse) |
| 1 | +# css-parse |
2 | 2 |
|
3 | | - JavaScript CSS parser for nodejs and the browser. |
| 3 | + JavaScript CSS parser for Node.js (exports the `parse` method of [css](https://github.com/reworkcss/css)) |
4 | 4 |
|
5 | 5 | ## Installation |
6 | 6 |
|
7 | 7 | $ npm install css-parse |
8 | 8 |
|
9 | 9 | ## Usage |
10 | 10 |
|
11 | | -````javascript |
12 | | -var parse = require('css-parse'); |
13 | | - |
14 | | -// CSS input string |
15 | | -var css = "body { \n background-color: #fff;\n }"; |
16 | | - |
17 | | -var output_obj = parse(css); |
18 | | - |
19 | | -// Source parameter to specify source file name for source maps |
20 | | -var output_obj_pos = parse(css, { source: 'file.css' }); |
21 | | - |
22 | | -// Print parsed object as CSS string |
23 | | -console.log(JSON.stringify(output_obj, null, 2)); |
24 | | - |
25 | | -```` |
26 | | - |
27 | | -## API |
28 | | - |
29 | | -### var ast = parse(css, [options]) |
30 | | - |
31 | | -`options`: |
32 | | - |
33 | | -- `silent` - silently fail on parse errrors. |
34 | | -- `source` - recommended for debugging. |
35 | | -- `position` - `true` by default. |
36 | | - |
37 | | -### Errors |
38 | | - |
39 | | -Errors will have `err.position` where `position` is: |
40 | | - |
41 | | -- `start` - start line and column numbers |
42 | | -- `end` - end line and column numbers |
43 | | -- `source` - `options.source` if passed to options |
44 | | - |
45 | | -If you create any errors in plugins such as in [rework](https://github.com/reworkcss/rework), you __must__ set the `position` as well for consistency. |
46 | | - |
47 | | -## Example |
48 | | - |
49 | | -css: |
50 | | - |
51 | | -```css |
52 | | -body { |
53 | | - background: #eee; |
54 | | - color: #888; |
55 | | -} |
56 | | -``` |
57 | | - |
58 | | -parse tree: |
59 | | - |
60 | | -```json |
61 | | -{ |
62 | | - "type": "stylesheet", |
63 | | - "stylesheet": { |
64 | | - "rules": [ |
65 | | - { |
66 | | - "type": "rule", |
67 | | - "selectors": [ |
68 | | - "body" |
69 | | - ], |
70 | | - "declarations": [ |
71 | | - { |
72 | | - "type": "declaration", |
73 | | - "property": "background", |
74 | | - "value": "#eee" |
75 | | - }, |
76 | | - { |
77 | | - "type": "declaration", |
78 | | - "property": "color", |
79 | | - "value": "#888" |
80 | | - } |
81 | | - ] |
82 | | - } |
83 | | - ] |
84 | | - } |
85 | | -} |
86 | | -``` |
87 | | - |
88 | | -parse tree with `.position` enabled: |
89 | | - |
90 | | -```json |
91 | | -{ |
92 | | - "type": "stylesheet", |
93 | | - "stylesheet": { |
94 | | - "rules": [ |
95 | | - { |
96 | | - "type": "rule", |
97 | | - "selectors": [ |
98 | | - "body" |
99 | | - ], |
100 | | - "declarations": [ |
101 | | - { |
102 | | - "type": "declaration", |
103 | | - "property": "background", |
104 | | - "value": "#eee", |
105 | | - "position": { |
106 | | - "start": { |
107 | | - "line": 3, |
108 | | - "column": 3 |
109 | | - }, |
110 | | - "end": { |
111 | | - "line": 3, |
112 | | - "column": 19 |
113 | | - } |
114 | | - } |
115 | | - }, |
116 | | - { |
117 | | - "type": "declaration", |
118 | | - "property": "color", |
119 | | - "value": "#888", |
120 | | - "position": { |
121 | | - "start": { |
122 | | - "line": 4, |
123 | | - "column": 3 |
124 | | - }, |
125 | | - "end": { |
126 | | - "line": 4, |
127 | | - "column": 14 |
128 | | - } |
129 | | - } |
130 | | - } |
131 | | - ], |
132 | | - "position": { |
133 | | - "start": { |
134 | | - "line": 2, |
135 | | - "column": 1 |
136 | | - }, |
137 | | - "end": { |
138 | | - "line": 5, |
139 | | - "column": 2 |
140 | | - } |
141 | | - } |
142 | | - } |
143 | | - ] |
144 | | - } |
145 | | -} |
146 | | -``` |
147 | | - |
148 | | -`node.position.content` is set on each node to the full source string. If you |
149 | | -also pass in `source: 'path/to/original.css'`, that will be set on |
150 | | -`node.position.source`. |
151 | | - |
152 | | -## Performance |
153 | | - |
154 | | - Parsed 15,000 lines of CSS (2mb) in 40ms on my macbook air. |
155 | | - |
156 | | -## Related |
157 | | - |
158 | | - [css-stringify](https://github.com/visionmedia/css-stringify "CSS-Stringify") |
159 | | - [css-value](https://github.com/visionmedia/css-value "CSS-Value") |
| 11 | + Please see the [css](https://github.com/reworkcss/css) module documentation. |
160 | 12 |
|
161 | 13 | ## License |
162 | 14 |
|
|
0 commit comments