CSS parser / stringifier
npm install css-fork-pocketjosoCSS parser / stringifier.
$ npm install css
``js`
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 sourcecss.parse
option of is strongly recommended when creating a source map.sourcemap: 'generator'
Specify to return the SourceMapGenerator objectfalse
instead of serializing the source map.
- inputSourcemaps: (enabled by default, specify 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.
`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 thrown during parsing have the following properties:
- message: String. The full error message with the source position.String
- reason: . The error message without position.String
- filename: or undefined. The value of options.source ifcss.parse
passed to . Otherwise undefined.Integer
- line: .Integer
- column: .String
- source: . The portion of code that couldn't be parsed.
When parsing with the silent option, errors are listed in theparsingErrors 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.
Interactively explore the AST with
All nodes have the following properties.
#### position
Information about the position in the source string that corresponds to
the node.
Object:
- start: Object:Number
- line: .Number
- column: .Object
- end: :Number
- line: .Number
- column: .String
- source: or undefined. The value of options.source if passed tocss.parse
. Otherwise undefined.String
- content: . 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.
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:Array
- rules: of nodes with the types rule, comment and any of theArray
at-rule types.
- parsingErrors: of Errors. Errors collected during parsing whensilent
option is true.
#### rule
- selectors: Array of Strings. The list of selectors of the rule, splitArray
on commas. Each selector is trimmed from whitespace and comments.
- declarations: of nodes with the types declaration and comment.
#### declaration
- property: String. The property name, trimmed from whitespace andString
comments. May not be empty.
- value: . 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.String
- media: . The part following the name.
#### document
The @document at-rule.
- document: String. The part following @document .String
- vendor: or undefined. The vendor prefix in @document, orundefined
if there is none.Array
- rules: 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.String
- vendor: or undefined. The vendor prefix in @keyframes, orundefined
if there is none.Array
- keyframes: of nodes with the types keyframe and comment.
#### keyframe
- values: Array of Strings. The list of “selectors” of the keyframe rule,Array
split on commas. Each “selector” is trimmed from whitespace.
- declarations: of nodes with the types declaration and comment.
#### media
The @media at-rule.
- media: String. The part following @media .Array
- rules: 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 Strings. The list of selectors of the rule, splitArray
on commas. Each selector is trimmed from whitespace and comments.
- declarations: of nodes with the types declaration and comment.
#### supports
The @supports at-rule.
- supports: String. The part following @supports .Array
- rules: of nodes with the types rule, comment and any of the
at-rule types.
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
}
}
}
]
}
}
MIT