Move CSS to a @layer

[hesxenon]

Search Terms

css layer

Problem

Currently it's kinda "hard" to override styles in custom css, especially if you want to include your own libraries in typedoc.

Suggested Solution

wrapping all css declarations in a

@layer typedoc {
  /* typedoc styles */
}

so that consumers can do

@layer my-library, typedoc;

Current workaround

// plugin.js
export function load(
 /**
  * @type import("typedoc").Application
  */
  app
) {
  app.renderer.hooks.on("head.end", (ctx) =>
      JSX.createElement(JSX.Raw, {
        html: `<script async>document.head.querySelector('link[href*="style.css"]').remove()</script>`,
      }),
  );
}

with

/* custom.css */
@import url("style.css") layer(typedoc);
@layer my-library, typedoc;

and

{
  "$schema": "https://typedoc.org/schema.json",
  "customCss": "custom.css",
  "plugin": ["plugin.js"],
}

[Gerrit0]

Easy enough of a change to do, TIL about @layer!