Stylesheet Management

/**
 * CSS Stylesheet class for managing collections of CSS rules
 */
class CSSStyleSheet {
  constructor();
  
  /** Array of CSS rules contained in this stylesheet */
  cssRules: Array;
  
  /**
   * Insert a new CSS rule at the specified index
   * @param {string} rule - CSS rule text to insert
   * @param {number} index - Position to insert the rule
   * @returns {number} The index of the inserted rule
   * @throws {RangeError} If index is out of bounds
   */
  insertRule(rule, index): number;
  
  /**
   * Delete a CSS rule at the specified index
   * @param {number} index - Index of the rule to delete
   * @throws {RangeError} If index is out of bounds
   */
  deleteRule(index): void;
  
  /**
   * Serialize the stylesheet to CSS text (non-standard)
   * @returns {string} Complete CSS text representation
   */
  toString(): string;
}

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

// Create a new empty stylesheet
const sheet = new CSSStyleSheet();

// Insert rules
const ruleIndex = sheet.insertRule("body { margin: 0; }", 0);
console.log(ruleIndex); // 0

sheet.insertRule(".header { font-size: 24px; }", 1);
console.log(sheet.cssRules.length); // 2

// Access rules
console.log(sheet.cssRules[0].selectorText); // "body"
console.log(sheet.cssRules[1].selectorText); // ".header"

// Delete rules
sheet.deleteRule(0);
console.log(sheet.cssRules.length); // 1
console.log(sheet.cssRules[0].selectorText); // ".header"

// Serialize to CSS
console.log(sheet.toString());
// ".header{font-size:24px;}\n"

/**
 * Base stylesheet class
 */
class StyleSheet {
  constructor();
  
  /** Reference to parent stylesheet if nested */
  parentStyleSheet: StyleSheet;
}

/**
 * Create a recursive deep copy of a stylesheet
 * @param {CSSStyleSheet} stylesheet - Stylesheet to clone
 * @returns {CSSStyleSheet} Deep copy with all rules and properties preserved
 */
function clone(stylesheet);

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

// Parse original stylesheet
const original = parse(`
  body {
    color: red;
    background: white;
  }
  .container {
    width: 100%;
  }
  @media (max-width: 768px) {
    .container {
      width: auto;
    }
  }
`);

// Create deep copy
const cloned = clone(original);

// Verify independence - modify original
original.cssRules[0].style.setProperty("color", "blue");

// Cloned version is unaffected
console.log(original.cssRules[0].style.color); // "blue"
console.log(cloned.cssRules[0].style.color);   // "red"

// All rule types are cloned
console.log(cloned.cssRules.length); // Same as original
console.log(cloned.cssRules[2].constructor.name); // "CSSMediaRule"

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

// Start with parsed stylesheet
const sheet = parse("body { color: black; }");

// Insert media query with nested rules
sheet.insertRule(`
  @media (max-width: 768px) {
    body { font-size: 14px; }
    .mobile { display: block; }
  }
`, 1);

// Insert keyframe animation
sheet.insertRule(`
  @keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }
`, 2);

// Access nested rules within media query
const mediaRule = sheet.cssRules[1];
console.log(mediaRule.cssRules.length); // 2 nested rules
console.log(mediaRule.cssRules[0].selectorText); // "body"

// Serialize complete stylesheet
console.log(sheet.toString());

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

const sheet = new CSSStyleSheet();

try {
  // Invalid index for insertion
  sheet.insertRule("body { color: red; }", 10);
} catch (error) {
  console.log(error.name); // "RangeError"
  console.log(error.message); // "INDEX_SIZE_ERR"
}

try {
  // Invalid index for deletion
  sheet.deleteRule(5);
} catch (error) {
  console.log(error.name); // "RangeError" 
  console.log(error.message); // "INDEX_SIZE_ERR"
}