|
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