1 | # css [![Build Status](https://travis-ci.org/reworkcss/css.svg?branch=master)](https://travis-ci.org/reworkcss/css)
|
---|
2 |
|
---|
3 | CSS parser / stringifier.
|
---|
4 |
|
---|
5 | ## Installation
|
---|
6 |
|
---|
7 | $ npm install css
|
---|
8 |
|
---|
9 | ## Usage
|
---|
10 |
|
---|
11 | ```js
|
---|
12 | var css = require('css');
|
---|
13 | var obj = css.parse('body { font-size: 12px; }', options);
|
---|
14 | css.stringify(obj, options);
|
---|
15 | ```
|
---|
16 |
|
---|
17 | ## API
|
---|
18 |
|
---|
19 | ### css.parse(code, [options])
|
---|
20 |
|
---|
21 | Accepts a CSS string and returns an AST `object`.
|
---|
22 |
|
---|
23 | `options`:
|
---|
24 |
|
---|
25 | - silent: silently fail on parse errors.
|
---|
26 | - source: the path to the file containing `css`. Makes errors and source
|
---|
27 | maps more helpful, by letting them know where code comes from.
|
---|
28 |
|
---|
29 | ### css.stringify(object, [options])
|
---|
30 |
|
---|
31 | Accepts an AST `object` (as `css.parse` produces) and returns a CSS string.
|
---|
32 |
|
---|
33 | `options`:
|
---|
34 |
|
---|
35 | - indent: the string used to indent the output. Defaults to two spaces.
|
---|
36 | - compress: omit comments and extraneous whitespace.
|
---|
37 | - sourcemap: return a sourcemap along with the CSS output. Using the `source`
|
---|
38 | option of `css.parse` is strongly recommended when creating a source map.
|
---|
39 | Specify `sourcemap: 'generator'` to return the SourceMapGenerator object
|
---|
40 | instead of serializing the source map.
|
---|
41 | - inputSourcemaps: (enabled by default, specify `false` to disable) reads any
|
---|
42 | source maps referenced by the input files when generating the output source
|
---|
43 | map. When enabled, file system access may be required for reading the
|
---|
44 | referenced source maps.
|
---|
45 |
|
---|
46 | ### Example
|
---|
47 |
|
---|
48 | ```js
|
---|
49 | var ast = css.parse('body { font-size: 12px; }', { source: 'source.css' });
|
---|
50 |
|
---|
51 | var css = css.stringify(ast);
|
---|
52 |
|
---|
53 | var result = css.stringify(ast, { sourcemap: true });
|
---|
54 | result.code // string with CSS
|
---|
55 | result.map // source map object
|
---|
56 | ```
|
---|
57 |
|
---|
58 | ### Errors
|
---|
59 |
|
---|
60 | Errors thrown during parsing have the following properties:
|
---|
61 |
|
---|
62 | - message: `String`. The full error message with the source position.
|
---|
63 | - reason: `String`. The error message without position.
|
---|
64 | - filename: `String` or `undefined`. The value of `options.source` if
|
---|
65 | passed to `css.parse`. Otherwise `undefined`.
|
---|
66 | - line: `Integer`.
|
---|
67 | - column: `Integer`.
|
---|
68 | - source: `String`. The portion of code that couldn't be parsed.
|
---|
69 |
|
---|
70 | When parsing with the `silent` option, errors are listed in the
|
---|
71 | `parsingErrors` property of the [`stylesheet`](#stylesheet) node instead
|
---|
72 | of being thrown.
|
---|
73 |
|
---|
74 | If you create any errors in plugins such as in
|
---|
75 | [rework](https://github.com/reworkcss/rework), you __must__ set the same
|
---|
76 | properties for consistency.
|
---|
77 |
|
---|
78 | ## AST
|
---|
79 |
|
---|
80 | Interactively explore the AST with <http://iamdustan.com/reworkcss_ast_explorer/>.
|
---|
81 |
|
---|
82 | ### Common properties
|
---|
83 |
|
---|
84 | All nodes have the following properties.
|
---|
85 |
|
---|
86 | #### position
|
---|
87 |
|
---|
88 | Information about the position in the source string that corresponds to
|
---|
89 | the node.
|
---|
90 |
|
---|
91 | `Object`:
|
---|
92 |
|
---|
93 | - start: `Object`:
|
---|
94 | - line: `Number`.
|
---|
95 | - column: `Number`.
|
---|
96 | - end: `Object`:
|
---|
97 | - line: `Number`.
|
---|
98 | - column: `Number`.
|
---|
99 | - source: `String` or `undefined`. The value of `options.source` if passed to
|
---|
100 | `css.parse`. Otherwise `undefined`.
|
---|
101 | - content: `String`. The full source string passed to `css.parse`.
|
---|
102 |
|
---|
103 | The line and column numbers are 1-based: The first line is 1 and the first
|
---|
104 | column of a line is 1 (not 0).
|
---|
105 |
|
---|
106 | The `position` property lets you know from which source file the node comes
|
---|
107 | from (if available), what that file contains, and what part of that file was
|
---|
108 | parsed into the node.
|
---|
109 |
|
---|
110 | #### type
|
---|
111 |
|
---|
112 | `String`. The possible values are the ones listed in the Types section below.
|
---|
113 |
|
---|
114 | #### parent
|
---|
115 |
|
---|
116 | A reference to the parent node, or `null` if the node has no parent.
|
---|
117 |
|
---|
118 | ### Types
|
---|
119 |
|
---|
120 | The available values of `node.type` are listed below, as well as the available
|
---|
121 | properties of each node (other than the common properties listed above.)
|
---|
122 |
|
---|
123 | #### stylesheet
|
---|
124 |
|
---|
125 | The root node returned by `css.parse`.
|
---|
126 |
|
---|
127 | - stylesheet: `Object`:
|
---|
128 | - rules: `Array` of nodes with the types `rule`, `comment` and any of the
|
---|
129 | at-rule types.
|
---|
130 | - parsingErrors: `Array` of `Error`s. Errors collected during parsing when
|
---|
131 | option `silent` is true.
|
---|
132 |
|
---|
133 | #### rule
|
---|
134 |
|
---|
135 | - selectors: `Array` of `String`s. The list of selectors of the rule, split
|
---|
136 | on commas. Each selector is trimmed from whitespace and comments.
|
---|
137 | - declarations: `Array` of nodes with the types `declaration` and `comment`.
|
---|
138 |
|
---|
139 | #### declaration
|
---|
140 |
|
---|
141 | - property: `String`. The property name, trimmed from whitespace and
|
---|
142 | comments. May not be empty.
|
---|
143 | - value: `String`. The value of the property, trimmed from whitespace and
|
---|
144 | comments. Empty values are allowed.
|
---|
145 |
|
---|
146 | #### comment
|
---|
147 |
|
---|
148 | A rule-level or declaration-level comment. Comments inside selectors,
|
---|
149 | properties and values etc. are lost.
|
---|
150 |
|
---|
151 | - comment: `String`. The part between the starting `/*` and the ending `*/`
|
---|
152 | of the comment, including whitespace.
|
---|
153 |
|
---|
154 | #### charset
|
---|
155 |
|
---|
156 | The `@charset` at-rule.
|
---|
157 |
|
---|
158 | - charset: `String`. The part following `@charset `.
|
---|
159 |
|
---|
160 | #### custom-media
|
---|
161 |
|
---|
162 | The `@custom-media` at-rule.
|
---|
163 |
|
---|
164 | - name: `String`. The `--`-prefixed name.
|
---|
165 | - media: `String`. The part following the name.
|
---|
166 |
|
---|
167 | #### document
|
---|
168 |
|
---|
169 | The `@document` at-rule.
|
---|
170 |
|
---|
171 | - document: `String`. The part following `@document `.
|
---|
172 | - vendor: `String` or `undefined`. The vendor prefix in `@document`, or
|
---|
173 | `undefined` if there is none.
|
---|
174 | - rules: `Array` of nodes with the types `rule`, `comment` and any of the
|
---|
175 | at-rule types.
|
---|
176 |
|
---|
177 | #### font-face
|
---|
178 |
|
---|
179 | The `@font-face` at-rule.
|
---|
180 |
|
---|
181 | - declarations: `Array` of nodes with the types `declaration` and `comment`.
|
---|
182 |
|
---|
183 | #### host
|
---|
184 |
|
---|
185 | The `@host` at-rule.
|
---|
186 |
|
---|
187 | - rules: `Array` of nodes with the types `rule`, `comment` and any of the
|
---|
188 | at-rule types.
|
---|
189 |
|
---|
190 | #### import
|
---|
191 |
|
---|
192 | The `@import` at-rule.
|
---|
193 |
|
---|
194 | - import: `String`. The part following `@import `.
|
---|
195 |
|
---|
196 | #### keyframes
|
---|
197 |
|
---|
198 | The `@keyframes` at-rule.
|
---|
199 |
|
---|
200 | - name: `String`. The name of the keyframes rule.
|
---|
201 | - vendor: `String` or `undefined`. The vendor prefix in `@keyframes`, or
|
---|
202 | `undefined` if there is none.
|
---|
203 | - keyframes: `Array` of nodes with the types `keyframe` and `comment`.
|
---|
204 |
|
---|
205 | #### keyframe
|
---|
206 |
|
---|
207 | - values: `Array` of `String`s. The list of “selectors” of the keyframe rule,
|
---|
208 | split on commas. Each “selector” is trimmed from whitespace.
|
---|
209 | - declarations: `Array` of nodes with the types `declaration` and `comment`.
|
---|
210 |
|
---|
211 | #### media
|
---|
212 |
|
---|
213 | The `@media` at-rule.
|
---|
214 |
|
---|
215 | - media: `String`. The part following `@media `.
|
---|
216 | - rules: `Array` of nodes with the types `rule`, `comment` and any of the
|
---|
217 | at-rule types.
|
---|
218 |
|
---|
219 | #### namespace
|
---|
220 |
|
---|
221 | The `@namespace` at-rule.
|
---|
222 |
|
---|
223 | - namespace: `String`. The part following `@namespace `.
|
---|
224 |
|
---|
225 | #### page
|
---|
226 |
|
---|
227 | The `@page` at-rule.
|
---|
228 |
|
---|
229 | - selectors: `Array` of `String`s. The list of selectors of the rule, split
|
---|
230 | on commas. Each selector is trimmed from whitespace and comments.
|
---|
231 | - declarations: `Array` of nodes with the types `declaration` and `comment`.
|
---|
232 |
|
---|
233 | #### supports
|
---|
234 |
|
---|
235 | The `@supports` at-rule.
|
---|
236 |
|
---|
237 | - supports: `String`. The part following `@supports `.
|
---|
238 | - rules: `Array` of nodes with the types `rule`, `comment` and any of the
|
---|
239 | at-rule types.
|
---|
240 |
|
---|
241 | ### Example
|
---|
242 |
|
---|
243 | CSS:
|
---|
244 |
|
---|
245 | ```css
|
---|
246 | body {
|
---|
247 | background: #eee;
|
---|
248 | color: #888;
|
---|
249 | }
|
---|
250 | ```
|
---|
251 |
|
---|
252 | Parse tree:
|
---|
253 |
|
---|
254 | ```json
|
---|
255 | {
|
---|
256 | "type": "stylesheet",
|
---|
257 | "stylesheet": {
|
---|
258 | "rules": [
|
---|
259 | {
|
---|
260 | "type": "rule",
|
---|
261 | "selectors": [
|
---|
262 | "body"
|
---|
263 | ],
|
---|
264 | "declarations": [
|
---|
265 | {
|
---|
266 | "type": "declaration",
|
---|
267 | "property": "background",
|
---|
268 | "value": "#eee",
|
---|
269 | "position": {
|
---|
270 | "start": {
|
---|
271 | "line": 2,
|
---|
272 | "column": 3
|
---|
273 | },
|
---|
274 | "end": {
|
---|
275 | "line": 2,
|
---|
276 | "column": 19
|
---|
277 | }
|
---|
278 | }
|
---|
279 | },
|
---|
280 | {
|
---|
281 | "type": "declaration",
|
---|
282 | "property": "color",
|
---|
283 | "value": "#888",
|
---|
284 | "position": {
|
---|
285 | "start": {
|
---|
286 | "line": 3,
|
---|
287 | "column": 3
|
---|
288 | },
|
---|
289 | "end": {
|
---|
290 | "line": 3,
|
---|
291 | "column": 14
|
---|
292 | }
|
---|
293 | }
|
---|
294 | }
|
---|
295 | ],
|
---|
296 | "position": {
|
---|
297 | "start": {
|
---|
298 | "line": 1,
|
---|
299 | "column": 1
|
---|
300 | },
|
---|
301 | "end": {
|
---|
302 | "line": 4,
|
---|
303 | "column": 2
|
---|
304 | }
|
---|
305 | }
|
---|
306 | }
|
---|
307 | ]
|
---|
308 | }
|
---|
309 | }
|
---|
310 | ```
|
---|
311 |
|
---|
312 | ## License
|
---|
313 |
|
---|
314 | MIT
|
---|