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

Support dark mode and remove dev script tag

This commit is contained in:
RMidhunSuresh 2022-04-12 20:39:04 +05:30
parent 0a95eb0940
commit 743bd0db1c
1 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
scripts/build-plugins/rollup-plugin-build-themes.js
View File

@ -111,6 +111,7 @@ module.exports = function buildThemes(options) {
},
async buildStart() {
if (isDevelopment) { return; }
const { manifestLocations } = options;
for (const location of manifestLocations) {
manifest = require(`${location}/manifest.json`);
@ -130,7 +131,7 @@ module.exports = function buildThemes(options) {
// emit the css as built theme bundle
this.emitFile({
type: "chunk",
id: `${location}/theme.css?variant=${variant}`,
id: `${location}/theme.css?variant=${variant}${details.dark? "&dark=true": ""}`,
fileName,
});
}
@ -145,7 +146,7 @@ module.exports = function buildThemes(options) {
resolveId(id) {
if (id.startsWith(virtualModuleId)) {
return isDevelopment? '\0' + id: false;
return '\0' + id;
}
},
@ -165,7 +166,9 @@ module.exports = function buildThemes(options) {
switch (file) {
case "index.js": {
const location = findLocationFromThemeName(theme, options.manifestLocations);
return `import "${path.resolve(`${location}/theme.css`)}";` +
const manifest = findManifestFromThemeName(theme, options.manifestLocations);
const isDark = manifest.values.variants[variant].dark;
return `import "${path.resolve(`${location}/theme.css`)}${isDark? "?dark=true": ""}";` +
`import "@theme/${theme}/${variant}/variables.css"`;
}
case "variables.css": {
@ -178,7 +181,7 @@ module.exports = function buildThemes(options) {
}
}
else {
const result = id.match(/(.+)\/theme.css\?variant=(.+)/);
const result = id.match(/(.+)\/theme.css\?variant=([^&]+)/);
if (result) {
const [, location, variant] = result;
const cssSource = await readCSSSource(location);
@ -189,6 +192,18 @@ module.exports = function buildThemes(options) {
}
},
transform(code, id) {
if (isDevelopment) {
return;
}
// Removes develop-only script tag; this cannot be done in transformIndexHtml hook.
const devScriptTag = /<script type="module"> import "@theme\/.+"; <\/script>/;
if (id.endsWith("index.html")) {
const htmlWithoutDevScript = code.replace(devScriptTag, "");
return htmlWithoutDevScript
}
},
transformIndexHtml(_, ctx) {
if (isDevelopment) {
// Don't add default stylesheets to index.html on dev
@ -223,7 +238,7 @@ module.exports = function buildThemes(options) {
}
},
];
},
},
generateBundle(_, bundle) {
const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle);