CSS parser / stringifier.
$ npm install css
var css = require('css');
var obj = css.parse('body { font-size: 12px; }', options);
css.stringify(obj, 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.
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 ofcss.parse
is strongly recommended when creating a source map. Specifysourcemap: '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.
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 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
orundefined
. The value ofoptions.source
if passed tocss.parse
. Otherwiseundefined
. - 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
node instead
of being thrown.
If you create any errors in plugins such as in rework, you must set the same properties for consistency.
All nodes have the following properties.
Information about the position in the source string that corresponds to the node.
Object
:
- start:
Object
:- line:
Number
. - column:
Number
.
- line:
- end:
Object
:- line:
Number
. - column:
Number
.
- line:
- source:
String
orundefined
. The value ofoptions.source
if passed tocss.parse
. Otherwiseundefined
. - content:
String
. The full source string passed tocss.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.
String
. The possible values are the ones listed in the Types section below.
A reference to the parent node, or null
if the node has no parent.
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.)
The root node returned by css.parse
.
- stylesheet:
Object
:- rules:
Array
of nodes with the typesrule
,comment
and any of the at-rule types. - parsingErrors:
Array
ofError
s. Errors collected during parsing when optionsilent
is true.
- rules:
- selectors:
Array
ofString
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 typesdeclaration
andcomment
.
- 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.
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.
The @charset
at-rule.
- charset:
String
. The part following@charset
.
The @custom-media
at-rule.
- name:
String
. The--
-prefixed name. - media:
String
. The part following the name.
The @document
at-rule.
- document:
String
. The part following@document
. - vendor:
String
orundefined
. The vendor prefix in@document
, orundefined
if there is none. - rules:
Array
of nodes with the typesrule
,comment
and any of the at-rule types.
The @font-face
at-rule.
- declarations:
Array
of nodes with the typesdeclaration
andcomment
.
The @host
at-rule.
- rules:
Array
of nodes with the typesrule
,comment
and any of the at-rule types.
The @import
at-rule.
- import:
String
. The part following@import
.
The @keyframes
at-rule.
- name:
String
. The name of the keyframes rule. - vendor:
String
orundefined
. The vendor prefix in@keyframes
, orundefined
if there is none. - keyframes:
Array
of nodes with the typeskeyframe
andcomment
.
- values:
Array
ofString
s. The list of “selectors” of the keyframe rule, split on commas. Each “selector” is trimmed from whitespace. - declarations:
Array
of nodes with the typesdeclaration
andcomment
.
The @media
at-rule.
- media:
String
. The part following@media
. - rules:
Array
of nodes with the typesrule
,comment
and any of the at-rule types.
The @namespace
at-rule.
- namespace:
String
. The part following@namespace
.
The @page
at-rule.
- selectors:
Array
ofString
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 typesdeclaration
andcomment
.
The @supports
at-rule.
- supports:
String
. The part following@supports
. - rules:
Array
of nodes with the typesrule
,comment
and any of the at-rule types.
CSS:
body {
background: #eee;
color: #888;
}
Parse tree:
{
"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
}
}
}
]
}
}
MIT