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

View File

@ -111,6 +111,7 @@ module.exports = function buildThemes(options) {
}, },
async buildStart() { async buildStart() {
if (isDevelopment) { return; }
const { manifestLocations } = options; const { manifestLocations } = options;
for (const location of manifestLocations) { for (const location of manifestLocations) {
manifest = require(`${location}/manifest.json`); manifest = require(`${location}/manifest.json`);
@ -130,7 +131,7 @@ module.exports = function buildThemes(options) {
// emit the css as built theme bundle // emit the css as built theme bundle
this.emitFile({ this.emitFile({
type: "chunk", type: "chunk",
id: `${location}/theme.css?variant=${variant}`, id: `${location}/theme.css?variant=${variant}${details.dark? "&dark=true": ""}`,
fileName, fileName,
}); });
} }
@ -145,7 +146,7 @@ module.exports = function buildThemes(options) {
resolveId(id) { resolveId(id) {
if (id.startsWith(virtualModuleId)) { if (id.startsWith(virtualModuleId)) {
return isDevelopment? '\0' + id: false; return '\0' + id;
} }
}, },
@ -165,7 +166,9 @@ module.exports = function buildThemes(options) {
switch (file) { switch (file) {
case "index.js": { case "index.js": {
const location = findLocationFromThemeName(theme, options.manifestLocations); 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"`; `import "@theme/${theme}/${variant}/variables.css"`;
} }
case "variables.css": { case "variables.css": {
@ -178,7 +181,7 @@ module.exports = function buildThemes(options) {
} }
} }
else { 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;
const cssSource = await readCSSSource(location); 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) { transformIndexHtml(_, ctx) {
if (isDevelopment) { if (isDevelopment) {
// Don't add default stylesheets to index.html on dev // Don't add default stylesheets to index.html on dev
@ -223,7 +238,7 @@ module.exports = function buildThemes(options) {
} }
}, },
]; ];
}, },
generateBundle(_, bundle) { generateBundle(_, bundle) {
const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle); const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle);