tempo/tsup.config.ts at main · basementstudio/tempo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import { defineConfig } from "tsup";
import path from "path";
import fsPromises from "fs/promises";
import postcss from "postcss";
import postcssModules from "postcss-modules";
import { MOUNT_EVENT_KEY } from "./src/constants";
import { generateScopedName } from "hash-css-selector";

const injectStyle = (css: string) => {
  return `
    window.addEventListener('${MOUNT_EVENT_KEY}', ({detail: { root }}) => {
      const style = document.createElement('style');
      style.textContent = ${css};
      root.shadowRoot.appendChild(style);
    })
  `;
}

export default defineConfig({
  esbuildOptions(opts) {
    opts.logLevel = "debug";
    opts.outbase = "src";
  },
  banner: {
    js: `"use client";`,
  },
  outDir: "dist",
  entry: ["./src/index.tsx", "./src/debug.ts", "./src/react/index.tsx"],
  tsconfig: "./tsconfig.json",
  format: ["esm", "cjs"],
  dts: true,
  sourcemap: false,
  clean: true,
  minify: true,
  treeshake: true,
  splitting: true,
  injectStyle: (css) => injectStyle(css),
  bundle: true,
  esbuildPlugins: [
    {
      name: "css-module",
      setup(build): void {
        build.onResolve(
          { filter: /\.module\.css$/, namespace: "file" },
          (args) => {
            return {
              path: `${args.path}#css-module`,
              namespace: "css-module",
              pluginData: {
                pathDir: path.join(args.resolveDir, args.path),
              },
            };
          },
        );
        build.onLoad(
          { filter: /#css-module$/, namespace: "css-module" },
          async (args) => {
            const { pluginData } = args as {
              pluginData: { pathDir: string };
            };

            const source = await fsPromises.readFile(
              pluginData.pathDir,
              "utf8",
            );

            let cssModule: any = {};
            const result = await postcss([
              postcssModules({
                generateScopedName: function (name, filename) {
                  const newSelector = generateScopedName(name, filename);
                  cssModule[name] = newSelector;

                  return newSelector;
                },
                getJSON: () => { },
                scopeBehaviour: "local",
              }),
            ]).process(source, { from: pluginData.pathDir });

            return {
              pluginData: { css: result.css },
              contents: `import "${pluginData.pathDir}"; export default ${JSON.stringify(cssModule)}`,
            };
          },
        );

        build.onResolve(
          { filter: /\.module\.css$/, namespace: "css-module" },
          (args) => ({
            path: path.join(args.resolveDir, args.path, "#css-module-data"),
            namespace: "css-module",
            pluginData: args.pluginData as { css: string },
          }),
        );

        build.onLoad(
          { filter: /#css-module-data$/, namespace: "css-module" },
          (args) => {
            const cssContent = (args.pluginData as { css: string }).css;
            const css = JSON.stringify(cssContent)

            return {
              contents: injectStyle(css),
              loader: "js",
            };
          },
        );
      },
    },
  ],
});