@@ -46,7 +46,8 @@ load("parserlib.js");
46
46
47
47
### HTML page
48
48
49
- To use the CSS parser on an HTML page, you can either include the entire library on your page:
49
+ To use the CSS parser on an HTML page, you can either include the entire
50
+ library on your page:
50
51
51
52
``` html
52
53
<script src =" parserlib.js" ></script >
@@ -71,12 +72,17 @@ You can create a new instance of the parser by using the following code:
71
72
var parser = new parserlib.css.Parser ();
72
73
```
73
74
74
- The constructor accepts an options object that specifies additional features the parser should use. The available options are:
75
+ The constructor accepts an options object that specifies additional features
76
+ the parser should use. The available options are:
75
77
76
- * ` starHack ` - set to true to treat properties with a leading asterisk as if the asterisk wasn't there. Default is false.
77
- * ` underscoreHack ` - set to true to treat properties with a leading underscore as if the underscore wasn't there. Default is false.
78
- * ` ieFilters ` - set to true to accept IE < 8 style ` filter ` properties. Default is false.
79
- * ` strict ` - set to true to disable error recovery and stop on the first syntax error. Default is false.
78
+ * ` starHack ` - set to true to treat properties with a leading asterisk as if
79
+ the asterisk wasn't there. Default is ` false ` .
80
+ * ` underscoreHack ` - set to true to treat properties with a leading underscore
81
+ as if the underscore wasn't there. Default is ` false ` .
82
+ * ` ieFilters ` - set to true to accept IE < 8 style ` filter ` properties.
83
+ Default is ` false ` .
84
+ * ` strict ` - set to true to disable error recovery and stop on the first
85
+ syntax error. Default is ` false ` .
80
86
81
87
Here's an example with some options set:
82
88
@@ -90,11 +96,14 @@ You can then parse a string of CSS code by passing into the `parse()` method:
90
96
parser .parse (someCSSText);
91
97
```
92
98
93
- The ` parse() ` method throws an error if a non-recoverable syntax error occurs, otherwise it finishes silently.
94
- This method does not return a value nor does it build up an abstract syntax tree (AST) for you,
95
- it simply parses the CSS text and fires events at important moments along the parse.
99
+ The ` parse() ` method throws an error if a non-recoverable syntax error occurs,
100
+ otherwise it finishes silently.
101
+ This method does not return a value nor does it build up an abstract syntax
102
+ tree (AST) for you, it simply parses the CSS text and fires events at important
103
+ moments along the parse.
96
104
97
- Note: The ` parseStyleSheet() ` method is provided for compatibility with SAC-based APIs but does the exact same thing as ` parse() ` .
105
+ Note: The ` parseStyleSheet() ` method is provided for compatibility with
106
+ SAC-based APIs but does the exact same thing as ` parse() ` .
98
107
99
108
## Understanding syntax units
100
109
@@ -103,9 +112,10 @@ These types are designed to give you easy access to all relevant parts of the CS
103
112
104
113
### Media Queries
105
114
106
- The ` parserlib.css.MediaFeature ` type represents a specific media feature in a media query,
107
- such as ` (orientation: portrait) ` or ` (color) ` . Essentially, this type of object represents
108
- anything enclosed in parentheses in a media query. Object of this type have the following properties:
115
+ The ` parserlib.css.MediaFeature ` type represents a specific media feature in a
116
+ media query, such as ` (orientation: portrait) ` or ` (color) ` . Essentially, this
117
+ type of object represents anything enclosed in parentheses in a media query.
118
+ Object of this type have the following properties:
109
119
110
120
* ` name ` - the name of the media feature such as "orientation"
111
121
* ` value ` - the value of the media feature (may be ` null ` )
@@ -146,7 +156,8 @@ this type of object wraps the various parts into a single interface. Each instan
146
156
147
157
The ` parts ` array always has at least one item.
148
158
149
- The ` parserlib.css.PropertyValuePart ` type represents an individual part of a property value. Each instance has the following properties:
159
+ The ` parserlib.css.PropertyValuePart ` type represents an individual part of a
160
+ property value. Each instance has the following properties:
150
161
151
162
* ` type ` - the type of value part ("unknown", "dimension", "percentage", "integer", "number", "color", "uri", "string", "identifier" or "operator")
152
163
@@ -162,18 +173,20 @@ The parts are "1em" (dimension), "/" (operator), "1.5em" (dimension), "Times New
162
173
163
174
### Selectors
164
175
165
- The `parserlib.css .Selector` type represents a single selector. Each instance has a `parts` property,
166
- which is an array of `parserlib.css .SelectorPart` objects, which represent atomic parts of the selector,
167
- and `parserlib.css .Combinator` objects, which represent combinators in the selector.
176
+ The `parserlib.css .Selector` type represents a single selector. Each instance
177
+ has a `parts` property, which is an array of `parserlib.css .SelectorPart` objects,
178
+ which represent atomic parts of the selector, and `parserlib.css .Combinator`
179
+ objects, which represent combinators in the selector.
168
180
Consider the following selector:
169
181
170
182
```css
171
183
li .selected > a :hover
172
184
```
173
185
174
- This selector has three parts: `li .selected`, `> `, and `a :hover `. The first part is a `SelectorPart`,
175
- the second is a `Combinator`, and the third is a `SelectorPart`. Each `SelectorPart` is made up
176
- of an optional element name followed by an ID, class, attribute condition, pseudo class, and/or pseudo element .
186
+ This selector has three parts: `li .selected`, `> `, and `a :hover `. The first
187
+ part is a `SelectorPart`, the second is a `Combinator`, and the third is a
188
+ `SelectorPart`. Each `SelectorPart` is made up of an optional element name
189
+ followed by an ID, class, attribute condition, pseudo class, and/or pseudo element .
177
190
178
191
Each instance of `parserlib.css .SelectorPart` has an `elementName` property, which represents
179
192
the element name as a `parserlib.css .SelectorSubPart` object or `null` if there isn't one,
@@ -186,7 +199,6 @@ of `SelectorPart` arguments that were passed to `not()`.
186
199
Each instance of `parserlib.css .Combinator` has an additional `type` property that indicates
187
200
the type of combinator: "descendant", "child", "sibling", or "adjacent-sibling ".
188
201
189
-
190
202
## Using events
191
203
192
204
The CSS parser fires events as it parses text . The events correspond to important parts
@@ -214,20 +226,20 @@ There is no additional information provided for these events. Example:
214
226
215
227
```js
216
228
parser.addListener("startstylesheet", function() {
217
- console .log ("Starting to parse style sheet ");
229
+ console .log ("Starting to parse stylesheet ");
218
230
});
219
231
220
232
parser.addListener("endstylesheet", function() {
221
- console .log ("Finished parsing style sheet ");
233
+ console .log ("Finished parsing stylesheet ");
222
234
});
223
235
```
224
236
225
237
### ` charset ` event
226
238
227
- The ` charset ` event fires when the ` @charset ` directive is found in a style sheet .
228
- Since ` @charset ` is required to appear first in a style sheet , any other occurances
239
+ The ` charset ` event fires when the ` @charset ` directive is found in a stylesheet .
240
+ Since ` @charset ` is required to appear first in a stylesheet , any other occurances
229
241
cause a syntax error. The ` charset ` event provides an ` event ` object with a property
230
- called ` charset ` , which contains the name of the character set for the style sheet . Example:
242
+ called ` charset ` , which contains the name of the character set for the stylesheet . Example:
231
243
232
244
``` js
233
245
parser .addListener (" charset" , function (event ) {
@@ -237,7 +249,7 @@ parser.addListener("charset", function(event) {
237
249
238
250
### ` namespace ` event
239
251
240
- The ` namespace ` event fires when the ` @namespace ` directive is found in a style sheet .
252
+ The ` namespace ` event fires when the ` @namespace ` directive is found in a stylesheet .
241
253
The ` namespace ` event provides an ` event ` object with two properties: ` prefix ` ,
242
254
which is the namespace prefix, and ` uri ` , which is the namespace URI. Example:
243
255
@@ -249,7 +261,7 @@ parser.addListener("namespace", function(event) {
249
261
250
262
### ` import ` event
251
263
252
- The ` import ` event fires when the ` @import ` directive is found in a style sheet .
264
+ The ` import ` event fires when the ` @import ` directive is found in a stylesheet .
253
265
The ` import ` event provides an ` event ` object with two properties: ` uri ` ,
254
266
which is the URI to import, and ` media ` , which is an array of media queries
255
267
for which this URI applies. The ` media ` array contains zero or more
@@ -279,8 +291,8 @@ parser.addListener("endfontface", function(event) {
279
291
280
292
### ` startpage ` and ` endpage ` events
281
293
282
- The ` startpage ` event fires when ` @page ` is encountered and the ` endpage ` event fires
283
- just after the closing right brace (` } ` ) is encountered after ` @page ` .
294
+ The ` startpage ` event fires when ` @page ` is encountered and the ` endpage ` event
295
+ fires just after the closing right brace (` } ` ) is encountered after ` @page ` .
284
296
The ` event ` object has two properties: ` id ` , which is the page ID, and ` pseudo ` ,
285
297
which is the page pseudo class. Example:
286
298
@@ -313,9 +325,9 @@ parser.addListener("endpagemargin", function(event) {
313
325
314
326
### ` startmedia ` and ` endmedia ` events
315
327
316
- The ` startmedia ` event fires when ` @media ` is encountered and the ` endmedia ` event fires
317
- just after the closing right brace (` } ` ) is encountered after ` @media ` .
318
- The ` event ` object has one property, ` media ` , which is an array of
328
+ The ` startmedia ` event fires when ` @media ` is encountered and the ` endmedia `
329
+ event fires just after the closing right brace (` } ` ) is encountered after
330
+ ` @media ` . The ` event ` object has one property, ` media ` , which is an array of
319
331
` parserlib.css.MediaQuery ` objects. Example:
320
332
321
333
``` js
@@ -418,17 +430,19 @@ parser.addListener("error", function(event) {
418
430
The CSS parser's goal is to be on-par with error recovery of CSS parsers in browsers.
419
431
To that end, the following error recovery mechanisms are in place:
420
432
421
- * ** Properties** - a syntactically incorrect property definition will be skipped over completely. For instance, the second property below is dropped:
433
+ * ** Properties** - a syntactically incorrect property definition will be
434
+ skipped over completely. For instance, the second property below is dropped:
422
435
423
436
``` css
424
437
a :hover {
425
438
color : red ;
426
- font :: Helvetica ; /* dropped! */
439
+ font :: Helvetica ; /* dropped! */
427
440
text-decoration : underline ;
428
441
}
429
442
```
430
443
431
- * ** Selectors** - if there's a syntax error in * any* selector, the entire rule is skipped over. For instance, the following rule is completely skipped:
444
+ * ** Selectors** - if there's a syntax error in * any* selector, the entire rule
445
+ is skipped over. For instance, the following rule is completely skipped:
432
446
433
447
``` css
434
448
a :hover , foo ... bar {
@@ -438,11 +452,14 @@ a:hover, foo ... bar {
438
452
}
439
453
```
440
454
441
- * ** @ Rules** - there are certain @ rules that are only valid in certain contexts. The parser will skip over ` @charset ` , ` @namespace ` , and ` @import ` if they're found anywhere other than the beginning of the input.
455
+ * ** @ Rules** - there are certain @ rules that are only valid in certain
456
+ contexts. The parser will skip over ` @charset ` , ` @namespace ` , and ` @import `
457
+ if they're found anywhere other than the beginning of the input.
442
458
443
- * ** Unknown @ Rules** - any @ rules that isn't recognized is automatically skipped, meaning the entire block after it is not parsed.
459
+ * ** Unknown @ Rules** - any @ rules that isn't recognized is automatically
460
+ skipped, meaning the entire block after it is not parsed.
444
461
445
462
## Running Tests
446
463
447
- You can run the tests via ` npm test ` from the repository's root. You
464
+ You can run the tests via ` npm test ` from the repository's root. You
448
465
may need to run ` npm install ` first to install the necessary dependencies.
0 commit comments