You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
314 lines
7.7 KiB
314 lines
7.7 KiB
# 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
|
|
|