Merge pull request #18355 from shariquerik/vue-css-refactor

This commit is contained in:
Shariq Ansari 2022-10-11 18:04:17 +05:30 committed by GitHub
commit 0d6b06b244
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 21 deletions

View file

@ -156,7 +156,7 @@ function build_assets_for_apps(apps, files) {
style_file_map[output_name] = file;
rtl_style_file_map[output_name.replace("/css/", "/css-rtl/")] = file;
} else {
file_map[output_name.replace("/js/", "/")] = file;
file_map[output_name] = file;
}
}
let build = build_files({
@ -220,8 +220,7 @@ function get_files_to_build(files) {
function build_files({ files, outdir }) {
let build_plugins = [vue(), html_plugin, build_cleanup_plugin, vue_style_plugin];
let entry_names = "[dir]/[ext]/[name].[hash]";
return esbuild.build(get_build_options(files, outdir, build_plugins, entry_names));
return esbuild.build(get_build_options(files, outdir, build_plugins));
}
function build_style_files({ files, outdir, rtl_style = false }) {
@ -243,11 +242,10 @@ function build_style_files({ files, outdir, rtl_style = false }) {
return esbuild.build(get_build_options(files, outdir, build_plugins));
}
function get_build_options(files, outdir, plugins, entry_names) {
let entryNames = entry_names || "[dir]/[name].[hash]";
function get_build_options(files, outdir, plugins) {
return {
entryPoints: files,
entryNames,
entryNames: "[dir]/[name].[hash]",
target: ["es2017"],
outdir,
sourcemap: true,
@ -383,16 +381,6 @@ async function write_assets_json(metafile) {
key = `rtl_${key}`;
}
out[key] = asset_path;
} else if (Object.keys(info.inputs).length !== 0) {
for (let input in info.inputs) {
if (input.includes(".vue?type=style")) {
// remove hash from css file name
let key = path.basename(asset_path);
key = key.split(".css")[0];
key = key.substring(0, key.lastIndexOf(".")) + ".css";
out[key] = asset_path;
}
}
}
}

View file

@ -18,9 +18,9 @@ module.exports = {
return fs
.readFile(filepath, "utf-8")
.then((content) => {
content = scrub_html_template(content);
content = JSON.stringify(scrub_html_template(content));
return {
contents: `\n\tfrappe.templates['${filename}'] = \`${content}\`;\n`,
contents: `\n\tfrappe.templates['${filename}'] = ${content};\n`,
watchFiles: [filepath],
};
})

View file

@ -13,10 +13,21 @@ module.exports = {
let asset_path = "/" + path.relative(sites_path, out.path);
let dir = path.dirname(out.path);
if (out.path.endsWith(".js") && keys.includes(asset_path)) {
let bundle_css = files[asset_path];
let include_css = '\nfrappe.require("' + bundle_css + '");\n';
let modified = include_css + out.text;
let name = out.path.split(".bundle.")[0];
name = path.basename(name);
let index = result.outputFiles.findIndex((f) => {
return f.path.endsWith(".css") && f.path.includes(`/${name}.bundle.`);
});
let css_data = JSON.stringify(result.outputFiles[index].text);
let modified = `frappe.dom.set_style(${css_data});\n${out.text}`;
out.contents = Buffer.from(modified);
result.outputFiles.splice(index, 1);
if (result.outputFiles[index - 1].path.endsWith(".css.map")) {
result.outputFiles.splice(index - 1, 1);
}
}
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir, { recursive: true });