@hdyzen/rollup-plugin-userscript-css

Rollup plugin to inject CSS into userscripts via GM_addStyle.

Installation

npm install -D @hdyzen/rollup-plugin-userscript-css

pnpm add -D @hdyzen/rollup-plugin-userscript-css

yarn add -D @hdyzen/rollup-plugin-userscript-css

bun add -d @hdyzen/rollup-plugin-userscript-css

Usage

import css from "@hdyzen/rollup-plugin-userscript-css";

export default {
  input: "src/index.js",
  plugins: [
    css(),
  ],
};

Any .css file imported in your project will be collected and appended to the output bundle.

import "./styles.css";

Inject Modes

GM_addStyle (default)

Uses the userscript manager's built-in GM_addStyle API.

css() // or css({ injectMode: "GM_addStyle" })

Output:

// ... your bundle code ...

GM_addStyle("body {\n  color: red;\n}");

native

Injects CSS via a <style> element. No userscript manager API needed.

css({ injectMode: "native" })

Output:

// ... your bundle code ...

{
  const style = document.createElement("style");
  style.textContent = "body {\n  color: red;\n}";
  (document.head || document.documentElement).appendChild(style);
}

polyfill

Uses GM_addStyle if available, falls back to <style> element.

css({ injectMode: "polyfill" })

Output:

// ... your bundle code ...

if (typeof GM_addStyle === "function") {
  GM_addStyle("body {\n  color: red;\n}");
} else {
  const style = document.createElement("style");
  style.textContent = "body {\n  color: red;\n}";
  (document.head || document.documentElement).appendChild(style);
}

API

css(options?): Plugin

| Option | Type | Default | Description | |---|---|---|---| | injectMode | "native" \| "polyfill" \| "GM_addStyle" | "GM_addStyle" | How CSS is injected into the page |

License

MIT