Class ClientStyleSheet

packages/core/src/registry/sheet/ClientStyleSheet.ts:4–178

import { StyleSheet } from "./StyleSheet";

export class ClientStyleSheet implements StyleSheet {
  private name: string;
  private deletedRulePlaceholder: string;
  private speedy: boolean;
  private tags: (HTMLStyleElement | undefined)[];
  private injected: boolean;
  private rulesCount: number;

  constructor(name: string, speedy = false) {
    this.name = name;
    this.deletedRulePlaceholder = `#${name}-deleted-rule{}`;
    this.speedy = speedy;
    this.tags = [];
    this.injected = false;
    this.rulesCount = 0;
  }

  public inject(): void {
    if (this.injected) {
      throw new Error("ClientStyleSheet: sheet already injected");
    }

    if (this.speedy) {
      this.tags[0] = this.makeStyleTag();
      this.speedy = "insertRule" in this.getLatestSheet();
      if (!this.speedy) {
        if (!isProduction) {
          console.warn(
            "ClientStyleSheet: speedy mode not supported falling back to standard mode.",
          );
        }
        this.flush();
      }
    }

    this.injected = true;
  }

  public isSpeedy(): boolean {
    return this.speedy;
  }

  public setSpeedy(bool: boolean): void {
    if (this.rulesCount === 0) {
      throw new Error(
        "ClientStyleSheet: speedy cannot be when rules have already been inserted",
      );
    }
    this.flush();
    this.speedy = bool;
    this.inject();
  }

  public insertRule(rule: string, index?: number): number {
    if (this.speedy) {
      const sheet = this.getLatestSheet();
      if (typeof index !== "number") {
        index = sheet.cssRules.length;