Support theming in dev server
This commit is contained in:
parent
a6b6fef6d2
commit
ff98ef4465
1 changed files with 137 additions and 61 deletions
|
@ -13,6 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
See the License for the specific language governing permissions and
|
See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
async function readCSSSource(location) {
|
async function readCSSSource(location) {
|
||||||
const fs = require("fs").promises;
|
const fs = require("fs").promises;
|
||||||
|
@ -22,8 +23,35 @@ async function readCSSSource(location) {
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function appendVariablesToCSS(variables, cssSource) {
|
function getRootSectionWithVariables(variables) {
|
||||||
return cssSource + `:root{\n${Object.entries(variables).reduce((acc, [key, value]) => acc + `--${key}: ${value};\n`, "")} }\n\n`;
|
return `:root{\n${Object.entries(variables).reduce((acc, [key, value]) => acc + `--${key}: ${value};\n`, "")} }\n\n`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function appendVariablesToCSS(variables, cssSource) {
|
||||||
|
return cssSource + getRootSectionWithVariables(variables);
|
||||||
|
}
|
||||||
|
|
||||||
|
function findLocationFromThemeName(name, locations) {
|
||||||
|
const themeLocation = locations.find(location => {
|
||||||
|
const manifest = require(`${location}/manifest.json`);
|
||||||
|
if (manifest.name === name) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (!themeLocation) {
|
||||||
|
throw new Error(`Cannot find location from theme name "${name}"`);
|
||||||
|
}
|
||||||
|
return themeLocation;
|
||||||
|
}
|
||||||
|
|
||||||
|
function findManifestFromThemeName(name, locations) {
|
||||||
|
for (const location of locations) {
|
||||||
|
const manifest = require(`${location}/manifest.json`);
|
||||||
|
if (manifest.name === name) {
|
||||||
|
return manifest;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
throw new Error(`Cannot find manifest from theme name "${name}"`);
|
||||||
}
|
}
|
||||||
|
|
||||||
function parseBundle(bundle) {
|
function parseBundle(bundle) {
|
||||||
|
@ -68,11 +96,20 @@ function parseBundle(bundle) {
|
||||||
|
|
||||||
module.exports = function buildThemes(options) {
|
module.exports = function buildThemes(options) {
|
||||||
let manifest, variants, defaultDark, defaultLight;
|
let manifest, variants, defaultDark, defaultLight;
|
||||||
|
let isDevelopment = false;
|
||||||
|
const virtualModuleId = '@theme/'
|
||||||
|
const resolvedVirtualModuleId = '\0' + virtualModuleId;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
name: "build-themes",
|
name: "build-themes",
|
||||||
enforce: "pre",
|
enforce: "pre",
|
||||||
|
|
||||||
|
configResolved(config) {
|
||||||
|
if (config.command === "serve") {
|
||||||
|
isDevelopment = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
async buildStart() {
|
async buildStart() {
|
||||||
const { manifestLocations } = options;
|
const { manifestLocations } = options;
|
||||||
for (const location of manifestLocations) {
|
for (const location of manifestLocations) {
|
||||||
|
@ -106,7 +143,41 @@ module.exports = function buildThemes(options) {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
resolveId(id) {
|
||||||
|
if (id.startsWith(virtualModuleId)) {
|
||||||
|
return isDevelopment? '\0' + id: false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
async load(id) {
|
async load(id) {
|
||||||
|
if (isDevelopment) {
|
||||||
|
if (id.startsWith(resolvedVirtualModuleId)) {
|
||||||
|
let [theme, variant, file] = id.substr(resolvedVirtualModuleId.length).split("/");
|
||||||
|
if (theme === "default") {
|
||||||
|
theme = "Element";
|
||||||
|
}
|
||||||
|
if (!variant || variant === "default") {
|
||||||
|
variant = "light";
|
||||||
|
}
|
||||||
|
if (!file) {
|
||||||
|
file = "index.js";
|
||||||
|
}
|
||||||
|
switch (file) {
|
||||||
|
case "index.js": {
|
||||||
|
const location = findLocationFromThemeName(theme, options.manifestLocations);
|
||||||
|
return `import "${path.resolve(`${location}/theme.css`)}";` +
|
||||||
|
`import "@theme/${theme}/${variant}/variables.css"`;
|
||||||
|
}
|
||||||
|
case "variables.css": {
|
||||||
|
const manifest = findManifestFromThemeName(theme, options.manifestLocations);
|
||||||
|
const variables = manifest.values.variants[variant].variables;
|
||||||
|
const css = getRootSectionWithVariables(variables);
|
||||||
|
return css;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
const result = id.match(/(.+)\/theme.css\?variant=(.+)/);
|
const result = id.match(/(.+)\/theme.css\?variant=(.+)/);
|
||||||
if (result) {
|
if (result) {
|
||||||
const [, location, variant] = result;
|
const [, location, variant] = result;
|
||||||
|
@ -115,9 +186,14 @@ module.exports = function buildThemes(options) {
|
||||||
return await appendVariablesToCSS(config.variables, cssSource);
|
return await appendVariablesToCSS(config.variables, cssSource);
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
transformIndexHtml(_, ctx) {
|
transformIndexHtml(_, ctx) {
|
||||||
|
if (isDevelopment) {
|
||||||
|
// Don't add default stylesheets to index.html on dev
|
||||||
|
return;
|
||||||
|
}
|
||||||
let darkThemeLocation, lightThemeLocation;
|
let darkThemeLocation, lightThemeLocation;
|
||||||
for (const [, bundle] of Object.entries(ctx.bundle)) {
|
for (const [, bundle] of Object.entries(ctx.bundle)) {
|
||||||
if (bundle.name === defaultDark) {
|
if (bundle.name === defaultDark) {
|
||||||
|
|
Reference in a new issue