css-parse

What is css-parse?

The css-parse npm package is a utility for parsing CSS strings into an abstract syntax tree (AST). This can be useful for analyzing, transforming, or manipulating CSS code programmatically.

What are css-parse's main functionalities?

Parsing CSS to AST

This feature allows you to parse a CSS string into an abstract syntax tree (AST). The resulting AST can be used for further analysis or transformation of the CSS code.

const css = require('css-parse');
const stylesheet = css.parse('body { font-size: 12px; }');
console.log(JSON.stringify(stylesheet, null, 2));

Handling CSS Errors

This feature demonstrates how to handle errors that may occur during the parsing of CSS. The parser will throw an error if the CSS is not well-formed, which can be caught and handled appropriately.

const css = require('css-parse');
try {
  const stylesheet = css.parse('body { font-size: 12px;');
} catch (error) {
  console.error('CSS Parsing Error:', error.message);
}

Other packages similar to css-parse

postcss

PostCSS is a tool for transforming CSS with JavaScript plugins. It provides a more extensive set of features compared to css-parse, including the ability to parse, transform, and stringify CSS. PostCSS is widely used in the industry and has a large ecosystem of plugins.

css-tree

CSS Tree is a toolset for CSS including a fast and small CSS parser, walker, generator, and lexer. It offers more advanced features for working with CSS ASTs, such as optimization and validation, making it a more comprehensive solution compared to css-parse.

csstree

CSSTree is another library for working with CSS. It provides a fast and small CSS parser, walker, generator, and lexer. CSSTree is designed to be highly efficient and offers more advanced features for working with CSS ASTs, such as optimization and validation.

README

css-parse

JavaScript CSS parser for nodejs and the browser.

Example

css:

body {
  background: #eee;
  color: #888;
}

parse tree:

{
  "type": "stylesheet",
  "stylesheet": {
    "rules": [
      {
        "type": "rule",
        "selectors": [
          "body"
        ],
        "declarations": [
          {
            "type": "declaration",
            "property": "background",
            "value": "#eee"
          },
          {
            "type": "declaration",
            "property": "color",
            "value": "#888"
          }
        ]
      }
    ]
  }
}

parse tree with .position enabled:

{
  "type": "stylesheet",
  "stylesheet": {
    "rules": [
      {
        "type": "rule",
        "selectors": [
          "body"
        ],
        "declarations": [
          {
            "type": "declaration",
            "property": "background",
            "value": "#eee",
            "position": {
              "start": {
                "line": 3,
                "column": 3
              },
              "end": {
                "line": 3,
                "column": 19
              }
            }
          },
          {
            "type": "declaration",
            "property": "color",
            "value": "#888",
            "position": {
              "start": {
                "line": 4,
                "column": 3
              },
              "end": {
                "line": 4,
                "column": 14
              }
            }
          }
        ],
        "position": {
          "start": {
            "line": 2,
            "column": 1
          },
          "end": {
            "line": 5,
            "column": 2
          }
        }
      }
    ]
  }
}

Performance

Parsed 15,000 lines of CSS (2mb) in 40ms on my macbook air.

License

MIT