Hoist duplicated rule to __layout

src/hoister.js

@@ -0,0 +1,71 @@
+import path from "path/posix";
+import { getProxiedObject } from "./helper.js";
+
+const foundInLayout = (layoutClassList, className) => {
+  for (const key in layoutClassList) {
+    for (const layoutClassName in layoutClassList[key]) {
+      if (layoutClassName === className) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+
+export const hoistClass = (classCache, hoistedClassCache) => {
+  const layoutFilename = "__layout.svelte";
+
+  //  no need for in loop here for filename?
+  for (const filename in classCache) {
+    const { dir, base } = path.parse(filename);
+
+    const currentComponentClassList = classCache[filename];
+
+    if (base === layoutFilename) {
+      hoistedClassCache[dir][base] = currentComponentClassList;
+      continue;
+    }
+
+    const layoutClassList = hoistedClassCache[dir][layoutFilename];
+
+    if (!layoutClassList) {
+      hoistedClassCache[dir][base] = currentComponentClassList;
+      continue;
+    }
+
+    const filteredClassList = getProxiedObject();
+
+    for (const original in currentComponentClassList) {
+      for (const minified in currentComponentClassList[original]) {
+        if (!foundInLayout(layoutClassList, minified)) {
+          filteredClassList[original][minified] = true;
+        }
+      }
+    }
+
+    hoistedClassCache[dir][base] = filteredClassList;
+  }
+};
+
+export const hoistDeclaration = (
+  filename,
+  hoistedClassCache,
+  declarationCache
+) => {
+  const { dir, base } = path.parse(filename);
+  const hoistedDeclarationCache = getProxiedObject();
+  const currentComponentCache = hoistedClassCache[dir][base];
+  //  This is hell
+  for (const original in currentComponentCache) {
+    for (const minified of Object.keys(currentComponentCache[original])) {
+      for (const mediaQuery in declarationCache) {
+        for (const decl in declarationCache[mediaQuery]) {
+          if (minified === declarationCache[mediaQuery][decl]) {
+            hoistedDeclarationCache[mediaQuery][decl] = minified;
+          }
+        }
+      }
+    }
+  }
+  return hoistedDeclarationCache;
+};

src/index.js

@@ -1,10 +1,12 @@
 import { parse } from "svelte/compiler";
 import createTokenizer from "./tokenizer.js";
 import createTransformer from "./transformer.js";
-import { getProxiedObject } from './helper.js';
+import { getProxiedObject } from "./helper.js";
+import { hoistDeclaration, hoistClass } from "./hoister.js";
 
 //  Keep state outside default function as it will be called multiple times
 const classCache = getProxiedObject();
+const hoistedClassCache = getProxiedObject();
 const declarationCache = getProxiedObject();
 const tokernizer = createTokenizer(classCache, declarationCache);
 
@@ -18,9 +20,16 @@ export default function () {
 
         const transformer = createTransformer(content, filename);
 
+        hoistClass(classCache, hoistedClassCache);
+        const hoistedDeclarationCache = hoistDeclaration(
+          filename,
+          hoistedClassCache,
+          declarationCache
+        );
+
         const result = transformer
           .transformHtml(ast.html, classCache)
-          .transformCss(ast.css, declarationCache, classCache)
+          .transformCss(ast.css, hoistedDeclarationCache)
           .toString();
 
         return {

src/transformer.js

@@ -1,11 +1,6 @@
 import MagicString from "magic-string";
 import { walk } from "svelte/compiler";
-import {
-  getMediaQuery,
-  getClassName,
-  getDeclaration,
-  assembleRules,
-} from "./helper.js";
+import { assembleRules } from "./helper.js";
 
 export default function (code, filename) {
   const changeable = new MagicString(code);