• Stars
    star
    1,573
  • Rank 29,762 (Top 0.6 %)
  • Language
    CSS
  • License
    MIT License
  • Created over 12 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

CSS parser / stringifier for Node.js

css Build Status

CSS parser / stringifier.

Installation

$ npm install css

Usage

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

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 node instead of being thrown.

If you create any errors in plugins such as in 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 Errors. Errors collected during parsing when option silent is true.

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.

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 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.

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 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.

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:

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
          }
        }
      }
    ]
  }
}

License

MIT

More Repositories

1

rework

Plugin framework for CSS preprocessing in Node.js
JavaScript
2,761
star
2

css-parse

CSS parser for Node.js
JavaScript
308
star
3

rework-npm

Import CSS from npm modules using rework
JavaScript
87
star
4

rework-vars

W3C-style CSS variables syntax for Rework
JavaScript
63
star
5

css-whitespace

Convert whitespace significant CSS to valid CSS
CSS
62
star
6

css-stringify

CSS stringifier using the AST from 'css.parse'
JavaScript
55
star
7

css-value

CSS property value parser
JavaScript
41
star
8

rework-inherit

Inherit rules from other selectors
JavaScript
37
star
9

rework-mixins

CSS mixins for rework
JavaScript
34
star
10

rework-plugin-url

url() plugin for rework, formerly included in core
JavaScript
25
star
11

rework-import

A rework plugin to read and inline css via @import
JavaScript
23
star
12

rework-custom-media

W3C-style custom media queries
JavaScript
22
star
13

rework-calc

A calc() plugin for Rework
JavaScript
18
star
14

rework-plugin-at2x

at2x() plugin for rework, formerly included in core
JavaScript
15
star
15

rework-breakpoints

Media Query breakpoint configuration plugin for Rework
JavaScript
15
star
16

rework-ie-limits

Rework plugin to check if CSS contains more selectors than allowed by IE < 10's selector limit
JavaScript
13
star
17

rework-plugin-inline

inline() plugin for rework, formerly included in core
JavaScript
12
star
18

rework-plugin-mixin

mixin() plugin for rework, formerly included in core
JavaScript
11
star
19

rework-plugin-function

function() plugin for rework, formerly included in core
JavaScript
10
star
20

rework-visit

Rework declaration visitor for plugins
JavaScript
10
star
21

rework-move-media

Rework plugin to combine and move Media Queries to the end of the CSS file
JavaScript
9
star
22

rework-variables

$-style CSS variables for Rework
JavaScript
7
star
23

rework-plugin-ease

ease() plugin for rework, formerly included in core
JavaScript
7
star
24

rework-plugin-colors

colors() plugin for rework, formerly included in core
JavaScript
7
star
25

rework-plugin-prefix-selectors

prefixSelectors() plugin for rework, formerly included in core
JavaScript
5
star
26

rework-plugin-references

references() plugin for rework, formerly included in core
JavaScript
4
star
27

split-media

Split your style sheet by @media queries
JavaScript
3
star
28

rework-hwb

Rework plugin for hwb color functions
JavaScript
2
star
29

rework-mixin-opacity

Rework mixin to insert IE 8's opacity filter after any CSS 'opacity' declaration
JavaScript
1
star