Merge branch 'main' into feature/rust

jantimon · Jul 18, 2024 · fbc0889 · fbc0889
2 parents 9ea6584 + 2fca3fa
commit fbc0889
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 6 deletions.
diff --git a/packages/next-yak/loaders/__tests__/tsloader.test.ts b/packages/next-yak/loaders/__tests__/tsloader.test.ts
@@ -1836,7 +1836,7 @@ describe("cross file", () => {
       const Button =
       /*YAK Extracted CSS:
       .Button {
-        :yak-css-import(./icon:any:Icon) {
+        --yak-css-import: url(\\"./icon:Icon\\") {
           margin: 0 10px;
         }
       }*/

diff --git a/packages/next-yak/loaders/css-loader.ts b/packages/next-yak/loaders/css-loader.ts
@@ -1,13 +1,16 @@
 import type { LoaderContext } from "webpack";
 import { resolveCrossFileSelectors } from "./lib/resolveCrossFileSelectors.js";
+import { relative } from "path";
+import type { YakConfigOptions } from "../withYak/index.js";
+
 /**
  * Transform typescript to css
  *
  * This loader takes the cached result from the yak tsloader
  * and extracts the css from the generated comments
  */
 export default async function cssExtractLoader(
-  this: LoaderContext<{}>,
+  this: LoaderContext<YakConfigOptions>,
   // Instead of the source code, we receive the extracted css
   // from the ts-loader transformation
   _code: string,
@@ -19,11 +22,17 @@ export default async function cssExtractLoader(
     if (err) {
       return callback(err);
     }
+    const { experiments } = this.getOptions();
+    const debugLog = createDebugLogger(this, experiments?.debug);
+
+    debugLog("ts", source);
     const css = extractCss(source);
-    return resolveCrossFileSelectors(this, css).then(
-      (result) => callback(null, result, sourceMap),
-      callback,
-    );
+    debugLog("css", css);
+
+    return resolveCrossFileSelectors(this, css).then((result) => {
+      debugLog("css resolved", css);
+      return callback(null, result, sourceMap);
+    }, callback);
   });
 }
 
@@ -36,3 +45,35 @@ function extractCss(code: string): string {
   }
   return result;
 }
+
+function createDebugLogger(
+  loaderContext: LoaderContext<YakConfigOptions>,
+  debugOptions: Required<YakConfigOptions>["experiments"]["debug"],
+) {
+  if (
+    !debugOptions ||
+    (debugOptions !== true &&
+      debugOptions.filter &&
+      !debugOptions.filter(loaderContext.resourcePath))
+  ) {
+    return () => {};
+  }
+  const debugType = debugOptions === true ? "ts" : debugOptions.type;
+  return (messageType: "ts" | "css" | "css resolved", message: string) => {
+    if (messageType === debugType || debugType === "all") {
+      console.log(
+        "🐮 Yak",
+        messageType,
+        "\n",
+        loaderContext._compiler
+          ? relative(
+              loaderContext._compiler.context,
+              loaderContext.resourcePath,
+            )
+          : loaderContext.resourcePath,
+        "\n\n",
+        message,
+      );
+    }
+  };
+}
diff --git a/packages/next-yak/withYak/index.ts b/packages/next-yak/withYak/index.ts
@@ -17,6 +17,12 @@ export type YakConfigOptions = {
   contextPath?: string;
   experiments?: {
     crossFileSelectors?: boolean;
+    debug?:
+      | boolean
+      | {
+          filter?: (path: string) => boolean;
+          type: "all" | "ts" | "css" | "css resolved";
+        };
   };
 };