fd-css-parse

CSS parser / stringifier

css

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:

  • 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.
var ast = css.parse('body { font-size: 12px; }', { position: true, 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 will have error.position, just like node.position.

If you create any errors in plugins such as in rework, you must set the position as well 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.
  • end: Object:
    • line: Number.
    • column: Number.
  • source: String or . The value of options.source if passed to css.parse. Otherwise .
  • content: String. The full source string passed to css.parse.
  • parent: Object. Reference to the parent node that contains this node.

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.

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 types rule, comment and any of the at-rule types.
  • selectors: Array of Strings. 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.
  • 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 or . The vendor prefix in @document, or if there is none.
  • rules: Array of nodes with the types rule, comment and any of the at-rule types.

The @font-face at-rule.

  • declarations: Array of nodes with the types declaration and comment.

The @host at-rule.

  • rules: Array of nodes with the types rule, 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 or . The vendor prefix in @keyframes, or if there is none.
  • keyframes: Array of nodes with the types keyframe and comment.
  • values: Array of Strings. 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.

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.

The @namespace at-rule.

  • namespace: String. The part following @namespace.

The @page at-rule.

  • selectors: Array of Strings. 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.

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.

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