Merge pull request #18355 from shariquerik/vue-css-refactor
This commit is contained in:
commit
0d6b06b244
3 changed files with 20 additions and 21 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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],
|
||||
};
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue