@@ -46,7 +46,8 @@ load("parserlib.js");
4646
4747### HTML page
4848
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:
5051
5152``` html
5253<script src =" parserlib.js" ></script >
@@ -71,12 +72,17 @@ You can create a new instance of the parser by using the following code:
7172var parser = new parserlib.css.Parser ();
7273```
7374
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:
7577
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 ` .
8086
8187Here's an example with some options set:
8288
@@ -90,11 +96,14 @@ You can then parse a string of CSS code by passing into the `parse()` method:
9096parser .parse (someCSSText);
9197```
9298
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.
96104
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() ` .
98107
99108## Understanding syntax units
100109
@@ -103,9 +112,10 @@ These types are designed to give you easy access to all relevant parts of the CS
103112
104113### Media Queries
105114
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:
109119
110120* ` name ` - the name of the media feature such as "orientation"
111121* ` 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
146156
147157The ` parts ` array always has at least one item.
148158
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:
150161
151162* ` type ` - the type of value part ("unknown", "dimension", "percentage", "integer", "number", "color", "uri", "string", "identifier" or "operator")
152163
@@ -162,18 +173,20 @@ The parts are "1em" (dimension), "/" (operator), "1.5em" (dimension), "Times New
162173
163174### Selectors
164175
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.
168180Consider the following selector:
169181
170182```css
171183li .selected > a :hover
172184```
173185
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 .
177190
178191Each instance of `parserlib.css .SelectorPart` has an `elementName` property, which represents
179192the 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()`.
186199Each instance of `parserlib.css .Combinator` has an additional `type` property that indicates
187200the type of combinator: "descendant", "child", "sibling", or "adjacent-sibling ".
188201
189-
190202## Using events
191203
192204The 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:
214226
215227```js
216228parser.addListener("startstylesheet", function() {
217- console .log ("Starting to parse style sheet ");
229+ console .log ("Starting to parse stylesheet ");
218230});
219231
220232parser.addListener("endstylesheet", function() {
221- console .log ("Finished parsing style sheet ");
233+ console .log ("Finished parsing stylesheet ");
222234});
223235```
224236
225237### ` charset ` event
226238
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
229241cause 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:
231243
232244``` js
233245parser .addListener (" charset" , function (event ) {
@@ -237,7 +249,7 @@ parser.addListener("charset", function(event) {
237249
238250### ` namespace ` event
239251
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 .
241253The ` namespace ` event provides an ` event ` object with two properties: ` prefix ` ,
242254which is the namespace prefix, and ` uri ` , which is the namespace URI. Example:
243255
@@ -249,7 +261,7 @@ parser.addListener("namespace", function(event) {
249261
250262### ` import ` event
251263
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 .
253265The ` import ` event provides an ` event ` object with two properties: ` uri ` ,
254266which is the URI to import, and ` media ` , which is an array of media queries
255267for which this URI applies. The ` media ` array contains zero or more
@@ -279,8 +291,8 @@ parser.addListener("endfontface", function(event) {
279291
280292### ` startpage ` and ` endpage ` events
281293
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 ` .
284296The ` event ` object has two properties: ` id ` , which is the page ID, and ` pseudo ` ,
285297which is the page pseudo class. Example:
286298
@@ -313,9 +325,9 @@ parser.addListener("endpagemargin", function(event) {
313325
314326### ` startmedia ` and ` endmedia ` events
315327
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
319331` parserlib.css.MediaQuery ` objects. Example:
320332
321333``` js
@@ -418,17 +430,19 @@ parser.addListener("error", function(event) {
418430The CSS parser's goal is to be on-par with error recovery of CSS parsers in browsers.
419431To that end, the following error recovery mechanisms are in place:
420432
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:
422435
423436``` css
424437a :hover {
425438 color : red ;
426- font :: Helvetica ; /* dropped! */
439+ font :: Helvetica ; /* dropped! */
427440 text-decoration : underline ;
428441}
429442```
430443
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:
432446
433447``` css
434448a :hover , foo ... bar {
@@ -438,11 +452,14 @@ a:hover, foo ... bar {
438452}
439453```
440454
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.
442458
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.
444461
445462## Running Tests
446463
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
448465may need to run ` npm install ` first to install the necessary dependencies.
0 commit comments