next-yak 0.2.2 → 0.2.4

package/README.md

@@ -39,17 +39,17 @@ Try it on [stackblitz](https://stackblitz.com/edit/stackblitz-starters-dfykqy?fi
 
 1. Install **next-yak** in your Next.js project.
 
-2. Add next-yak to your `next.config.js`:
+2. Add next-yak to your `next.config.mjs`:
 
 ```js
 // next.config.js
-const { withYak } = require("next-yak/withYak");
+import { withYak } from "next-yak/withYak";
 
 const nextConfig = {
   // your next.js config
 };
 
-module.exports = withYak(nextConfig);
+export default withYak(nextConfig);
 ```
 
 3. Ready to go:
@@ -266,31 +266,34 @@ const Container = styled.div`
 
 [Build time constants (video)](https://github.com/jantimon/next-yak/assets/4113649/2c83246c-a03b-4c57-8814-32a7248983ac)
 
-## Todos:
+## Yak shaving
 
-next-yak is currently in the development phase, with several todos that must be completed before it is ready for production:
-
- - [ ] improve js parsing - right now it not reusing babel..
- - [ ] better sourcemaps
- - [ ] improve runtime code size and typings
- - [ ] maybe remove proxy by compiling `styled.button -> styled("button")`
- - [ ] better error messages
- - [x] replace the current config apporach with a solution similar to vanilla-extracts `.styles.ts` files
- - [x] add theme provider (which works for Server Components)
- - [x] add support for forwardRef
- - [x] add support for attrs
- - [x] config hot module reloading
- 
+While trying to get next-yak to work properly we stumbled accross several bugs.  
+Thanks for merging our prs fixes in next.js and postcss ❤️
 
 <details>
-  <summary>prs</summary>
+  <summary>PRS</summary>
 
   - https://github.com/vercel/next.js/pull/51115
   - https://github.com/vercel/next.js/pull/53796
   - https://github.com/css-modules/postcss-modules-local-by-default/pull/64
+  - https://github.com/css-modules/postcss-modules-local-by-default/pull/72
+  - https://github.com/vercel/next.js/pull/62644
+  - https://github.com/vercel/next.js/pull/62639
+  - https://github.com/webpack-contrib/mini-css-extract-plugin/pull/1084
+  - https://github.com/vercel/next.js/pull/62733
+  - https://github.com/vercel/next.js/pull/64551
   
 </details>
 
+<details>
+  <summary>Experiments</summary>
+  Incomplete work in progress experiments to test the features and performance of next-yak:
+
+  - https://next-yak-benchmark.vercel.app/
+  - https://yacijs.vercel.app/
+</details>
+
 ## Acknowledgments
 
 Special thanks to the contributors and the inspiring projects that influenced next-yak:

package/dist/loaders/css-loader.cjs

@@ -0,0 +1,219 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// loaders/css-loader.ts
+var css_loader_exports = {};
+__export(css_loader_exports, {
+  default: () => cssExtractLoader
+});
+module.exports = __toCommonJS(css_loader_exports);
+
+// loaders/lib/resolveCrossFileSelectors.ts
+var import_path = __toESM(require("path"), 1);
+var import_core = __toESM(require("@babel/core"), 1);
+var import_plugin_syntax_typescript = __toESM(require("@babel/plugin-syntax-typescript"), 1);
+var import_getCssModuleLocalIdent = require("next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent.js");
+async function resolveCrossFileSelectors(loader, css) {
+  const moduleSelectorRegex = /:module-selector-import\(([^)]+) from '([^']+)'\)/g;
+  const matches = [...css.matchAll(moduleSelectorRegex)];
+  const firstMatchPosition = matches[0]?.index;
+  if (firstMatchPosition === void 0) {
+    return css;
+  }
+  let result = "";
+  for (let i = matches.length - 1; i >= 0; i--) {
+    const match = matches[i];
+    const index = match.index;
+    if (index === void 0) {
+      throw new Error("Match index is undefined");
+    }
+    const namedExport = match[1];
+    const importPath = match[2];
+    const resolved = await resolveIdentifier(
+      loader,
+      loader.context,
+      importPath,
+      namedExport
+    );
+    if (resolved.type === "unsupported") {
+      throw new Error(
+        `yak could not import ${namedExport} from ${importPath} - only styled-components, strings and numbers are supported`
+      );
+    }
+    const replacement = resolved.type === "styled-component" ? `:global(.${(0, import_getCssModuleLocalIdent.getCssModuleLocalIdent)(
+      {
+        rootContext: loader.rootContext,
+        resourcePath: resolved.from
+      },
+      null,
+      resolved.name,
+      {}
+    )})` : resolved.value;
+    result = String(replacement) + css.slice(index + match[0].length, matches[i + 1]?.index) + result;
+  }
+  result = css.slice(0, firstMatchPosition) + result;
+  return result;
+}
+async function resolveIdentifier(loader, context, sourcePath, identifier) {
+  const resolved = await new Promise((resolve, reject) => {
+    loader.resolve(context, sourcePath, (err, result) => {
+      if (err) {
+        return reject(err);
+      }
+      if (!result) {
+        return reject(new Error(`Could not resolve ${sourcePath}`));
+      }
+      resolve(result);
+    });
+  });
+  loader.addDependency(resolved);
+  const exports = await getAllExports(
+    loader,
+    resolved,
+    resolved.endsWith(".tsx")
+  );
+  const exportForIdentifier = exports[identifier];
+  if (!exportForIdentifier) {
+    throw new Error(`Could not find export ${identifier} in ${resolved}
+Currently only named exports are supported.
+Available exports: ${Object.keys(exports).join(", ")}`);
+  }
+  if (exportForIdentifier.type === "styled-component") {
+    return {
+      type: "styled-component",
+      from: resolved,
+      name: exportForIdentifier.name
+    };
+  }
+  return exportForIdentifier.type !== "named-export" ? exportForIdentifier : resolveIdentifier(
+    loader,
+    import_path.default.dirname(resolved),
+    exportForIdentifier.from,
+    exportForIdentifier.name
+  );
+}
+var exportsCache = /* @__PURE__ */ new WeakMap();
+async function getAllExports(loader, source, isTSX) {
+  const compilationCache = loader._compilation && exportsCache.get(loader._compilation)?.get(source);
+  if (compilationCache) {
+    return compilationCache;
+  }
+  const sourceContents = await new Promise(
+    (resolve, reject) => loader.fs.readFile(source, "utf-8", (err, result2) => {
+      if (err) {
+        return reject(err);
+      }
+      resolve(result2 || "");
+    })
+  );
+  let result = {};
+  import_core.default.transformSync(sourceContents, {
+    configFile: false,
+    plugins: [
+      [import_plugin_syntax_typescript.default, { isTSX }],
+      [
+        () => ({
+          visitor: {
+            ExportNamedDeclaration({ node }) {
+              if (node.source) {
+                node.specifiers.forEach((specifier) => {
+                  const exportSource = node.source?.value;
+                  if (specifier.exported.type === "Identifier" && specifier.exported.name && specifier.type === "ExportSpecifier" && specifier.local.type === "Identifier" && specifier.local.name && exportSource) {
+                    result[specifier.exported.name] = {
+                      type: "named-export",
+                      name: specifier.local.name,
+                      from: exportSource
+                    };
+                  }
+                });
+              } else if (node.declaration?.type === "VariableDeclaration") {
+                node.declaration.declarations.forEach((declaration) => {
+                  if (declaration.id.type === "Identifier" && declaration.id.name && declaration.init) {
+                    if (declaration.init.type === "CallExpression" || declaration.init.type === "TaggedTemplateExpression") {
+                      result[declaration.id.name] = {
+                        type: "styled-component",
+                        name: declaration.id.name
+                      };
+                    } else if (declaration.init.type === "StringLiteral" || declaration.init.type === "NumericLiteral") {
+                      result[declaration.id.name] = {
+                        type: "constant",
+                        value: declaration.init.value
+                      };
+                    } else {
+                      result[declaration.id.name] = {
+                        type: "unsupported",
+                        name: declaration.id.name
+                      };
+                    }
+                  }
+                });
+              }
+            },
+            ExportDefaultDeclaration() {
+            }
+          }
+        })
+      ]
+    ]
+  });
+  if (loader._compilation) {
+    const compilationCache2 = exportsCache.get(loader._compilation);
+    const exportsPerFile = compilationCache2 || /* @__PURE__ */ new Map();
+    exportsPerFile.set(source, result);
+    if (!compilationCache2) {
+      exportsCache.set(loader._compilation, exportsPerFile);
+    }
+  }
+  return result;
+}
+
+// loaders/css-loader.ts
+async function cssExtractLoader(_code, sourceMap) {
+  const callback = this.async();
+  return this.loadModule(this.resourcePath, (err, source) => {
+    if (err) {
+      return callback(err);
+    }
+    const css = extractCss(source);
+    return resolveCrossFileSelectors(this, css).then(
+      (result) => callback(null, result, sourceMap),
+      callback
+    );
+  });
+}
+function extractCss(code) {
+  const codeParts = code.split("/*YAK Extracted CSS:\n");
+  let result = "";
+  for (let i = 1; i < codeParts.length; i++) {
+    const codeUntilEnd = codeParts[i].split("*/")[0];
+    result += codeUntilEnd;
+  }
+  return result;
+}
+//# sourceMappingURL=css-loader.cjs.map

package/dist/loaders/css-loader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../loaders/css-loader.ts","../../loaders/lib/resolveCrossFileSelectors.ts"],"sourcesContent":["import type { LoaderContext } from \"webpack\";\nimport { resolveCrossFileSelectors } from \"./lib/resolveCrossFileSelectors.js\";\n/**\n * Transform typescript to css\n *\n * This loader takes the cached result from the yak tsloader\n * and extracts the css from the generated comments\n */\nexport default async function cssExtractLoader(\n  this: LoaderContext<{}>,\n  // Instead of the source code, we receive the extracted css\n  // from the ts-loader transformation\n  _code: string,\n  sourceMap: string | undefined,\n): Promise<string | void> {\n  const callback = this.async();\n  // Load the module from the original typescript request (without !=! and the query)\n  return this.loadModule(this.resourcePath, (err, source) => {\n    if (err) {\n      return callback(err);\n    }\n    const css = extractCss(source);\n    return resolveCrossFileSelectors(this, css).then(\n      (result) => callback(null, result, sourceMap),\n      callback,\n    );\n  });\n}\n\nfunction extractCss(code: string): string {\n  const codeParts = code.split(\"/*YAK Extracted CSS:\\n\");\n  let result = \"\";\n  for (let i = 1; i < codeParts.length; i++) {\n    const codeUntilEnd = codeParts[i].split(\"*/\")[0];\n    result += codeUntilEnd;\n  }\n  return result;\n}\n","import path from \"path\";\nimport babel from \"@babel/core\";\n// @ts-expect-error - this is used by babel directly so we ignore that it is not typed\nimport babelPlugin from \"@babel/plugin-syntax-typescript\";\nimport type { Compilation, LoaderContext } from \"webpack\";\nimport { getCssModuleLocalIdent } from \"next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent.js\";\n\nexport async function resolveCrossFileSelectors(\n  loader: LoaderContext<{}>,\n  css: string,\n): Promise<string> {\n  // Search for :module-selector-import(FOO from 'bar')\n  // generated by the yak babel plugin\n  const moduleSelectorRegex =\n    /:module-selector-import\\(([^)]+) from '([^']+)'\\)/g;\n  const matches = [...css.matchAll(moduleSelectorRegex)];\n  const firstMatchPosition = matches[0]?.index;\n  if (firstMatchPosition === undefined) {\n    return css;\n  }\n  let result = \"\";\n  for (let i = matches.length - 1; i >= 0; i--) {\n    const match = matches[i];\n    const index = match.index;\n    if (index === undefined) {\n      throw new Error(\"Match index is undefined\");\n    }\n    const namedExport = match[1];\n    const importPath = match[2];\n\n    const resolved = await resolveIdentifier(\n      loader,\n      loader.context,\n      importPath,\n      namedExport,\n    );\n    if (resolved.type === \"unsupported\") {\n      throw new Error(\n        `yak could not import ${namedExport} from ${importPath} - only styled-components, strings and numbers are supported`,\n      );\n    }\n\n    const replacement =\n      resolved.type === \"styled-component\"\n        ? `:global(.${getCssModuleLocalIdent(\n            {\n              rootContext: loader.rootContext,\n              resourcePath: resolved.from,\n            },\n            null,\n            resolved.name,\n            {},\n          )})`\n        : resolved.value;\n\n    // should be the internal namedExport identifier not the exported one\n    result =\n      String(replacement) +\n      css.slice(index + match[0].length, matches[i + 1]?.index) +\n      result;\n  }\n  result = css.slice(0, firstMatchPosition) + result;\n  return result;\n}\n\n/**\n * Recursively follows the import chain to resolve the identifiers\n * type, name and value.\n *\n * Currently only supports named exports\n */\nasync function resolveIdentifier(\n  loader: LoaderContext<{}>,\n  context: string,\n  sourcePath: string,\n  identifier: string,\n): Promise<\n  | {\n      type: \"styled-component\";\n      from: string;\n      name: string;\n    }\n  | {\n      type: \"unsupported\";\n      name: string;\n    }\n  | {\n      type: \"constant\";\n      value: string | number;\n    }\n> {\n  const resolved = await new Promise<string>((resolve, reject) => {\n    loader.resolve(context, sourcePath, (err, result) => {\n      if (err) {\n        return reject(err);\n      }\n      if (!result) {\n        return reject(new Error(`Could not resolve ${sourcePath}`));\n      }\n      resolve(result);\n    });\n  });\n  loader.addDependency(resolved);\n  const exports = await getAllExports(\n    loader,\n    resolved,\n    resolved.endsWith(\".tsx\"),\n  );\n  const exportForIdentifier = exports[identifier];\n  if (!exportForIdentifier) {\n    throw new Error(`Could not find export ${identifier} in ${resolved}\nCurrently only named exports are supported.\nAvailable exports: ${Object.keys(exports).join(\", \")}`);\n  }\n  if (exportForIdentifier.type === \"styled-component\") {\n    return {\n      type: \"styled-component\",\n      from: resolved,\n      name: exportForIdentifier.name,\n    };\n  }\n  return exportForIdentifier.type !== \"named-export\"\n    ? exportForIdentifier\n    : resolveIdentifier(\n        loader,\n        path.dirname(resolved),\n        exportForIdentifier.from,\n        exportForIdentifier.name,\n      );\n}\n\ntype ResolvedExport =\n  | {\n      type: \"unsupported\";\n      name: string;\n    }\n  | {\n      type: \"styled-component\";\n      name: string;\n    }\n  | {\n      type: \"constant\";\n      value: string | number;\n    }\n  | {\n      type: \"named-export\";\n      name: string;\n      from: string;\n    };\n\n/**\n *  Cache the exports per file name to avoid parsing the same file multiple times\n */\nconst exportsCache = new WeakMap<\n  Compilation,\n  Map<string, Record<string, ResolvedExport>>\n>();\n\n/**\n * Use babel together with the \"@babel/plugin-syntax-typescript\" to extract all exports from a typescript file\n */\nasync function getAllExports(\n  loader: LoaderContext<{}>,\n  source: string,\n  isTSX: boolean,\n): Promise<{ [key: string]: ResolvedExport }> {\n  const compilationCache =\n    loader._compilation && exportsCache.get(loader._compilation)?.get(source);\n  if (compilationCache) {\n    return compilationCache;\n  }\n\n  const sourceContents = await new Promise<string>((resolve, reject) =>\n    loader.fs.readFile(source, \"utf-8\", (err, result) => {\n      if (err) {\n        return reject(err);\n      }\n      resolve(result || \"\");\n    }),\n  );\n\n  let result: { [key: string]: ResolvedExport } = {};\n  babel.transformSync(sourceContents, {\n    configFile: false,\n    plugins: [\n      [babelPlugin, { isTSX }],\n      [\n        (): babel.PluginObj => ({\n          visitor: {\n            ExportNamedDeclaration({ node }) {\n              // reexports e.g. export { Baz as Bar } from \"./foo\"\n              if (node.source) {\n                node.specifiers.forEach((specifier) => {\n                  const exportSource = node.source?.value;\n                  if (\n                    specifier.exported.type === \"Identifier\" &&\n                    specifier.exported.name &&\n                    specifier.type === \"ExportSpecifier\" &&\n                    specifier.local.type === \"Identifier\" &&\n                    specifier.local.name &&\n                    exportSource\n                  ) {\n                    result[specifier.exported.name] = {\n                      type: \"named-export\",\n                      name: specifier.local.name,\n                      from: exportSource,\n                    };\n                  }\n                });\n              } // named export e.g. export const Foo = 1\n              else if (node.declaration?.type === \"VariableDeclaration\") {\n                node.declaration.declarations.forEach((declaration) => {\n                  if (\n                    declaration.id.type === \"Identifier\" &&\n                    declaration.id.name &&\n                    declaration.init\n                  ) {\n                    // TODO: check if this is a styled component, or constant, or sth unsupported\n                    if (\n                      declaration.init.type === \"CallExpression\" ||\n                      declaration.init.type === \"TaggedTemplateExpression\"\n                    ) {\n                      result[declaration.id.name] = {\n                        type: \"styled-component\",\n                        name: declaration.id.name,\n                      };\n                    } else if (\n                      declaration.init.type === \"StringLiteral\" ||\n                      declaration.init.type === \"NumericLiteral\"\n                    ) {\n                      result[declaration.id.name] = {\n                        type: \"constant\",\n                        value: declaration.init.value,\n                      };\n                    } else {\n                      result[declaration.id.name] = {\n                        type: \"unsupported\",\n                        name: declaration.id.name,\n                      };\n                    }\n                  }\n                });\n              }\n            },\n            ExportDefaultDeclaration() {\n              // TODO: add support for default exports\n            },\n          },\n        }),\n      ],\n    ],\n  });\n  if (loader._compilation) {\n    const compilationCache = exportsCache.get(loader._compilation);\n    const exportsPerFile = compilationCache || new Map();\n    exportsPerFile.set(source, result);\n    if (!compilationCache) {\n      exportsCache.set(loader._compilation, exportsPerFile);\n    }\n  }\n  return result;\n}\n"],"mappings":"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","names":["path","result","babel","babelPlugin","compilationCache"]}

package/dist/loaders/css-loader.d.cts

@@ -0,0 +1,11 @@
+import { LoaderContext } from 'webpack';
+
+/**
+ * Transform typescript to css
+ *
+ * This loader takes the cached result from the yak tsloader
+ * and extracts the css from the generated comments
+ */
+declare function cssExtractLoader(this: LoaderContext<{}>, _code: string, sourceMap: string | undefined): Promise<string | void>;
+
+export { cssExtractLoader as default };

package/dist/loaders/{tsloader.cjs → ts-loader.cjs}

@@ -27,12 +27,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// loaders/tsloader.ts
-var tsloader_exports = {};
-__export(tsloader_exports, {
+// loaders/ts-loader.ts
+var ts_loader_exports = {};
+__export(ts_loader_exports, {
   default: () => tsloader
 });
-module.exports = __toCommonJS(tsloader_exports);
+module.exports = __toCommonJS(ts_loader_exports);
 var babel = __toESM(require("@babel/core"), 1);
 var import_plugin_syntax_typescript = __toESM(require("@babel/plugin-syntax-typescript"), 1);
 
@@ -85,10 +85,23 @@ function getConstantValues(path, t) {
   const bindings = Object.entries(path.scope.bindings);
   for (const [name, binding] of bindings) {
     if (binding.kind === "module") {
-      topLevelConstBindings.set(name, {
-        value: null,
-        type: "module"
-      });
+      const node = binding.path.node;
+      const parent = binding.path.parent;
+      if (node.type === "ImportSpecifier" && parent?.type === "ImportDeclaration" && node.imported.type === "Identifier") {
+        topLevelConstBindings.set(name, {
+          value: null,
+          type: "module",
+          name: node.imported.name,
+          source: parent.source.value
+        });
+      } else {
+        topLevelConstBindings.set(name, {
+          value: null,
+          type: "module",
+          name,
+          source: null
+        });
+      }
       continue;
     }
     if (binding.kind === "let" || binding.kind === "var" || binding.kind === "const") {
@@ -657,7 +670,7 @@ function babel_yak_plugin_default(babel2, options) {
         enter(path) {
           this.topLevelConstBindings = getConstantValues(path, t);
         },
-        exit(path, state) {
+        exit(_path, state) {
           if (!this.isImportedInCurrentFile) {
             return;
           }
@@ -690,7 +703,8 @@ function babel_yak_plugin_default(babel2, options) {
                 this.runtimeInternalHelpers,
                 getComponentTypes(this.yakTemplateExpressionsByPath),
                 this.topLevelConstBindings,
-                state.file
+                state.file,
+                options.crossFile
               );
             }
           );
@@ -705,7 +719,7 @@ function babel_yak_plugin_default(babel2, options) {
           }
         }
       },
-      JSXElement(path, state) {
+      JSXElement(path) {
         if (!this.isImportedInCurrentFile || !this.yakImportPath) {
           return;
         }
@@ -758,7 +772,7 @@ function babel_yak_plugin_default(babel2, options) {
        * - styled.div.attrs({})`...`
        * - keyframes`...`
        */
-      TaggedTemplateExpression(path, state) {
+      TaggedTemplateExpression(path) {
         if (!this.isImportedInCurrentFile) {
           return;
         }
@@ -915,7 +929,7 @@ function visitYakExpression(yakTemplateExpressions, visitor) {
   });
 }
 var rootExpressionCssDeclarations = /* @__PURE__ */ new WeakMap();
-function transformYakExpressions(expression, rootExpression, cssParserState, visitChildren, createUniqueName, runtimeInternalHelpers, componentTypeMapping, constantValues, file) {
+function transformYakExpressions(expression, rootExpression, cssParserState, visitChildren, createUniqueName, runtimeInternalHelpers, componentTypeMapping, constantValues, file, crossFileSelectors) {
   const identifier2 = createUniqueName(
     expression === rootExpression ? expression.name : `${rootExpression.name}__${expression.name}`
   );
@@ -946,23 +960,32 @@ function transformYakExpressions(expression, rootExpression, cssParserState, vis
             quasiExpression,
             file
           );
-        }
-        if (constantValue.type === "module") {
-          throw new InvalidPositionError(
-            `Imported values cannot be used as constants`,
-            quasiExpression,
-            file,
-            "Move the constant into the current file or into a .yak file"
-          );
-        }
-        if (constantValue.type === "function") {
+        } else if (constantValue.type === "function") {
           throw new InvalidPositionError(
             `Function constants are not supported yet`,
             quasiExpression,
             file
           );
+        } else if (constantValue.type === "module") {
+          if (!crossFileSelectors) {
+            throw new InvalidPositionError(
+              `Module constants are not allowed in this context`,
+              quasiExpression,
+              file,
+              `Use the 'experiments.crossFileSelectors' option to enable cross file selectors`
+            );
+          }
+          if (constantValue.source === null) {
+            throw new InvalidPositionError(
+              `Module constant could not be resolved`,
+              quasiExpression,
+              file
+            );
+          }
+          replaceValue = `:module-selector-import(${constantValue.name} from '${constantValue.source}')`;
+        } else {
+          replaceValue = String(constantValue?.value);
         }
-        replaceValue = String(constantValue?.value);
       } else {
       }
       if (replaceValue !== null) {
@@ -1087,14 +1110,14 @@ function getComponentTypes(yakTemplateExpressions) {
   return Object.fromEntries(nameTypeMap);
 }
 
-// loaders/tsloader.ts
+// loaders/ts-loader.ts
 async function tsloader(source) {
   if (!source.includes("next-yak")) {
     return source;
   }
   const callback = this.async();
   const { rootContext, resourcePath } = this;
-  const isYakFile = /\.yak\.(j|t)sx?$/.test(resourcePath.matches);
+  const isYakFile = /\.yak\.(j|t)sx?$/.test(resourcePath);
   const importedYakConstants = isYakFile ? [] : getYakImports_default(source);
   const replaces = {};
   await Promise.all(
@@ -1119,7 +1142,8 @@ async function tsloader(source) {
           {
             replaces,
             rootContext,
-            devMode: this.mode === "development"
+            devMode: this.mode === "development",
+            crossFile: this.getOptions().experiments?.crossFileSelectors ?? false
           }
         ]
       ]
@@ -1135,6 +1159,6 @@ async function tsloader(source) {
   if (!result?.code) {
     return callback(new Error("babel transform failed"));
   }
-  return callback(null, result.code, result.map);
+  return callback(null, result.code, result.map ?? void 0);
 }
-//# sourceMappingURL=tsloader.cjs.map
+//# sourceMappingURL=ts-loader.cjs.map