From 4ffbe4a23bb971a5878544db1a8b0cc81b896909 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 24 Aug 2020 10:08:49 -0500 Subject: [PATCH] fix(watch): hmr scss _partial reload on file change Closes #2205 --- src/compiler/plugin/plugin.ts | 68 ++++++++++++++++--- .../shadow-mode/shadow-mode.buford.scss | 4 +- test/style-modes/src/scss/_partial.scss | 3 + 3 files changed, 65 insertions(+), 10 deletions(-) create mode 100644 test/style-modes/src/scss/_partial.scss diff --git a/src/compiler/plugin/plugin.ts b/src/compiler/plugin/plugin.ts index 331cab55bc2..935daf821c8 100644 --- a/src/compiler/plugin/plugin.ts +++ b/src/compiler/plugin/plugin.ts @@ -57,7 +57,13 @@ export const runPluginLoad = async (pluginCtx: PluginCtx, id: string) => { return pluginCtx.fs.readFile(id); }; -export const runPluginTransforms = async (config: d.Config, compilerCtx: d.CompilerCtx, buildCtx: d.BuildCtx, id: string, cmp?: d.ComponentCompilerMeta) => { +export const runPluginTransforms = async ( + config: d.Config, + compilerCtx: d.CompilerCtx, + buildCtx: d.BuildCtx, + id: string, + cmp?: d.ComponentCompilerMeta, +) => { const pluginCtx: PluginCtx = { config: config, sys: config.sys, @@ -89,7 +95,15 @@ export const runPluginTransforms = async (config: d.Config, compilerCtx: d.Compi // do this BEFORE transformations on css files if (shouldParseCssDocs && cmp != null) { cmp.styleDocs = cmp.styleDocs || []; - const cssParseResults = await parseCssImports(config, compilerCtx, buildCtx, id, id, transformResults.code, cmp.styleDocs); + const cssParseResults = await parseCssImports( + config, + compilerCtx, + buildCtx, + id, + id, + transformResults.code, + cmp.styleDocs, + ); transformResults.code = cssParseResults.styleText; transformResults.dependencies = cssParseResults.imports; } else { @@ -141,11 +155,26 @@ export const runPluginTransforms = async (config: d.Config, compilerCtx: d.Compi // do this AFTER transformations on non-css files if (shouldParseCssDocs && cmp != null) { cmp.styleDocs = cmp.styleDocs || []; - const cssParseResults = await parseCssImports(config, compilerCtx, buildCtx, id, transformResults.id, transformResults.code, cmp.styleDocs); + const cssParseResults = await parseCssImports( + config, + compilerCtx, + buildCtx, + id, + transformResults.id, + transformResults.code, + cmp.styleDocs, + ); transformResults.code = cssParseResults.styleText; transformResults.dependencies = cssParseResults.imports; } else { - const cssParseResults = await parseCssImports(config, compilerCtx, buildCtx, id, transformResults.id, transformResults.code); + const cssParseResults = await parseCssImports( + config, + compilerCtx, + buildCtx, + id, + transformResults.id, + transformResults.code, + ); transformResults.code = cssParseResults.styleText; transformResults.dependencies = cssParseResults.imports; } @@ -154,7 +183,13 @@ export const runPluginTransforms = async (config: d.Config, compilerCtx: d.Compi return transformResults; }; -export const runPluginTransformsEsmImports = async (config: d.Config, compilerCtx: d.CompilerCtx, buildCtx: d.BuildCtx, code: string, id: string) => { +export const runPluginTransformsEsmImports = async ( + config: d.Config, + compilerCtx: d.CompilerCtx, + buildCtx: d.BuildCtx, + code: string, + id: string, +) => { const pluginCtx: PluginCtx = { config: config, sys: config.sys, @@ -178,7 +213,9 @@ export const runPluginTransformsEsmImports = async (config: d.Config, compilerCt // do this BEFORE transformations on css files const cssParseResults = await parseCssImports(config, compilerCtx, buildCtx, id, id, transformResults.code); transformResults.code = cssParseResults.styleText; - transformResults.dependencies = cssParseResults.imports; + if (Array.isArray(cssParseResults.imports)) { + transformResults.dependencies.push(...cssParseResults.imports); + } } for (const plugin of pluginCtx.config.plugins) { @@ -204,7 +241,10 @@ export const runPluginTransformsEsmImports = async (config: d.Config, compilerCt transformResults.id = pluginTransformResults.id; } if (Array.isArray(pluginTransformResults.dependencies)) { - transformResults.dependencies.push(...pluginTransformResults.dependencies); + const imports = pluginTransformResults.dependencies.filter( + f => !transformResults.dependencies.includes(f), + ); + transformResults.dependencies.push(...imports); } } } @@ -223,9 +263,19 @@ export const runPluginTransformsEsmImports = async (config: d.Config, compilerCt // the output but only updated it to use url() instead. Let's go ahead and concat // the url() css files into one file like we did for raw .css files. Do this // AFTER transformations on non-css files - const cssParseResults = await parseCssImports(config, compilerCtx, buildCtx, id, transformResults.id, transformResults.code); + const cssParseResults = await parseCssImports( + config, + compilerCtx, + buildCtx, + id, + transformResults.id, + transformResults.code, + ); transformResults.code = cssParseResults.styleText; - transformResults.dependencies = cssParseResults.imports; + if (Array.isArray(cssParseResults.imports)) { + const imports = cssParseResults.imports.filter(f => !transformResults.dependencies.includes(f)); + transformResults.dependencies.push(...imports); + } } return transformResults; diff --git a/test/style-modes/src/components/shadow-mode/shadow-mode.buford.scss b/test/style-modes/src/components/shadow-mode/shadow-mode.buford.scss index da8bb048a0c..2bfd4d1638e 100644 --- a/test/style-modes/src/components/shadow-mode/shadow-mode.buford.scss +++ b/test/style-modes/src/components/shadow-mode/shadow-mode.buford.scss @@ -1,5 +1,7 @@ @import "shadow-mode"; :host { - background: yellow; + background: black; /* _partial should override this */ } + +@import "../../scss/_partial"; \ No newline at end of file diff --git a/test/style-modes/src/scss/_partial.scss b/test/style-modes/src/scss/_partial.scss new file mode 100644 index 00000000000..9cf7a2df3d3 --- /dev/null +++ b/test/style-modes/src/scss/_partial.scss @@ -0,0 +1,3 @@ +:host { + background: yellow; +}