Function kumaUiLoader

packages/webpack-plugin/src/loader.ts:25–98

(
  source: Buffer,
)

};

const kumaUiLoader: RawLoaderDefinitionFunction<Options> = function (
  source: Buffer,
) {
  // tell Webpack this loader is async
  const callback = this.async();
  const id = this.resourcePath;
  const { plugin, outputDir, wasm } = this.getOptions();

  if (plugin.config) {
    // enable automatic rebuild for static theme props
    // <Box color={"colors.red.100"} />
    this.addDependency(plugin.config);
    const userTheme = getUserTheme(plugin.config);
    if (userTheme) {
      theme.setUserTheme(userTheme);
    }
  }

  if (
    id.includes("/node_modules/") ||
    id.includes("@kuma-ui/core") ||
    !/\.(t|j)(s|sx)?$/.test(id)
  ) {
    callback(null, source);
    return;
  }

  const outputPath = this._compiler?.options.output.path;
  if (!outputPath) throw Error("output path is not correctly set");
  const result = compileSync({ code: source.toString(), id, wasm });
  if (!result || !result.code) {
    callback(null, source);
    return;
  }

  const css = result.css || "";

  if (css) {
    /**
     * This is a temporary workaround to enable HMR (Hot Module Replacement) in Next.js client components.
     * Currently, Client Component doesn't account for virtual files, so we need to emit an actual CSS file.
     * TODO: Address and fix this issue.
     */
    if (outputDir && process.env.NODE_ENV !== "production") {
      const codePrefix = fileLoader(css, {
        context: this,
        outputDir: outputDir,
      });
      callback(null, `${result.code}\n${codePrefix};`);
      return;
    }

    const params = new URLSearchParams({ [CSS_PARAM_NAME]: css });

    const importCSS = `import ${JSON.stringify(
      `${this.utils.contextify(
        this.context,
        emptyCssExtractionFile,