mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

Get the theme-collection id from manifest

Browse source
This commit is contained in:
RMidhunSuresh 2022-06-23 15:06:22 +05:30
parent fbdd512e06
commit d688fa4737
3 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -123,6 +123,7 @@ module.exports = function buildThemes(options) {
let isDevelopment = false; let isDevelopment = false;
const virtualModuleId = '@theme/' const virtualModuleId = '@theme/'
const resolvedVirtualModuleId = '\0' + virtualModuleId; const resolvedVirtualModuleId = '\0' + virtualModuleId;
const themeToManifestLocation = new Map();
return { return {
name: "build-themes", name: "build-themes",
@ -137,20 +138,22 @@ module.exports = function buildThemes(options) {
async buildStart() { async buildStart() {
if (isDevelopment) { return; } if (isDevelopment) { return; }
const { themeConfig } = options; const { themeConfig } = options;
for (const [name, location] of Object.entries(themeConfig.themes)) { for (const location of themeConfig.themes) {
manifest = require(`${location}/manifest.json`); manifest = require(`${location}/manifest.json`);
const themeCollectionId = manifest.id;
themeToManifestLocation.set(themeCollectionId, location);
variants = manifest.values.variants; variants = manifest.values.variants;
for (const [variant, details] of Object.entries(variants)) { for (const [variant, details] of Object.entries(variants)) {
const fileName = `theme-${name}-${variant}.css`; const fileName = `theme-${themeCollectionId}-${variant}.css`;
if (name === themeConfig.default && details.default) { if (themeCollectionId === themeConfig.default && details.default) {
// This is the default theme, stash the file name for later // This is the default theme, stash the file name for later
if (details.dark) { if (details.dark) {
defaultDark = fileName; defaultDark = fileName;
defaultThemes["dark"] = `${name}-${variant}`; defaultThemes["dark"] = `${themeCollectionId}-${variant}`;
} }
else { else {
defaultLight = fileName; defaultLight = fileName;
defaultThemes["light"] = `${name}-${variant}`; defaultThemes["light"] = `${themeCollectionId}-${variant}`;
} }
} }
// emit the css as built theme bundle // emit the css as built theme bundle
@ -164,7 +167,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-${name}-runtime.css`, fileName: `theme-${themeCollectionId}-runtime.css`,
}); });
} }
}, },
@ -187,7 +190,7 @@ module.exports = function buildThemes(options) {
if (theme === "default") { if (theme === "default") {
theme = options.themeConfig.default; theme = options.themeConfig.default;
} }
const location = options.themeConfig.themes[theme]; const location = themeToManifestLocation.get(theme);
const manifest = require(`${location}/manifest.json`); const manifest = require(`${location}/manifest.json`);
const variants = manifest.values.variants; const variants = manifest.values.variants;
if (!variant || variant === "default") { if (!variant || variant === "default") {

1
src/platform/web/ui/css/themes/element/manifest.json
View file

@ -1,6 +1,7 @@
{ {
"version": 1, "version": 1,
"name": "Element", "name": "Element",
"id": "element",
"values": { "values": {
"variants": { "variants": {
"light": { "light": {

4
vite.config.js
View file

@ -33,9 +33,7 @@ export default defineConfig(({mode}) => {
plugins: [ plugins: [
themeBuilder({ themeBuilder({
themeConfig: { themeConfig: {
themes: { themes: ["./src/platform/web/ui/css/themes/element"],
element: "./src/platform/web/ui/css/themes/element",
},
default: "element", default: "element",
}, },
compiledVariables, compiledVariables,