fix(hmr): reload from changed css import in global styles

ionic-team · Oct 18, 2020 · 4f8934d · 4f8934d
1 parent f1488a9
commit 4f8934d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/src/compiler/build/compiler-ctx.ts b/src/compiler/build/compiler-ctx.ts
@@ -20,7 +20,7 @@ export class CompilerContext implements d.CompilerCtx {
   addWatchDir: (path: string) => void = noop;
   addWatchFile: (path: string) => void = noop;
   cache: d.Cache;
-  cachedStyleMeta = new Map<string, d.StyleCompiler>();
+  cssModuleImports = new Map<string, string[]>();
   changedFiles = new Set<string>();
   changedModules = new Set<string>();
   collections: d.CollectionCompilerMeta[] = [];
@@ -43,7 +43,7 @@ export class CompilerContext implements d.CompilerCtx {
 
   reset() {
     this.cache.clear();
-    this.cachedStyleMeta.clear();
+    this.cssModuleImports.clear();
     this.cachedGlobalStyle = null;
     this.collections.length = 0;
     this.compilerOptions = null;

diff --git a/src/compiler/style/global-styles.ts b/src/compiler/style/global-styles.ts
@@ -43,8 +43,16 @@ const buildGlobalStyles = async (config: d.Config, compilerCtx: d.CompilerCtx, b
         globalStylePath,
       );
       compilerCtx.cachedGlobalStyle = optimizedCss;
+
       if (Array.isArray(transformResults.dependencies)) {
-        transformResults.dependencies.forEach(dep => compilerCtx.addWatchFile(dep));
+        const cssModuleImports = compilerCtx.cssModuleImports.get(globalStylePath) || [];
+        transformResults.dependencies.forEach(dep => {
+          compilerCtx.addWatchFile(dep);
+          if (!cssModuleImports.includes(dep)) {
+            cssModuleImports.push(dep);
+          }
+        });
+        compilerCtx.cssModuleImports.set(globalStylePath, cssModuleImports);
       }
       return optimizedCss;
     }
@@ -75,6 +83,11 @@ const canSkipGlobalStyles = async (config: d.Config, compilerCtx: d.CompilerCtx,
     return false;
   }
 
+  const cssModuleImports = compilerCtx.cssModuleImports.get(config.globalStyle);
+  if (cssModuleImports && buildCtx.filesChanged.some(f => cssModuleImports.includes(f))) {
+    return false;
+  }
+
   const hasChangedImports = await hasChangedImportFile(
     config,
     compilerCtx,

diff --git a/src/declarations/stencil-private.ts b/src/declarations/stencil-private.ts
@@ -617,7 +617,7 @@ export interface CompilerCtx {
   addWatchDir: (path: string, recursive: boolean) => void;
   addWatchFile: (path: string) => void;
   cache: Cache;
-  cachedStyleMeta: Map<string, StyleCompiler>;
+  cssModuleImports: Map<string, string[]>;
   cachedGlobalStyle: string;
   collections: CollectionCompilerMeta[];
   compilerOptions: any;

diff --git a/src/testing/mocks.ts b/src/testing/mocks.ts
@@ -68,7 +68,7 @@ export function mockCompilerCtx(config?: Config) {
     collections: [],
     compilerOptions: null,
     cache: null,
-    cachedStyleMeta: new Map(),
+    cssModuleImports: new Map(),
     events: null,
     fs: null,
     hasSuccessfulBuild: false,