How do I parse CSS with CSS Parser in Node.js?

Install via npm as the 'parserlib' package, then create a parser instance and call parse() with your CSS string. The README provides code examples for Node.js usage, including handling events for parsed constructs.

CSS Parser vs PostCSS: which one should I use for a linter?

CSS Parser is lower-level and event-driven, ideal if you need granular control and browser-like error recovery. PostCSS offers a plugin ecosystem and AST, better for transformations but may be heavier. Choose based on whether you prioritize custom tooling or pre-built functionality.

Does CSS Parser support CSS custom properties (variables)?

It's a CSS3 parser, so support for custom properties is not explicitly mentioned in the README. You might need to test or extend it, as newer CSS features may not be fully validated or parsed.

How can I build an abstract syntax tree from CSS Parser events?

You must listen to events like 'startrule' and 'property' to accumulate data into your own tree structure. The README details event objects with syntax units, but no built-in AST is provided, requiring manual implementation.

What's the difference between error recovery and strict mode in CSS Parser?

In default mode, it recovers from errors by skipping invalid parts and fires 'error' events. In strict mode (enabled via options), parsing stops on the first syntax error, useful for debugging or strict validation.

Is CSS Parser still maintained and updated?

The README shows Travis CI for builds, but no recent activity is mentioned. It may be stable but potentially outdated for modern CSS features, so check the GitHub repository for latest updates and issues.

Open-Awesome

ParserLib

NOASSERTIONJavaScriptv1.1.1

A CSS3 SAX-inspired parser written in JavaScript for parsing and validating CSS syntax.

Visit Website GitHub

294 stars81 forks0 contributors

What is ParserLib?

CSS Parser is a JavaScript library that parses and validates CSS3 syntax using a SAX-inspired event-driven model. It processes CSS text, fires events for constructs like rules and properties, and supports error recovery similar to browsers. It's designed as a foundation for building CSS linters, validators, and other tooling.

Target Audience

JavaScript developers building CSS analysis tools, linters, validators, or preprocessors that require detailed parsing of CSS syntax.

Value Proposition

Developers choose this parser for its browser-like error recovery, detailed event system for granular control, and support for CSS3 features like media queries and keyframes, all without imposing a specific abstract syntax tree structure.

Overview

Collection of parsers written in JavaScript

Use Cases

Best For

Building custom CSS linters or validators
Creating CSS preprocessors or transformers
Analyzing CSS selectors and media queries programmatically
Developing tools that need event-driven CSS parsing
Educational projects for understanding CSS syntax parsing
Integrating CSS parsing into Node.js or browser-based applications

Not Ideal For

Projects needing a ready-to-use abstract syntax tree for easy CSS manipulation
Teams building tools that require comprehensive validation of modern CSS features beyond CSS3
Developers looking for a high-level CSS processing library with built-in transformations or minification
Quick prototyping where integrated solutions like PostCSS plugins are more suitable

Pros & Cons

Pros

Event-Driven Flexibility

The SAX-inspired model fires events for CSS constructs like rules and properties, allowing developers to build custom tools without being locked into a specific AST, as shown in the extensive event handling examples.

Browser-Like Error Recovery

Recovers from syntax errors by skipping invalid properties or rules, mimicking browser behavior, which is crucial for parsing real-world, messy CSS code.

Detailed Syntax Units

Provides structured objects for media queries, selectors, and properties with line and column info, enabling precise analysis for linters or validators.

Configurable Parsing Options

Supports options for star/underscore hacks and IE filters, allowing customization for legacy codebases, as documented in the constructor options.

Cons

Incomplete Validation

The README admits it's 'not guaranteed to thoroughly validate all possible CSS properties,' limiting its reliability for thorough linting without additional checks.

No Built-In AST

Requires developers to construct their own data structures from events, adding complexity and development time compared to parsers that provide a ready-to-use AST.

Potentially Outdated Scope

Focused on CSS3 syntax and may lack support for newer CSS features like Grid or Custom Properties, and the reliance on Travis CI suggests limited recent updates.

Frequently Asked Questions

Related Projects

PostCSS

Transforming styles with JS plugins

Stars28,961

Forks1,587

Last commit5 days ago

Rework

Plugin framework for CSS preprocessing in Node.js

Stars2,746

Forks120

Last commit5 years ago

CSSTree

A tool set for CSS including fast detailed parser, walker, generator and lexer based on W3C specs and browser implementations

Stars2,098

Forks112

Last commit2 months ago

Gonzales PE

CSS parser with support of preprocessors

Stars328

Forks66

Last commit4 months ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub