|
|
# css [![Build Status](https://travis-ci.org/reworkcss/css.svg?branch=master)](https://travis-ci.org/reworkcss/css)
CSS parser / stringifier.
## Installation
$ npm install css
## Usage
```js var css = require('css'); var obj = css.parse('body { font-size: 12px; }', options); css.stringify(obj, options); ```
## API
### css.parse(code, [options])
Accepts a CSS string and returns an AST `object`.
`options`:
- silent: silently fail on parse errors. - source: the path to the file containing `css`. Makes errors and source maps more helpful, by letting them know where code comes from.
### css.stringify(object, [options])
Accepts an AST `object` (as `css.parse` produces) and returns a CSS string.
`options`:
- indent: the string used to indent the output. Defaults to two spaces. - compress: omit comments and extraneous whitespace. - sourcemap: return a sourcemap along with the CSS output. Using the `source` option of `css.parse` is strongly recommended when creating a source map. Specify `sourcemap: 'generator'` to return the SourceMapGenerator object instead of serializing the source map. - inputSourcemaps: (enabled by default, specify `false` to disable) reads any source maps referenced by the input files when generating the output source map. When enabled, file system access may be required for reading the referenced source maps.
### Example
```js var ast = css.parse('body { font-size: 12px; }', { source: 'source.css' });
var css = css.stringify(ast);
var result = css.stringify(ast, { sourcemap: true }); result.code // string with CSS result.map // source map object ```
### Errors
Errors thrown during parsing have the following properties:
- message: `String`. The full error message with the source position. - reason: `String`. The error message without position. - filename: `String` or `undefined`. The value of `options.source` if passed to `css.parse`. Otherwise `undefined`. - line: `Integer`. - column: `Integer`. - source: `String`. The portion of code that couldn't be parsed.
When parsing with the `silent` option, errors are listed in the `parsingErrors` property of the [`stylesheet`](#stylesheet) node instead of being thrown.
If you create any errors in plugins such as in [rework](https://github.com/reworkcss/rework), you __must__ set the same properties for consistency.
## AST
Interactively explore the AST with <http://iamdustan.com/reworkcss_ast_explorer/>.
### Common properties
All nodes have the following properties.
#### position
Information about the position in the source string that corresponds to the node.
`Object`:
- start: `Object`: - line: `Number`. - column: `Number`. - end: `Object`: - line: `Number`. - column: `Number`. - source: `String` or `undefined`. The value of `options.source` if passed to `css.parse`. Otherwise `undefined`. - content: `String`. The full source string passed to `css.parse`.
The line and column numbers are 1-based: The first line is 1 and the first column of a line is 1 (not 0).
The `position` property lets you know from which source file the node comes from (if available), what that file contains, and what part of that file was parsed into the node.
#### type
`String`. The possible values are the ones listed in the Types section below.
#### parent
A reference to the parent node, or `null` if the node has no parent.
### Types
The available values of `node.type` are listed below, as well as the available properties of each node (other than the common properties listed above.)
#### stylesheet
The root node returned by `css.parse`.
- stylesheet: `Object`: - rules: `Array` of nodes with the types `rule`, `comment` and any of the at-rule types. - parsingErrors: `Array` of `Error`s. Errors collected during parsing when option `silent` is true.
#### rule
- selectors: `Array` of `String`s. The list of selectors of the rule, split on commas. Each selector is trimmed from whitespace and comments. - declarations: `Array` of nodes with the types `declaration` and `comment`.
#### declaration
- property: `String`. The property name, trimmed from whitespace and comments. May not be empty. - value: `String`. The value of the property, trimmed from whitespace and comments. Empty values are allowed.
#### comment
A rule-level or declaration-level comment. Comments inside selectors, properties and values etc. are lost.
- comment: `String`. The part between the starting `/*` and the ending `*/` of the comment, including whitespace.
#### charset
The `@charset` at-rule.
- charset: `String`. The part following `@charset `.
#### custom-media
The `@custom-media` at-rule.
- name: `String`. The `--`-prefixed name. - media: `String`. The part following the name.
#### document
The `@document` at-rule.
- document: `String`. The part following `@document `. - vendor: `String` or `undefined`. The vendor prefix in `@document`, or `undefined` if there is none. - rules: `Array` of nodes with the types `rule`, `comment` and any of the at-rule types.
#### font-face
The `@font-face` at-rule.
- declarations: `Array` of nodes with the types `declaration` and `comment`.
#### host
The `@host` at-rule.
- rules: `Array` of nodes with the types `rule`, `comment` and any of the at-rule types.
#### import
The `@import` at-rule.
- import: `String`. The part following `@import `.
#### keyframes
The `@keyframes` at-rule.
- name: `String`. The name of the keyframes rule. - vendor: `String` or `undefined`. The vendor prefix in `@keyframes`, or `undefined` if there is none. - keyframes: `Array` of nodes with the types `keyframe` and `comment`.
#### keyframe
- values: `Array` of `String`s. The list of “selectors” of the keyframe rule, split on commas. Each “selector” is trimmed from whitespace. - declarations: `Array` of nodes with the types `declaration` and `comment`.
#### media
The `@media` at-rule.
- media: `String`. The part following `@media `. - rules: `Array` of nodes with the types `rule`, `comment` and any of the at-rule types.
#### namespace
The `@namespace` at-rule.
- namespace: `String`. The part following `@namespace `.
#### page
The `@page` at-rule.
- selectors: `Array` of `String`s. The list of selectors of the rule, split on commas. Each selector is trimmed from whitespace and comments. - declarations: `Array` of nodes with the types `declaration` and `comment`.
#### supports
The `@supports` at-rule.
- supports: `String`. The part following `@supports `. - rules: `Array` of nodes with the types `rule`, `comment` and any of the at-rule types.
### Example
CSS:
```css body { background: #eee; color: #888; } ```
Parse tree:
```json { "type": "stylesheet", "stylesheet": { "rules": [ { "type": "rule", "selectors": [ "body" ], "declarations": [ { "type": "declaration", "property": "background", "value": "#eee", "position": { "start": { "line": 2, "column": 3 }, "end": { "line": 2, "column": 19 } } }, { "type": "declaration", "property": "color", "value": "#888", "position": { "start": { "line": 3, "column": 3 }, "end": { "line": 3, "column": 14 } } } ], "position": { "start": { "line": 1, "column": 1 }, "end": { "line": 4, "column": 2 } } } ] } } ```
## License
MIT
|