Add CSS

Command: add-css

Description: Add a block of CSS to the embedded content.

Arguments

• css : The CSS to add.
• url : A URL to fetch CSS from.

Notes

You can run this command multiple times.

add-css -css:"td { text-align: left }"
add-css -css:"th { border-bottom: solid 2px black; }"

If you provide a url parameter, it does not link that stylesheet, it retrieves it and puts it inline. Note that this will result in a style block which will cause the embedder to move up to medium isolation and create a shadow root to isolate styles. This means that you'll lose any styles that were originally in the content.

Using tokens is a good way to write larger stretches of CSS:

add-css -css:$css

$css
td { text-align: left }
th { border-bottom: solid 2px black; }

Source Code

async function addCss(working, command, p) {
  let css = command.getArg("css");
  const url = command.getArg("url");
  if (url) {
    const res = await fetch(url);
    if (!res.ok) {
      throw new Error(
        `Failed to fetch CSS from ${url}: ${res.status} ${res.statusText}`
      );
    }
    css = await res.text();
  }
  if (!css) {
    throw new Error("No CSS provided.");
  }
  return working.text + "\n" + ``;
}
addCss.title = "Add CSS";
addCss.description = "Add a block of CSS to the embedded content.";
addCss.args = [
  { name: "css", type: "string", description: "The CSS to add." },
  { name: "url", type: "string", description: "A URL to fetch CSS from." },
];
addCss.allowedContentTypes = ["html"];
addCss.parseValidators = [
  {
    test: (command) => {
      return command.hasArg("css") || command.hasArg("url");
    },
    message:
      "You must provide a 'css' argument or a 'url' argument with a URL to a CSS file.",
  },
];

export default addCss;