first load

zass.mjs

@@ -0,0 +1,69 @@
+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 occurences 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 user 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-c compiler to execute them since we want the end-users
+// to see those function 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);
+    },
+  });