zass.mjs

import path from "path";
import fs from "fs";
import sass from "rollup-plugin-sass";

const manifestPath = path.resolve("manifest.json");
const assetsPath = path.resolve("assets");

const data = fs.readFileSync(manifestPath, "utf-8");
const manifest = JSON.parse(data);
const variables = manifest.settings.reduce(
  (variables, setting) =>
    variables.concat(setting.variables.map((variable) => variable.identifier)),
  []
);
const filenames = fs.readdirSync(assetsPath);

// Make sure all assets have an allowed filename that can be used as a variable
for (const file of filenames) {
  if (file === ".gitkeep") continue;
  const extname = path.extname(file);
  const basename = path.basename(file, extname).toLowerCase();
  if (basename.match(/[^a-z0-9-_+.]/)) {
    throw new Error(
      `The asset "${file}" has illegal characters in its name. Filenames should only have alpha-numerical characters, ., _, -, and +`
    );
  } else {
    variables.push(
      `assets-${basename.replace(/\+|\./g, "-")}-${extname.split(".").pop()}`
    );
  }
}

// The preamble assigns all the ignored variables to an escaped version of
// the variable name itself, e.g.
//
//   $foo: \$foo;
//
// This makes Sass replace occurrences of the variable with the escaped name.
//
// Afterwards, the escaped names can be unescaped, yielding a CSS file with
// the ignored variables intact.
const preamble = variables
  .map((variable) => `$${variable}: \\$${variable};`)
  .join("\n");

// Unescapes all escaped variables
const unescapeVariables = (css) => css.replace(/\\\$/g, "$");

// Converts darken and lighten filter so that zass will process
// them and users can see them as normal sass css function in the editor.
//
// Note: we are prefixing them with `zass-` because we don't want
// the Sass compiler to execute them since we want the end-users
// to see those functions in the editor when customizing their template.
function convertZassFunctions(css) {
  return css
    .replace(/zass-lighten/g, "lighten")
    .replace(/zass-darken/g, "darken");
}

export default () => [
  sass({
    output: "style.css",
    options: { data: preamble },
    processor: (css) => {
      const unescaped = unescapeVariables(css);
      return convertZassFunctions(unescaped);
    },
  }),
];