{"library":"rrweb-cssom","title":"rrweb-cssom: CSS Object Model and Parser","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rrweb-cssom"],"cli":null},"imports":["import CSSOM from 'rrweb-cssom';","import CSSOM from 'rrweb-cssom';\nconst parsed = CSSOM.parse('...');","const CSSOM = require('rrweb-cssom');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import CSSOM from 'rrweb-cssom';\n\nconst cssString = `\n  body {\n    font-family: Arial, sans-serif;\n    color: #333;\n    margin: 0;\n  }\n  h1 {\n    color: #007bff;\n    text-align: center;\n  }\n  div {\n    background: gray; /* This will be overwritten */\n    background: linear-gradient(to bottom, white 0%, black 100%);\n  }\n`;\n\nconst parsedCSS = CSSOM.parse(cssString);\nconsole.log('Parsed CSS Rules:', JSON.stringify(parsedCSS.cssRules, null, 2));\n\n// Accessing a specific rule (e.g., the body rule)\nconst bodyRule = parsedCSS.cssRules.find(rule => rule.selectorText === 'body');\nif (bodyRule) {\n  console.log('\\nBody Rule Style:', JSON.stringify(bodyRule.style, null, 2));\n  console.log('Body color:', bodyRule.style.color);\n}\n\n// Demonstrating the property overwrite warning for the 'div' rule\nconst divRule = parsedCSS.cssRules.find(rule => rule.selectorText === 'div');\nif (divRule) {\n  console.log('\\nDiv Rule Style (note background overwrite):', JSON.stringify(divRule.style, null, 2));\n  // The 'background: gray' declaration is overwritten by the 'background: linear-gradient...' one.\n  // The resulting style object for 'div' will only contain the linear-gradient background.\n}\n","lang":"typescript","description":"Parses a CSS string, logs the structured CSSOM, and demonstrates how to access specific rules and styles, highlighting the property overwrite behavior.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}