@copilotkit/react-ui/src/css/sidebar-specificity.test.ts

<img src="https://github.com/user-attachments/assets/0a6b64d9-e193-4940-a3f6-60334ac34084" alt="banner" style="border-radius: 12px; border: 2px solid #d6d4fa;" />

import { describe, expect, it } from "vitest";
import * as fs from "node:fs";
import * as path from "node:path";

const cssRoot = path.resolve(__dirname);

const sidebarScopedSelectors = [
  {
    file: "window.css",
    selector: ".copilotKitWindow",
  },
  {
    file: "header.css",
    selector: ".copilotKitHeader",
  },
  {
    file: "input.css",
    selector: ".copilotKitInputContainer",
  },
];

describe("sidebar CSS specificity", () => {
  it("keeps sidebar variant selectors easy to override", () => {
    for (const { file, selector } of sidebarScopedSelectors) {
      const css = fs.readFileSync(path.join(cssRoot, file), "utf-8");

      expect(css).not.toContain(`.copilotKitSidebar ${selector}`);
      expect(css).toContain(`:where(.copilotKitSidebar) ${selector}`);
    }
  });
});