From d14f62387e0d3cc1f0cc85d941c18d760e8db20a Mon Sep 17 00:00:00 2001 From: arggh <> Date: Mon, 19 Jul 2021 23:03:23 +0300 Subject: [PATCH 1/4] Fix CSS handling flow Include CSS in merged stylesheets if options.css == false. This is in accordance with the purpose of the original Svelte compiler config `css`, which in essence determines if the CSS should be part of the component's JS or output as CSS to be included in a static stylesheet somewhere. --- MelteCompiler.js | 51 +++++++++++++++++++++++++++++++++++++----------- 1 file changed, 40 insertions(+), 11 deletions(-) diff --git a/MelteCompiler.js b/MelteCompiler.js index 8dfabb3..ed96892 100644 --- a/MelteCompiler.js +++ b/MelteCompiler.js @@ -141,14 +141,22 @@ SvelteCompiler = class SvelteCompiler extends CachingCompiler { // The compile result returned from `compileOneFile` can be an array or an // object. If the processed HTML file is not a Svelte component, the result is // an array of HTML sections (head and/or body). Otherwise, it's an object - // with JavaScript from a compiled Svelte component. + // with JavaScript from a compiled Svelte cmponent. compileResultSize(result) { let size = 0; if (Array.isArray(result)) { result.forEach(section => size += section.data.length); } else { - size = result.data.length + result.sourceMap.toString().length; + const { js, css } = result; + + if (js && js.data) { + size += js.data.length + js.sourceMap.toString().length; + } + + if (css && css.data) { + size += css.data.length + css.sourceMap.toString().length; + } } return size; @@ -195,7 +203,13 @@ SvelteCompiler = class SvelteCompiler extends CachingCompiler { file.addJavaScript({ path: file.getPathInPackage() }, async () => { - return await getResult(); + const { js, css } = await getResult(); + + if (css) { + file.addStylesheet(css); + } + + return js; }); } } @@ -203,6 +217,7 @@ SvelteCompiler = class SvelteCompiler extends CachingCompiler { async compileOneFile(file) { // Search for head and body tags if lazy compilation isn't supported. // Otherwise, the file has already been parsed in `compileOneFileLater`. + if (!file.supportsLazyCompilation) { const sections = this.getHtmlSections(file); @@ -344,12 +359,10 @@ SvelteCompiler = class SvelteCompiler extends CachingCompiler { : { code: processedCode }; }, style: async ({ content, attributes }) => { - if (this.postcss) { - if (attributes.lang == 'postcss') { - return { - code: await this.postcss.process(content, { from: undefined }) - }; - } + if (this.postcss && (!attributes.lang || attributes.lang === 'postcss')) { + return { + code: await this.postcss.process(content, { from: undefined }) + }; } } }))); @@ -377,7 +390,6 @@ SvelteCompiler = class SvelteCompiler extends CachingCompiler { let compiledResult; try { compiledResult = this.svelte.compile(code, svelteOptions); - if (map) { compiledResult.js.map = this.combineSourceMaps(map, compiledResult.js.map); } @@ -403,12 +415,29 @@ SvelteCompiler = class SvelteCompiler extends CachingCompiler { ); } + let css; + + if (svelteOptions.css === false && compiledResult.css) { + css = { + path: file.getPathInPackage(), + sourcePath: file.getPathInPackage(), + data: compiledResult.css.code, + sourceMap: compiledResult.css.map, + lazy: false + }; + } + try { - return this.transpileWithBabel( + const js = this.transpileWithBabel( compiledResult.js, path, file ); + + return { + js, + css + } } catch (e) { // Throw unknown errors. if (!e.start) { From 53f00395eba6c6f2dcaee9740c63e294984f4ab4 Mon Sep 17 00:00:00 2001 From: arggh <> Date: Mon, 19 Jul 2021 23:06:17 +0300 Subject: [PATCH 2/4] Cleanup --- MelteCompiler.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/MelteCompiler.js b/MelteCompiler.js index ed96892..3279622 100644 --- a/MelteCompiler.js +++ b/MelteCompiler.js @@ -141,7 +141,7 @@ SvelteCompiler = class SvelteCompiler extends CachingCompiler { // The compile result returned from `compileOneFile` can be an array or an // object. If the processed HTML file is not a Svelte component, the result is // an array of HTML sections (head and/or body). Otherwise, it's an object - // with JavaScript from a compiled Svelte cmponent. + // with JavaScript from a compiled Svelte component. compileResultSize(result) { let size = 0; @@ -149,7 +149,7 @@ SvelteCompiler = class SvelteCompiler extends CachingCompiler { result.forEach(section => size += section.data.length); } else { const { js, css } = result; - + if (js && js.data) { size += js.data.length + js.sourceMap.toString().length; } @@ -208,7 +208,7 @@ SvelteCompiler = class SvelteCompiler extends CachingCompiler { if (css) { file.addStylesheet(css); } - + return js; }); } @@ -217,7 +217,7 @@ SvelteCompiler = class SvelteCompiler extends CachingCompiler { async compileOneFile(file) { // Search for head and body tags if lazy compilation isn't supported. // Otherwise, the file has already been parsed in `compileOneFileLater`. - + if (!file.supportsLazyCompilation) { const sections = this.getHtmlSections(file); From 6615b195e4180384c58473c2c784f198b72e4ad4 Mon Sep 17 00:00:00 2001 From: arggh <> Date: Fri, 23 Jul 2021 13:05:29 +0300 Subject: [PATCH 3/4] Fix style preprocessor return value It is now compatible with both version before and after 3.30.0 https://github.com/sveltejs/svelte/pull/5584 --- MelteCompiler.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/MelteCompiler.js b/MelteCompiler.js index 3279622..4fc88c7 100644 --- a/MelteCompiler.js +++ b/MelteCompiler.js @@ -360,8 +360,10 @@ SvelteCompiler = class SvelteCompiler extends CachingCompiler { }, style: async ({ content, attributes }) => { if (this.postcss && (!attributes.lang || attributes.lang === 'postcss')) { + const { css: code } = await this.postcss.process(content, { from: undefined }); + return { - code: await this.postcss.process(content, { from: undefined }) + code }; } } From 23358458721e4dc23f5f410db149daf884386b7d Mon Sep 17 00:00:00 2001 From: arggh <> Date: Thu, 12 Aug 2021 21:16:13 +0300 Subject: [PATCH 4/4] Revert eager PostCSS processing as requested --- MelteCompiler.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MelteCompiler.js b/MelteCompiler.js index 4fc88c7..9474952 100644 --- a/MelteCompiler.js +++ b/MelteCompiler.js @@ -359,7 +359,7 @@ SvelteCompiler = class SvelteCompiler extends CachingCompiler { : { code: processedCode }; }, style: async ({ content, attributes }) => { - if (this.postcss && (!attributes.lang || attributes.lang === 'postcss')) { + if (this.postcss && attributes.lang === 'postcss') { const { css: code } = await this.postcss.process(content, { from: undefined }); return {