'use strict'; const BUILDERS = Object.assign(Object.create(null), { default: { post(sections, vars) { require(['/js/sections-util']); /* global styleCodeEmpty */ let varDef = Object.keys(vars).map(k => ` --${k}: ${vars[k].value};\n`).join(''); if (!varDef) return; varDef = ':root {\n' + varDef + '}\n'; for (const section of sections) { if (!styleCodeEmpty(section.code)) { section.code = varDef + section.code; } } }, }, stylus: { pre(source, vars) { require(['/vendor/stylus-lang-bundle/stylus-renderer.min']); /* global StylusRenderer */ return new Promise((resolve, reject) => { const varDef = Object.keys(vars).map(key => `${key} = ${vars[key].value};\n`).join(''); new StylusRenderer(varDef + source) .render((err, output) => err ? reject(err) : resolve(output)); }); }, }, less: { async pre(source, vars) { if (!self.less) { self.less = { logLevel: 0, useFileCache: false, }; } require(['/vendor/less-bundle/less.min']); /* global less */ const varDefs = Object.keys(vars).map(key => `@${key}:${vars[key].value};\n`).join(''); return (await less.render(varDefs + source)).css; }, }, uso: { async pre(source, vars) { require(['/js/color/color-converter']); /* global colorConverter */ const pool = new Map(); return doReplace(source); function getValue(name, rgbName) { if (!vars.hasOwnProperty(name)) { if (name.endsWith('-rgb')) { return getValue(name.slice(0, -4), name); } return null; } const {type, value} = vars[name]; switch (type) { case 'color': { let color = pool.get(rgbName || name); if (color == null) { color = colorConverter.parse(value); if (color) { if (color.type === 'hsl') { color = colorConverter.HSVtoRGB(colorConverter.HSLtoHSV(color)); } const {r, g, b} = color; color = rgbName ? `${r}, ${g}, ${b}` : `#${(0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1)}`; } // the pool stores `false` for bad colors to differentiate from a yet unknown color pool.set(rgbName || name, color || false); } return color || null; } case 'dropdown': case 'select': // prevent infinite recursion pool.set(name, ''); return doReplace(value); } return value; } function doReplace(text) { return text.replace(/\/\*\[\[([\w-]+)\]\]\*\//g, (match, name) => { if (!pool.has(name)) { const value = getValue(name); pool.set(name, value === null ? match : value); } return pool.get(name); }); } }, }, }); /* exported compileUsercss */ async function compileUsercss(preprocessor, code, vars) { let builder = BUILDERS[preprocessor]; if (!builder) { builder = BUILDERS.default; if (preprocessor != null) console.warn(`Unknown preprocessor "${preprocessor}"`); } // simplify vars by merging `va.default` to `va.value`, so BUILDER don't // need to test each va's default value. vars = Object.entries(vars || {}).reduce((output, [key, va]) => { // TODO: handle customized image const prop = va.value == null ? 'default' : 'value'; const value = /^(select|dropdown|image)$/.test(va.type) ? va.options.find(o => o.name === va[prop]).value : /^(number|range)$/.test(va.type) && va.units ? va[prop] + va.units : va[prop]; output[key] = Object.assign({}, va, {value}); return output; }, {}); if (builder.pre) { code = await builder.pre(code, vars); } require(['/js/moz-parser']); /* global extractSections */ const res = extractSections({code}); if (builder.post) { builder.post(res.sections, vars); } return res; }