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; }

Note that this will return an inline STYLE tag. This might have unintended affects to your code, since it is technically invalid CSS. If you would rather inject styles in the HEAD tag -- either inline or remote -- when use global-css.

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.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;