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
70
71
72
// import autoprefixer from "https://esm.sh/autoprefixer";
// import postcss from "https://esm.sh/postcss";
import sass from "npm:sass";
const cors = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "*",
};
const getJSON = async url => (await fetch(url)).json();
const getText = async url => (await fetch(url)).text();
function generateSCSS(vars) {
let scss = [];
for (const v in vars)
if (vars[v].type === "string")
scss.push(`$cuetip-${v}: "${vars[v].value}";`);
else
scss.push(`$cuetip-${v}: ${vars[v].value};`);
scss.push("");
return scss.join("\n");
}
async function generateBanner() {
const pkg = await getJSON("https://raw.githubusercontent.com/Pinjasaur/cuetip/master/package.json");
return [
`/*! ${pkg.name} v${pkg.version} custom built on ${
new Date().toISOString()
} | ${pkg.license} License | ${pkg.homepage} */`,
"",
].join("\n");
}
export default async function(req: Request): Promise<Response> {
if (req.method === "OPTIONS") {
return new Response(null, {
status: 204, // No Content
headers: {
...cors,
},
});
}
if (req.method !== "POST") {
return Response.json({ error: "This val responds to POST requests." }, {
status: 400,
});
}
const body = await req.json();
if (body.vars === undefined || typeof body.vars !== "object")
return Response.json({ error: "No SCSS variables!" }, { status: 400 });
try {
const scss = generateSCSS(body.vars);
const cuetip = await getText("https://raw.githubusercontent.com/Pinjasaur/cuetip/master/src/cuetip.scss");
const { css } = sass.compileString(scss + cuetip, { style: "compressed" });
const banner = await generateBanner();
// TODO: doesn't work, even with esm.sh workaround (requires filesystem access)
// const prefixed = postcss([autoprefixer]).process(css).css;
return Response.json({
css: (banner + css),
});
} catch (err) {
return Response.json({ error: err.message }, {
status: 400,
});
}
}