or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-rules.mdcss-values.mdindex.mdlists-collections.mdparsing.mdstyle-declarations.mdstylesheet-management.md
tile.json

index.mddocs/

CSSOM

CSSOM is a pure JavaScript CSS parser and partial implementation of the W3C CSS Object Model specification. It provides programmatic access to CSS stylesheets and rules, enabling parsing, manipulation, and serialization of CSS content in both browser and Node.js environments.

Package Information

  • Package Name: cssom
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install cssom

Core Imports

const { parse, CSSStyleSheet, CSSStyleDeclaration } = require("cssom");

For individual imports:

const { parse, clone } = require("cssom");
const { CSSStyleSheet, CSSStyleRule, CSSStyleDeclaration } = require("cssom");
const { CSSMediaRule, CSSKeyframesRule, CSSImportRule, CSSFontFaceRule } = require("cssom");
const { CSSSupportsRule, CSSHostRule, CSSDocumentRule } = require("cssom");
const { MediaList, MatcherList } = require("cssom");
const { CSSValue, CSSValueExpression } = require("cssom");

Basic Usage

const { parse } = require("cssom");

// Parse CSS text into a structured object model
const stylesheet = parse(`
  body {
    color: black;
    background: white;
  }
  .header {
    font-size: 24px;
    margin: 10px 0;
  }
`);

// Access parsed rules
console.log(stylesheet.cssRules.length); // 2
console.log(stylesheet.cssRules[0].selectorText); // "body"
console.log(stylesheet.cssRules[0].style.color); // "black"

// Modify styles
stylesheet.cssRules[0].style.setProperty("color", "red");
console.log(stylesheet.cssRules[0].style.color); // "red"

// Serialize back to CSS
console.log(stylesheet.toString());

Architecture

CSSOM is built around several key components:

  • Parser Engine: Core parsing functionality that converts CSS text into structured objects
  • Object Model: Complete implementation of CSS Object Model interfaces (CSSStyleSheet, CSSRule, etc.)
  • Rule System: Support for all major CSS rule types (@media, @keyframes, @import, etc.)
  • Style Declarations: Comprehensive CSS property management with priority support
  • Value System: Advanced CSS value parsing including IE expression() support
  • Collection Management: Array-like interfaces for media queries and document matchers

Capabilities

CSS Parsing

Core CSS parsing functionality that converts CSS text into a structured, manipulable object model following the W3C CSS Object Model specification.

/**
 * Parse CSS text into a CSSStyleSheet object
 * @param {string} token - CSS text to parse
 * @returns {CSSStyleSheet} Parsed stylesheet object with cssRules array
 */
function parse(token);

CSS Parsing

Stylesheet Management

Comprehensive stylesheet management including creation, manipulation, and deep cloning of CSS stylesheets and their associated rules.

class CSSStyleSheet {
  constructor();
  cssRules: Array;
  insertRule(rule, index): number;
  deleteRule(index): void;
  toString(): string;
}

/**
 * Create a recursive deep copy of a stylesheet
 * @param {CSSStyleSheet} stylesheet - Stylesheet to clone
 * @returns {CSSStyleSheet} Deep copy of the stylesheet
 */
function clone(stylesheet);

Stylesheet Management

CSS Rules

Complete implementation of all CSS rule types including style rules, at-rules (@media, @keyframes, @import, etc.), and conditional rules with full CSS Object Model compliance.

class CSSRule {
  parentRule: CSSRule;
  parentStyleSheet: CSSStyleSheet;
  static STYLE_RULE: 1;
  static MEDIA_RULE: 4;
  static IMPORT_RULE: 3;
  // ... additional rule type constants
}

class CSSStyleRule extends CSSRule {
  type: 1;
  selectorText: string;
  style: CSSStyleDeclaration;
  cssText: string;
}

CSS Rules

Style Declarations

Advanced CSS style declaration management with property setting, priority handling, and CSS text serialization capabilities.

class CSSStyleDeclaration {
  constructor();
  length: number;
  cssText: string;
  getPropertyValue(name): string;
  setProperty(name, value, priority): void;
  removeProperty(name): string;
  getPropertyPriority(name): string;
}

Style Declarations

CSS Values

Advanced CSS value handling including base value abstraction and support for IE-specific CSS expression() values with full JavaScript parsing.

class CSSValue {
  constructor();
  cssText: string;
}

class CSSValueExpression extends CSSValue {
  constructor(token, idx);
  parse(): object;
}

CSS Values

Lists and Collections

Array-like collection management for media queries and document matchers with automatic deduplication and proper serialization.

class MediaList {
  constructor();
  length: number;
  mediaText: string;
  appendMedium(medium): void;
  deleteMedium(medium): void;
}

class MatcherList {
  constructor();
  length: number;
  matcherText: string;
  appendMatcher(matcher): void;
  deleteMatcher(matcher): void;
}

Lists and Collections

Types

// Core interfaces used throughout the API
interface StyleSheet {
  parentStyleSheet: StyleSheet;
}

// Rule type constants available on CSSRule class
const RULE_TYPES = {
  STYLE_RULE: 1,
  IMPORT_RULE: 3,
  MEDIA_RULE: 4,
  FONT_FACE_RULE: 5,
  KEYFRAMES_RULE: 7,
  KEYFRAME_RULE: 8,
  SUPPORTS_RULE: 12,
  DOCUMENT_RULE: 10,
  HOST_RULE: 1001 // Non-standard Shadow DOM rule
};