rrweb-cssom

library0.8.0jsnpmunverified

rrweb-cssom is a JavaScript library providing a CSS parser and a partial implementation of the CSS Object Model (CSSOM). It is primarily used for parsing CSS strings into a structured object representation, enabling programmatic access to CSS rules and styles. The current stable version is 0.8.0. This package is a fork of the original `cssom` project, which its original author declared as unmaintained. `rrweb-cssom`, however, appears to be actively maintained by the `rrweb-io` organization, with recent updates supporting modern CSS features like `@layer`, `@starting-style`, and `@container`. Its release cadence is driven by feature additions and bug fixes from its maintainers. A key differentiator and a limitation is its behavior regarding redundant CSS properties, where later declarations typically overwrite earlier ones, making it unsuitable for certain CSS transformation tasks like minification or linting that require preserving all rules.

serialization

npm install rrweb-cssom

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · RRWEB-CSSOM

rrweb-cssom

serializationjavascriptv0.8.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

CSSOM

✓ import CSSOM from 'rrweb-cssom';

✗ import { CSSOM } from 'rrweb-cssom';

The primary API is accessed via the default export, typically assigned to a variable like `CSSOM`, and its methods (e.g., `CSSOM.parse`).

parse

✓ import CSSOM from 'rrweb-cssom'; const parsed = CSSOM.parse('...');

✗ import { parse } from 'rrweb-cssom';

`parse` is a method on the default `CSSOM` export, not a named export itself.

CSSOM (CommonJS)

✓ const CSSOM = require('rrweb-cssom');

For CommonJS environments like Node.js, `require` imports the module, which then exposes the `parse` method.

Parses a CSS string, logs the structured CSSOM, and demonstrates how to access specific rules and styles, highlighting the property overwrite behavior.

import CSSOM from 'rrweb-cssom'; const cssString = ` body { font-family: Arial, sans-serif; color: #333; margin: 0; } h1 { color: #007bff; text-align: center; } div { background: gray; /* This will be overwritten */ background: linear-gradient(to bottom, white 0%, black 100%); } `; const parsedCSS = CSSOM.parse(cssString); console.log('Parsed CSS Rules:', JSON.stringify(parsedCSS.cssRules, null, 2)); // Accessing a specific rule (e.g., the body rule) const bodyRule = parsedCSS.cssRules.find(rule => rule.selectorText === 'body'); if (bodyRule) { console.log('\nBody Rule Style:', JSON.stringify(bodyRule.style, null, 2)); console.log('Body color:', bodyRule.style.color); } // Demonstrating the property overwrite warning for the 'div' rule const divRule = parsedCSS.cssRules.find(rule => rule.selectorText === 'div'); if (divRule) { console.log('\nDiv Rule Style (note background overwrite):', JSON.stringify(divRule.style, null, 2)); // The 'background: gray' declaration is overwritten by the 'background: linear-gradient...' one. // The resulting style object for 'div' will only contain the linear-gradient background. }

Debug

Known issues

gotchaThe `rrweb-cssom` package is a fork of the original `cssom` package (by NV), which is explicitly declared as unmaintained by its original author. Users should ensure they are installing `rrweb-cssom` for active maintenance, bug fixes, and support for modern CSS features.

fix

Verify that you are installing `rrweb-cssom` from `@rrweb-io` and not the unmaintained `cssom` package if active development is required.

affects: all

breakingWhen parsing CSS rules with multiple declarations for the same property, `rrweb-cssom` (like its predecessor `cssom`) prioritizes the last declaration, overwriting previous ones. This behavior is often problematic for CSS minification, mungling, or reformatting tasks where preserving all declarations (e.g., fallback properties) is crucial.

fix

If your use case requires preserving all CSS declarations, consider using alternative CSS parsers and transformers like PostCSS, csstree, or csso, which are designed for more robust AST manipulation.

affects: >=0.1.0

gotchaThe library relies on JavaScript getters/setters and other modern features, making it incompatible with older browsers, specifically Internet Explorer versions prior to IE9.

fix

Ensure that your target browser environment is IE9+ or a modern browser. If older IE support is absolutely critical, explore polyfills or alternative parsing libraries that do not depend on these features, though supporting such old browsers is generally not recommended for modern web development.

affects: all

Errors

Common errors & fixes

CSS property 'background: gray' gets overwritten by 'background: linear-gradient(...)' during parsing.

The internal parsing logic of `rrweb-cssom` processes declarations sequentially, and for properties with the same name, the last one encountered in a rule takes precedence, effectively overwriting earlier declarations.

fix

This is intended behavior of the parser. If preserving all declarations (e.g., for browser fallback patterns) is essential, `rrweb-cssom` is not the right tool. Use a dedicated CSS Abstract Syntax Tree (AST) transformer like PostCSS or CSSTree that can preserve and manipulate all declarations.

Object doesn't support property or method 'defineGetter' (or similar errors in IE < 9 related to getters/setters).

Attempting to run `rrweb-cssom` in Internet Explorer versions older than IE9, which lack native support for JavaScript features like getters and setters that the library utilizes.

fix

Upgrade to a modern browser (IE9+ or any other mainstream browser) or adjust your project's browser support matrix. `rrweb-cssom` is designed for modern JavaScript environments.

Upgrade

Version history

0.8.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/rrweb-io/CSSOM ↗

packagehttps://www.npmjs.com/package/rrweb-cssom ↗

homepagehttps://www.rrweb.io ↗