-
Notifications
You must be signed in to change notification settings - Fork 387
/
zass.mjs
69 lines (62 loc) · 2.21 KB
/
zass.mjs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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);
},
});