add postcss, fix export names

1 files changed, 101 insertions, 40 deletions

diff --git a/packages/web-util/src/index.build.ts b/packages/web-util/src/index.build.ts
index 02e6886ab..19bb7fdfb 100644
--- a/packages/web-util/src/index.build.ts
+++ b/packages/web-util/src/index.build.ts
@@ -1,15 +1,14 @@
-import esbuild from "esbuild";
-import path from "path";
+import esbuild, { PluginBuild } from "esbuild";
+// import linaria from "@linaria/esbuild";
 import fs from "fs";
+import path from "path";
+import postcss from "postcss";
 import sass from "sass";
-import { PluginBuild } from "esbuild";
+import postcssrc from "postcss-load-config";
 
 // this should give us the current directory where
 // the project is being built
 const BASE = process.cwd();
-const distProd = path.join(BASE, "dist", "prod");
-const distDev = path.join(BASE, "dist", "dev");
-const sourceDir = path.join(BASE, "src");
 
 const preact = path.join(
   BASE,
@@ -32,11 +31,10 @@ const preactCompatPlugin: esbuild.Plugin = {
   },
 };
 
-export function getFilesInSource(regex: RegExp): string[] {
-  return getFilesInDirectory(sourceDir, regex);
-}
-
-function getFilesInDirectory(startPath: string, regex: RegExp): string[] {
+export function getFilesInDirectory(
+  startPath: string,
+  regex?: RegExp,
+): string[] {
   if (!fs.existsSync(startPath)) {
     return [];
   }
@@ -49,7 +47,7 @@ function getFilesInDirectory(startPath: string, regex: RegExp): string[] {
       if (stat.isDirectory()) {
         return getFilesInDirectory(filename, regex);
       }
-      if (regex.test(filename)) {
+      if (!regex || regex.test(filename)) {
         return [filename];
       }
       return [];
@@ -108,7 +106,7 @@ function copyFilesPlugin(files: Array<string>) {
 
 const DEFAULT_SASS_FILTER = /\.(s[ac]ss|css)$/;
 
-const buildSassPlugin: esbuild.Plugin = {
+const sassPlugin: esbuild.Plugin = {
   name: "custom-build-sass",
   setup(build) {
     build.onLoad({ filter: DEFAULT_SASS_FILTER }, ({ path: file }) => {
@@ -124,7 +122,42 @@ const buildSassPlugin: esbuild.Plugin = {
   },
 };
 
-const buildConfig: esbuild.BuildOptions = {
+const postCssPlugin: esbuild.Plugin = {
+  name: "custom-build-postcss",
+  setup(build) {
+    build.onLoad({ filter: DEFAULT_SASS_FILTER }, async ({ path: file }) => {
+      const resolveDir = path.dirname(file);
+      const sourceBuffer = fs.readFileSync(file);
+      const source = sourceBuffer.toString("utf-8");
+      const postCssConfig = await postcssrc();
+      postCssConfig.options.from = file;
+
+      const { css: contents } = await postcss(postCssConfig.plugins).process(
+        source,
+        postCssConfig.options,
+      );
+
+      return {
+        resolveDir,
+        loader: "css",
+        contents,
+      };
+    });
+  },
+};
+
+function linariaPlugin() {
+  // const linariaCssPlugin: esbuild.Plugin = linaria.default({
+  //   babelOptions: {
+  //     babelrc: false,
+  //     configFile: "./babel.config-linaria.json",
+  //   },
+  //   sourceMap: true,
+  // });
+  // return linariaCssPlugin;
+}
+
+const defaultEsBuildConfig: esbuild.BuildOptions = {
   bundle: true,
   minify: false,
   loader: {
@@ -146,43 +179,71 @@ const buildConfig: esbuild.BuildOptions = {
     __VERSION__: `"${_package.version}"`,
     __GIT_HASH__: `"${GIT_HASH}"`,
   },
-  plugins: [
-    preactCompatPlugin,
-    copyFilesPlugin(["./src/index.html"]),
-    buildSassPlugin,
-  ],
 };
 
-/**
- * Build sources for prod environment
- */
-export function buildProd(entryPoints: string[]) {
-  return esbuild.build({
-    ...buildConfig,
-    entryPoints,
-    outdir: distProd,
-  });
+export interface BuildParams {
+  source: {
+    assets: string[];
+    js: string[];
+  };
+  destination: string;
+  css: "sass" | "postcss"; // | "linaria";
+}
+
+export function computeConfig(params: BuildParams) {
+  const plugins: Array<esbuild.Plugin> = [
+    preactCompatPlugin,
+    copyFilesPlugin(params.source.assets),
+  ];
+
+  switch (params.css) {
+    case "sass": {
+      plugins.push(sassPlugin);
+      break;
+    }
+    case "postcss": {
+      plugins.push(postCssPlugin);
+      break;
+    }
+
+    // case "linaria": {
+    //   plugins.push(linariaPlugin());
+    //   break;
+    // }
+
+    default: {
+      const cssType: never = params.css;
+      throw Error(`not supported: ${cssType}`);
+    }
+  }
+  return {
+    ...defaultEsBuildConfig,
+    entryPoints: params.source.js,
+    outdir: params.destination,
+    plugins,
+  };
 }
 
 /**
- * Build sources for dev environment
+ * Build sources for prod environment
  */
-function buildDev(entryPoints: string[]): Promise<esbuild.BuildResult> {
-  return esbuild.build({
-    ...buildConfig,
-    entryPoints,
-    outdir: distDev,
-  });
+export function build(config: BuildParams) {
+  return esbuild.build(computeConfig(config));
 }
 
+const LIVE_RELOAD_SCRIPT =
+  "./node_modules/@gnu-taler/web-util/lib/live-reload.mjs";
+
 /**
  * Do startup for development environment
  */
 export function initializeDev(
-  entryPoints: string[],
+  config: BuildParams,
 ): () => Promise<esbuild.BuildResult> {
-  buildConfig.inject = [
-    "./node_modules/@gnu-taler/web-util/lib/live-reload.mjs",
-  ];
-  return () => buildDev(entryPoints);
+  function buildDevelopment() {
+    const result = computeConfig(config);
+    result.inject = [LIVE_RELOAD_SCRIPT];
+    return esbuild.build(result);
+  }
+  return buildDevelopment;
 }