Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use new theme option in vite-config

Browse source
This commit is contained in:
RMidhunSuresh 2022-04-13 12:40:49 +05:30
parent 743bd0db1c
commit 14523ecc5d
1 changed files with 10 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
scripts/build-plugins/rollup-plugin-build-themes.js
View file

@ -31,29 +31,6 @@ function appendVariablesToCSS(variables, cssSource) {
return cssSource + getRootSectionWithVariables(variables); 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) {
const chunkMap = new Map(); const chunkMap = new Map();
const assetMap = new Map(); const assetMap = new Map();
@ -112,15 +89,14 @@ module.exports = function buildThemes(options) {
async buildStart() { async buildStart() {
if (isDevelopment) { return; } if (isDevelopment) { return; }
const { manifestLocations } = options; const { themeConfig } = options;
for (const location of manifestLocations) { for (const [name, location] of Object.entries(themeConfig.themes)) {
manifest = require(`${location}/manifest.json`); manifest = require(`${location}/manifest.json`);
variants = manifest.values.variants; variants = manifest.values.variants;
const themeName = manifest.name;
for (const [variant, details] of Object.entries(variants)) { for (const [variant, details] of Object.entries(variants)) {
const fileName = `theme-${themeName}-${variant}.css`; const fileName = `theme-${name}-${variant}.css`;
if (details.default) { if (name === themeConfig.default && details.default) {
// This is one of the default variants for this theme. // This is the default theme, stash the file name for later
if (details.dark) { if (details.dark) {
defaultDark = fileName; defaultDark = fileName;
} }
@ -139,7 +115,7 @@ module.exports = function buildThemes(options) {
this.emitFile({ this.emitFile({
type: "chunk", type: "chunk",
id: `${location}/theme.css?type=runtime`, id: `${location}/theme.css?type=runtime`,
fileName: `theme-${themeName}-runtime.css`, fileName: `theme-${name}-runtime.css`,
}); });
} }
}, },
@ -155,7 +131,7 @@ module.exports = function buildThemes(options) {
if (id.startsWith(resolvedVirtualModuleId)) { if (id.startsWith(resolvedVirtualModuleId)) {
let [theme, variant, file] = id.substr(resolvedVirtualModuleId.length).split("/"); let [theme, variant, file] = id.substr(resolvedVirtualModuleId.length).split("/");
if (theme === "default") { if (theme === "default") {
theme = "Element"; theme = "element";
} }
if (!variant || variant === "default") { if (!variant || variant === "default") {
variant = "light"; variant = "light";
@ -163,16 +139,15 @@ module.exports = function buildThemes(options) {
if (!file) { if (!file) {
file = "index.js"; file = "index.js";
} }
const location = options.themeConfig.themes[theme];
const manifest = require(`${location}/manifest.json`);
switch (file) { switch (file) {
case "index.js": { case "index.js": {
const location = findLocationFromThemeName(theme, options.manifestLocations);
const manifest = findManifestFromThemeName(theme, options.manifestLocations);
const isDark = manifest.values.variants[variant].dark; const isDark = manifest.values.variants[variant].dark;
return `import "${path.resolve(`${location}/theme.css`)}${isDark? "?dark=true": ""}";` + return `import "${path.resolve(`${location}/theme.css`)}${isDark? "?dark=true": ""}";` +
`import "@theme/${theme}/${variant}/variables.css"`; `import "@theme/${theme}/${variant}/variables.css"`;
} }
case "variables.css": { case "variables.css": {
const manifest = findManifestFromThemeName(theme, options.manifestLocations);
const variables = manifest.values.variants[variant].variables; const variables = manifest.values.variants[variant].variables;
const css = getRootSectionWithVariables(variables); const css = getRootSectionWithVariables(variables);
return css; return css;