next-yak 0.2.7 → 0.3.0

package/dist/loaders/css-loader.cjs

@@ -39,259 +39,339 @@ 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");
-var yakCssImportRegex = /--yak-css-import\:\s*url\("([^"]+)"\)/g;
-async function resolveCrossFileSelectors(loader, css) {
-  let fileBasedResolveCache = /* @__PURE__ */ new Map();
+var yakCssImportRegex = (
+  // Make mixin and selector non optional once we dropped support for the babel plugin
+  /--yak-css-import\:\s*url\("([^"]+)",?(|mixin|selector)\);?/g
+);
+var compilationCache = /* @__PURE__ */ new WeakMap();
+async function resolveCrossFileConstant(loader, pathContext, css) {
   const matches = [...css.matchAll(yakCssImportRegex)].map((match) => {
-    const [fullMatch, encodedArguments] = match;
+    const [fullMatch, encodedArguments, importKind] = match;
     const [moduleSpecifier, ...specifier] = encodedArguments.split(":").map((entry) => decodeURIComponent(entry));
-    const position = match.index;
-    if (specifier.length === 0) {
-      throw new Error(
-        `Invalid module import selector ${fullMatch} - no specifier provided`
-      );
-    }
     return {
+      encodedArguments,
       moduleSpecifier,
       specifier,
-      position,
+      importKind,
+      position: match.index,
       size: fullMatch.length
     };
   });
-  const firstMatchPosition = matches[0]?.position;
-  if (firstMatchPosition === void 0) {
+  if (matches.length === 0)
     return css;
-  }
-  let result = "";
-  for (let i = matches.length - 1; i >= 0; i--) {
-    const { moduleSpecifier, specifier, position, size } = matches[i];
-    const resolved = await resolveCrossFileValue(
-      moduleSpecifier,
-      specifier,
-      fileBasedResolveCache,
-      loader
+  try {
+    const exportCache = /* @__PURE__ */ new Map();
+    const resolvedValues = await Promise.all(
+      matches.map(({ moduleSpecifier, specifier, encodedArguments }) => {
+        const resolvedFromCache = exportCache.get(encodedArguments);
+        const resolvedValue = resolvedFromCache || parseModule(loader, moduleSpecifier, pathContext).then(
+          (parsedModule) => resolveModuleSpecifierRecursively(
+            loader,
+            parsedModule,
+            specifier
+          )
+        );
+        if (!resolvedFromCache) {
+          exportCache.set(encodedArguments, resolvedValue);
+        }
+        return resolvedValue;
+      })
     );
-    if (resolved.type === "unsupported") {
-      throw new Error(
-        `yak could not import ${specifier.join(
-          "."
-        )} from ${moduleSpecifier} - only styled-components, strings and numbers are supported`
-      );
+    let result = css;
+    for (let i = matches.length - 1; i >= 0; i--) {
+      const { position, size, importKind, specifier } = matches[i];
+      const resolved = resolvedValues[i];
+      if (importKind === "selector") {
+        if (resolved.type === "mixin") {
+          throw new Error(
+            `Found mixin but expected a selector - did you forget a semicolon after \`${specifier.join(
+              "."
+            )}\`?`
+          );
+        }
+      }
+      const replacement = resolved.type === "styled-component" ? `:global(.${(0, import_getCssModuleLocalIdent.getCssModuleLocalIdent)(
+        {
+          rootContext: loader.rootContext,
+          resourcePath: resolved.from
+        },
+        null,
+        resolved.name,
+        {}
+      )})` : resolved.value;
+      result = result.slice(0, position) + String(replacement) + result.slice(position + size);
     }
-    const replacement = resolved.type === "styled-component" ? `:global(.${(0, import_getCssModuleLocalIdent.getCssModuleLocalIdent)(
-      {
-        rootContext: loader.rootContext,
-        resourcePath: resolved.from
-      },
-      null,
-      resolved.name,
-      {}
-    )})` : getConstantFromResolvedValue(resolved.value, specifier.slice(1));
-    result = String(replacement) + css.slice(position + size, matches[i + 1]?.position) + result;
+    return result;
+  } catch (error) {
+    throw new Error(
+      `Error resolving cross-file selectors: ${error.message}
+File: ${loader.resourcePath}`
+    );
   }
-  result = css.slice(0, firstMatchPosition) + result;
-  return result;
 }
-var getConstantFromResolvedValue = (record, specifier) => {
-  let current = record;
-  for (const key of specifier) {
-    if (typeof current === "string" || typeof current === "number") {
-      throw new Error(
-        `Could not resolve ${specifier.join(".")} in ${JSON.stringify(record)}`
-      );
-    }
-    current = current[key];
+async function parseModule(loader, moduleSpecifier, context) {
+  const compilation = loader._compilation;
+  if (!compilation) {
+    throw new Error("Webpack compilation object not available");
   }
-  if (typeof current === "string" || typeof current === "number") {
-    return current;
+  let cache = compilationCache.get(compilation);
+  if (!cache) {
+    cache = /* @__PURE__ */ new Map();
+    compilationCache.set(compilation, cache);
   }
-  throw new Error(
-    `Could not resolve ${specifier.join(".")} in ${JSON.stringify(record)}`
-  );
-};
-async function resolveCrossFileValue(moduleSpecifier, specifier, resolveCache, loader) {
-  const isYak = moduleSpecifier.endsWith(".yak");
-  let resolvedModule;
-  if (!isYak) {
-    const resolveKey = `${moduleSpecifier} : ${specifier[0]}`;
-    let resolvedFromCache = resolveCache.get(resolveKey);
-    resolvedModule = resolvedFromCache || resolveIdentifier(loader, loader.context, moduleSpecifier, specifier[0]);
-    if (!resolvedFromCache) {
-      resolveCache.set(resolveKey, resolvedModule);
-    }
-  } else {
-    let resolvedFromCache = resolveCache.get(moduleSpecifier);
-    resolvedModule = resolvedFromCache || resolveYakModule(loader, moduleSpecifier);
-    if (!resolvedFromCache) {
-      resolveCache.set(moduleSpecifier, resolvedModule);
-    }
-    resolvedModule = resolvedModule.then((moduleValues) => {
-      if (moduleValues.type !== "record") {
-        throw new Error("resolveYakModule returns always a record");
-      }
-      const value = moduleValues.value[specifier[0]];
-      if (typeof value === "string" || typeof value === "number") {
-        return {
-          type: "constant",
-          value
-        };
-      }
-      if (value && (Array.isArray(value) || typeof value === "object")) {
-        return {
-          type: "record",
-          value
-        };
-      }
-      throw new Error(
-        `Could not find export ${specifier[0]} in ${moduleSpecifier}`
-      );
-    });
+  const cacheKey = import_path.default.resolve(context, moduleSpecifier);
+  let filePromise = cache.get(cacheKey);
+  if (!filePromise) {
+    filePromise = (async () => {
+      const resolved = await new Promise((resolve, reject) => {
+        loader.resolve(context, moduleSpecifier, (err, result) => {
+          if (err)
+            return reject(err);
+          if (!result)
+            return reject(new Error(`Could not resolve ${moduleSpecifier}`));
+          resolve(result);
+        });
+      });
+      return parseFile(loader, resolved);
+    })();
+    cache.set(cacheKey, filePromise);
   }
-  return resolvedModule;
+  loader.addDependency((await filePromise).filePath);
+  return filePromise;
 }
-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);
+async function parseFile(loader, filePath) {
+  const isYak = filePath.endsWith(".yak.ts") || filePath.endsWith(".yak.tsx") || filePath.endsWith(".yak.js") || filePath.endsWith(".yak.jsx");
+  const isTSX = filePath.endsWith(".tsx");
+  try {
+    if (isYak) {
+      const module2 = await loader.importModule(filePath);
+      const mappedModule = Object.fromEntries(
+        Object.entries(module2).map(([key, value]) => {
+          if (typeof value === "string" || typeof value === "number") {
+            return [key, { type: "constant", value }];
+          } else if (value && (typeof value === "object" || Array.isArray(value))) {
+            return [key, { type: "record", value }];
+          } else {
+            return [key, { type: "unsupported" }];
+          }
+        })
+      );
+      return { type: "yak", exports: mappedModule, filePath };
+    }
+    const sourceContents = new Promise(
+      (resolve, reject) => loader.fs.readFile(filePath, "utf-8", (err, result) => {
+        if (err)
+          return reject(err);
+        resolve(result || "");
+      })
+    );
+    const tranformedSource = new Promise((resolve, reject) => {
+      loader.loadModule(filePath, (err, source) => {
+        if (err)
+          return reject(err);
+        resolve(source || "");
+      });
     });
-  });
-  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") {
+    const exports = await parseExports(await sourceContents, isTSX);
+    const mixins = parseMixins(await tranformedSource);
+    await Promise.all(
+      Object.entries(mixins).map(async ([name, mixin]) => {
+        mixins[name] = {
+          type: "mixin",
+          value: await resolveCrossFileConstant(
+            loader,
+            import_path.default.dirname(filePath),
+            mixin.value
+          )
+        };
+      })
+    );
     return {
-      type: "styled-component",
-      from: resolved,
-      name: exportForIdentifier.name
+      type: "regular",
+      exports: {
+        ...exports,
+        ...mixins
+      },
+      filePath
     };
+  } catch (error) {
+    throw new Error(
+      `Error parsing file ${filePath}: ${error.message}`
+    );
   }
-  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 if (declaration.init.type === "TemplateLiteral" && declaration.init.quasis.length === 1) {
-                      result[declaration.id.name] = {
-                        type: "constant",
-                        value: declaration.init.quasis[0].value.raw
-                      };
-                    } else if (declaration.init.type === "ObjectExpression") {
-                      result[declaration.id.name] = {
-                        type: "record",
-                        value: parseObjectExpression(declaration.init)
-                      };
-                    } else {
-                      result[declaration.id.name] = {
-                        type: "unsupported",
-                        name: declaration.id.name
+async function parseExports(sourceContents, isTSX) {
+  let exports = {};
+  try {
+    import_core.default.transformSync(sourceContents, {
+      configFile: false,
+      plugins: [
+        [import_plugin_syntax_typescript.default, { isTSX }],
+        [
+          () => ({
+            visitor: {
+              ExportNamedDeclaration({ node }) {
+                if (node.source) {
+                  node.specifiers.forEach((specifier) => {
+                    if (specifier.type === "ExportSpecifier" && specifier.exported.type === "Identifier" && specifier.local.type === "Identifier") {
+                      exports[specifier.exported.name] = {
+                        type: "re-export",
+                        from: node.source.value,
+                        imported: specifier.local.name
                       };
                     }
+                  });
+                } else if (node.declaration?.type === "VariableDeclaration") {
+                  node.declaration.declarations.forEach((declaration) => {
+                    if (declaration.id.type === "Identifier" && declaration.init) {
+                      exports[declaration.id.name] = parseExportValueExpression(
+                        declaration.init
+                      );
+                    }
+                  });
+                }
+              },
+              ExportAllDeclaration({ node }) {
+                if (Object.keys(exports).length === 0) {
+                  exports["*"] ||= {
+                    type: "star-export",
+                    from: []
+                  };
+                  if (exports["*"].type !== "star-export") {
+                    throw new Error("Invalid star export state");
                   }
-                });
+                  exports["*"].from.push(node.source.value);
+                }
               }
-            },
-            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 exports;
+  } catch (error) {
+    throw new Error(`Error parsing exports: ${error.message}`);
   }
-  return result;
+}
+function parseMixins(sourceContents) {
+  const mixinParts = sourceContents.split("/*YAK EXPORTED MIXIN:");
+  let mixins = {};
+  for (let i = 1; i < mixinParts.length; i++) {
+    const [comment] = mixinParts[i].split("*/", 1);
+    const position = comment.indexOf("\n");
+    const name = comment.slice(0, position);
+    const value = comment.slice(position + 1);
+    mixins[name] = { type: "mixin", value };
+  }
+  return mixins;
+}
+function parseExportValueExpression(node) {
+  if (node.type === "CallExpression" || node.type === "TaggedTemplateExpression") {
+    return { type: "styled-component" };
+  } else if (node.type === "StringLiteral" || node.type === "NumericLiteral") {
+    return { type: "constant", value: node.value };
+  } else if (node.type === "TemplateLiteral" && node.quasis.length === 1) {
+    return { type: "constant", value: node.quasis[0].value.raw };
+  } else if (node.type === "ObjectExpression") {
+    return { type: "record", value: parseObjectExpression(node) };
+  }
+  return { type: "unsupported" };
 }
 function parseObjectExpression(node) {
   let result = {};
   for (const property of node.properties) {
     if (property.type === "ObjectProperty" && property.key.type === "Identifier") {
       const key = property.key.name;
-      if (property.value.type === "StringLiteral" || property.value.type === "NumericLiteral") {
-        result[key] = property.value.value;
-      } else if (property.value.type === "TemplateLiteral" && property.value.quasis.length === 1) {
-        result[key] = property.value.quasis[0].value.raw;
-      } else if (property.value.type === "ObjectExpression") {
-        result[key] = parseObjectExpression(property.value);
-      }
+      result[key] = parseExportValueExpression(
+        property.value
+      );
     }
   }
   return result;
 }
-function resolveYakModule(loader, moduleSpecifier) {
-  return loader.importModule(moduleSpecifier).then((module2) => ({
-    type: "record",
-    value: module2
-  }));
+async function resolveModuleSpecifierRecursively(loader, module2, specifier) {
+  try {
+    const exportName = specifier[0];
+    let exportValue = module2.exports[exportName];
+    if (exportValue === void 0) {
+      const starExport = module2.exports["*"];
+      if (starExport?.type === "star-export") {
+        if (starExport.from.length > 1) {
+          throw new Error(
+            `Could not resolve ${specifier.join(".")} in module ${module2.filePath} - Multiple star exports are not supported for performance reasons`
+          );
+        }
+        exportValue = {
+          type: "re-export",
+          from: starExport.from[0],
+          imported: exportName
+        };
+      } else {
+        throw new Error(
+          `Could not resolve "${specifier.join(".")}" in module ${module2.filePath}`
+        );
+      }
+    }
+    if (exportValue.type === "re-export") {
+      const importedModule = await parseModule(
+        loader,
+        exportValue.from,
+        import_path.default.dirname(module2.filePath)
+      );
+      return resolveModuleSpecifierRecursively(loader, importedModule, [
+        exportValue.imported,
+        ...specifier.slice(1)
+      ]);
+    }
+    if (exportValue.type === "styled-component") {
+      return {
+        type: "styled-component",
+        from: module2.filePath,
+        name: specifier[specifier.length - 1]
+      };
+    } else if (exportValue.type === "constant") {
+      return { type: "constant", value: exportValue.value };
+    } else if (exportValue.type === "record") {
+      let current = exportValue.value;
+      let depth = 0;
+      do {
+        if (typeof current === "string" || typeof current === "number") {
+          return {
+            type: "constant",
+            value: current
+          };
+        } else if (!current || typeof current !== "object" && !Array.isArray(current)) {
+          throw new Error(
+            `Error unpacking Record/Array "${exportName}".
+Key "${specifier[depth]}" was of type "${typeof current}" but only String and Number are supported`
+          );
+        }
+        depth++;
+        if (depth === specifier.length && "__yak" in current) {
+          return { type: "mixin", value: current["__yak"] };
+        } else {
+          current = current[specifier[depth]];
+        }
+      } while (current);
+      if (specifier[depth] === void 0) {
+        throw new Error(
+          `Error unpacking Record/Array - could not extract \`${specifier.slice(0, depth).join(".")}\` is not a string or number`
+        );
+      }
+      throw new Error(
+        `Error unpacking Record/Array - could not extract \`${specifier[depth]}\` from \`${specifier.slice(0, depth).join(".")}\``
+      );
+    } else if (exportValue.type === "mixin") {
+      return { type: "mixin", value: exportValue.value };
+    }
+    throw new Error(
+      `Error unpacking Record/Array - unexpected exportValue "${exportValue.type}" for specifier "${specifier.join(".")}"`
+    );
+  } catch (error) {
+    throw new Error(
+      `Error resolving from module ${module2.filePath}: ${error.message}`
+    );
+  }
 }
 
 // loaders/css-loader.ts
@@ -307,7 +387,7 @@ async function cssExtractLoader(_code, sourceMap) {
     debugLog("ts", source);
     const css = extractCss(source);
     debugLog("css", css);
-    return resolveCrossFileSelectors(this, css).then((result) => {
+    return resolveCrossFileConstant(this, this.context, css).then((result) => {
       debugLog("css resolved", css);
       return callback(null, result, sourceMap);
     }, callback);