tessl/npm-cssom

CSS Object Model implementation and CSS parser for programmatic CSS manipulation and analysis

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

CSS Rules

Name: tessl/npm-cssom
Author: tessl

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.

Capabilities

CSSRule Base Class

Base class for all CSS rules providing common properties and rule type constants.

/**
 * Base class for all CSS rules
 */
class CSSRule {
  constructor();
  
  /** Parent rule if this rule is nested */
  parentRule: CSSRule;
  
  /** Parent stylesheet containing this rule */
  parentStyleSheet: CSSStyleSheet;
  
  // Rule type constants
  static UNKNOWN_RULE: 0;        // obsolete
  static STYLE_RULE: 1;
  static CHARSET_RULE: 2;        // obsolete  
  static IMPORT_RULE: 3;
  static MEDIA_RULE: 4;
  static FONT_FACE_RULE: 5;
  static PAGE_RULE: 6;
  static KEYFRAMES_RULE: 7;
  static KEYFRAME_RULE: 8;
  static MARGIN_RULE: 9;
  static NAMESPACE_RULE: 10;
  static COUNTER_STYLE_RULE: 11;
  static SUPPORTS_RULE: 12;
  static DOCUMENT_RULE: 13;
  static FONT_FEATURE_VALUES_RULE: 14;
  static VIEWPORT_RULE: 15;
  static REGION_STYLE_RULE: 16;
}

CSSStyleRule

Standard CSS style rules with selectors and style declarations.

/**
 * CSS style rule with selector and declarations
 */
class CSSStyleRule extends CSSRule {
  constructor();
  
  /** Rule type constant */
  type: 1;
  
  /** CSS selector text */
  selectorText: string;
  
  /** Style declaration containing CSS properties */
  style: CSSStyleDeclaration;
  
  /** Complete CSS text representation */
  cssText: string;
  
  /**
   * Parse CSS rule text into a CSSStyleRule (non-standard)
   * @param {string} ruleText - CSS rule text to parse
   * @returns {CSSStyleRule} Parsed style rule
   */
  static parse(ruleText): CSSStyleRule;
}

Usage Examples:

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

// Access style rules from parsed CSS
const sheet = parse("body { color: red; } .header { font-size: 24px; }");
const bodyRule = sheet.cssRules[0];

console.log(bodyRule.selectorText); // "body"
console.log(bodyRule.style.color);  // "red"
console.log(bodyRule.cssText);      // "body{color:red;}"

// Parse individual rule (non-standard)
const rule = CSSStyleRule.parse(".button { padding: 10px; background: blue; }");
console.log(rule.selectorText); // ".button"
console.log(rule.style.padding); // "10px"

CSSGroupingRule

Base class for rules that contain other rules.

/**
 * Base class for rules containing other rules
 */
class CSSGroupingRule extends CSSRule {
  constructor();
  
  /** Array of child CSS rules */
  cssRules: Array;
  
  /**
   * Insert a rule at the specified index
   * @param {string} rule - CSS rule text to insert
   * @param {number} index - Position to insert
   * @returns {number} Index of inserted rule
   * @throws {RangeError} If index is invalid
   */
  insertRule(rule, index): number;
  
  /**
   * Delete rule at the specified index
   * @param {number} index - Index of rule to delete
   * @throws {RangeError} If index is invalid
   */
  deleteRule(index): void;
}

CSSMediaRule

CSS @media rules for responsive design and conditional styling.

/**
 * CSS @media rule for conditional styling
 */
class CSSMediaRule extends CSSGroupingRule {
  constructor();
  
  /** Rule type constant */
  type: 4;
  
  /** Media list object managing media queries */
  media: MediaList;
  
  /** Media query text (aliases to media.mediaText) */
  conditionText: string;
  
  /** Complete @media rule CSS text */
  cssText: string;
}

Usage Examples:

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

const sheet = parse(`
  @media (max-width: 768px) {
    body { font-size: 14px; }
    .container { width: 100%; }
  }
`);

const mediaRule = sheet.cssRules[0];
console.log(mediaRule.media.mediaText); // "(max-width: 768px)"
console.log(mediaRule.cssRules.length); // 2 nested rules
console.log(mediaRule.cssRules[0].selectorText); // "body"

CSSSupportsRule

CSS @supports rules for feature detection.

/**
 * CSS @supports rule for feature detection
 */
class CSSSupportsRule extends CSSConditionRule {
  constructor();
  
  /** Rule type constant */
  type: 12;
  
  /** Complete @supports rule CSS text */
  cssText: string;
}

CSSImportRule

CSS @import rules for external stylesheet inclusion.

/**
 * CSS @import rule for external stylesheets
 */
class CSSImportRule extends CSSRule {
  constructor();
  
  /** Rule type constant */
  type: 3;
  
  /** URL of imported stylesheet */
  href: string;
  
  /** Media list for import conditions */
  media: MediaList;
  
  /** Associated stylesheet object */
  styleSheet: CSSStyleSheet;
  
  /** Complete @import rule CSS text with parsing */
  cssText: string;
}

Usage Examples:

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

const sheet = parse(`
  @import url("reset.css");
  @import "theme.css" screen and (min-width: 768px);
`);

const importRule = sheet.cssRules[0];
console.log(importRule.href); // URL extracted from import
console.log(importRule.media.mediaText); // Media conditions if present

CSSKeyframesRule

CSS @keyframes rules for animations.

/**
 * CSS @keyframes rule for animations
 */
class CSSKeyframesRule extends CSSRule {
  constructor();
  
  /** Rule type constant */
  type: 7;
  
  /** Animation name */
  name: string;
  
  /** Array of CSSKeyframeRule objects */
  cssRules: Array;
  
  /** Complete @keyframes rule CSS text with indentation */
  cssText: string;
  
  /** Internal vendor prefix property */
  _vendorPrefix: string;
}

CSSKeyframeRule

Individual keyframe rules within @keyframes.

/**
 * Individual keyframe rule within @keyframes
 */
class CSSKeyframeRule extends CSSRule {
  constructor();
  
  /** Rule type constant */
  type: 8;
  
  /** Keyframe selector (e.g., "0%", "from", "to") */
  keyText: string;
  
  /** Style declaration for keyframe */
  style: CSSStyleDeclaration;
  
  /** Complete keyframe rule CSS text */
  cssText: string;
}

Usage Examples:

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

const sheet = parse(`
  @keyframes fadeIn {
    from { opacity: 0; }
    50% { opacity: 0.5; }
    to { opacity: 1; }
  }
`);

const keyframesRule = sheet.cssRules[0];
console.log(keyframesRule.name); // "fadeIn"
console.log(keyframesRule.cssRules.length); // 3 keyframes

const fromKeyframe = keyframesRule.cssRules[0];
console.log(fromKeyframe.keyText); // "from"
console.log(fromKeyframe.style.opacity); // "0"

CSSFontFaceRule

CSS @font-face rules for custom font definitions.

/**
 * CSS @font-face rule for custom fonts
 */
class CSSFontFaceRule extends CSSRule {
  constructor();
  
  /** Rule type constant */
  type: 5;
  
  /** Style declaration for font properties */
  style: CSSStyleDeclaration;
  
  /** Complete @font-face rule CSS text */
  cssText: string;
}

Additional Rule Types

Other specialized rule types supported by CSSOM.

/**
 * CSS @host rule for Shadow DOM (non-standard)
 */
class CSSHostRule extends CSSRule {
  constructor();
  type: 1001;
  cssRules: Array;
  cssText: string;
}

/**
 * CSS @-moz-document rule for document-specific styles
 */
class CSSDocumentRule extends CSSRule {
  constructor();
  type: 10;
  matcher: MatcherList;
  cssRules: Array;
  cssText: string;
}

/**
 * Base class for conditional rules (@media, @supports)
 */
class CSSConditionRule extends CSSGroupingRule {
  constructor();
  conditionText: string;
  cssText: string;
}

Usage Examples:

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

// Font face rule
const fontSheet = parse(`
  @font-face {
    font-family: "MyFont";
    src: url("font.woff2") format("woff2");
    font-weight: normal;
  }
`);

const fontRule = fontSheet.cssRules[0];
console.log(fontRule.style.getPropertyValue("font-family")); // "MyFont"

// Document rule (Firefox-specific)
const docSheet = parse(`
  @-moz-document url-prefix(http://example.com/) {
    body { background: red; }
  }
`);

const docRule = docSheet.cssRules[0];
console.log(docRule.matcher.matcherText); // Document matcher conditions

Install with Tessl CLI