@k8slens/package-build 2.2.3 → 3.1.0

package/src/stylesheet-plugin.test.ts

@@ -0,0 +1,161 @@
+import { build } from "esbuild";
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { stylesheetPlugin } from "./stylesheet-plugin";
+
+describe("stylesheets in a package build", () => {
+  describe("given a package importing stylesheets, when built", () => {
+    let bundle: string;
+    let exportsOfBundle: Record<string, Record<string, unknown>>;
+    let outputFileCount: number;
+    let warnings: string[];
+
+    beforeAll(async () => {
+      const result = await buildFixture("styled-package");
+
+      warnings = result.warnings.map((warning) => warning.text);
+      outputFileCount = result.outputFiles.length;
+      bundle = result.outputFiles[0].text;
+      exportsOfBundle = evaluate(bundle);
+    });
+
+    it("emits no css file beside the bundle", () => {
+      expect(outputFileCount).toBe(1);
+    });
+
+    it("declares a global stylesheet as a stylesheet of the package, identified by package name and file", () => {
+      expect(exportsOfBundle.global.stylesheet).toEqual({
+        id: "@some-scope/styled-package/global.scss",
+        css: ".global {\n  color: red;\n}",
+      });
+    });
+
+    it("exports the scoped class names of a css module as its default", () => {
+      expect(exportsOfBundle.someModule.default).toEqual({
+        some: expect.stringMatching(/^some-module__some___.{5}$/),
+        nested: expect.stringMatching(/^some-module__nested___.{5}$/),
+      });
+    });
+
+    it("declares the scoped css of a css module as a stylesheet", () => {
+      const classNames = exportsOfBundle.someModule.default as Record<string, string>;
+
+      expect(exportsOfBundle.someModule.stylesheet).toEqual({
+        id: "@some-scope/styled-package/some.module.scss",
+        css: `.${classNames.some} {\n  color: blue;\n}\n.${classNames.some} .${classNames.nested} {\n  color: green;\n}`,
+      });
+    });
+
+    it("includes the rules of an imported partial in the importing stylesheet", () => {
+      expect(exportsOfBundle.importer.stylesheet).toEqual({
+        id: "@some-scope/styled-package/importer.scss",
+        css: ".importer {\n  color: purple;\n}",
+      });
+    });
+
+    it("declares no stylesheet for a stylesheet that compiles to nothing", () => {
+      expect(exportsOfBundle.empty.stylesheet).toBeUndefined();
+    });
+
+    it("declares plain css as a stylesheet too", () => {
+      expect(exportsOfBundle.plain.stylesheet).toEqual({
+        id: "@some-scope/styled-package/plain.css",
+        css: ".plain {\n  color: black;\n}",
+      });
+    });
+
+    it("scopes the class names of a plain css module", () => {
+      expect(exportsOfBundle.plainModule.default).toEqual({
+        plainLocal: expect.stringMatching(/^plain-module__plainLocal___.{5}$/),
+      });
+    });
+
+    // include-media is a dependency of the monorepo, hoisted to its root node_modules.
+    it("resolves a ~ import from a dependency the way node would", () => {
+      expect(exportsOfBundle.tilde.stylesheet).toEqual({
+        id: "@some-scope/styled-package/tilde.scss",
+        css: expect.stringContaining("@media (min-width: 100px)"),
+      });
+    });
+
+    it("inlines a file a stylesheet refers to by url as a data url, since the text travels without its neighbours", () => {
+      const css = (exportsOfBundle.fonts.stylesheet as { css: string }).css;
+
+      expect(css).toContain(
+        `src: url("data:font/ttf;base64,${Buffer.from("not really a font").toString("base64")}") format("truetype")`,
+      );
+    });
+
+    it("leaves a url it cannot resolve as it is", () => {
+      const css = (exportsOfBundle.fonts.stylesheet as { css: string }).css;
+
+      expect(css).toContain('background: url("./missing.png")');
+    });
+
+    it("warns about a url it cannot resolve", () => {
+      expect(warnings).toEqual([expect.stringContaining('"fonts.scss" refers to "./missing.png"')]);
+    });
+
+    it("keeps @k8slens/stylesheet-contracts external so that the token identity is shared", () => {
+      expect(bundle).toContain('require("@k8slens/stylesheet-contracts")');
+    });
+
+    // overlayscrollbars is a dependency of the monorepo, hoisted to its root node_modules.
+    it("compiles the stylesheet of a declared dependency into a stylesheet identified by the import specifier", () => {
+      expect(exportsOfBundle.ofDependency.stylesheet).toEqual({
+        id: "@some-scope/styled-package/overlayscrollbars/overlayscrollbars.css",
+        css: expect.stringContaining(".os-scrollbar"),
+      });
+    });
+  });
+
+  describe("given a package importing the stylesheet of a dependency it does not declare, when built", () => {
+    it("fails, naming the dependency", async () => {
+      await expect(buildFixture("package-with-undeclared-dependency")).rejects.toThrow(
+        '"@some-scope/package-with-undeclared-dependency" imports the stylesheet "overlayscrollbars/overlayscrollbars.css" of "overlayscrollbars" without declaring "overlayscrollbars" in its dependencies',
+      );
+    });
+  });
+
+  describe("given a package importing a stylesheet without declaring @k8slens/stylesheet-contracts, when built", () => {
+    it("fails, naming the missing dependency", async () => {
+      await expect(buildFixture("package-without-dependency")).rejects.toThrow(
+        '"@some-scope/package-without-dependency" imports a stylesheet but does not declare "@k8slens/stylesheet-contracts" in its dependencies',
+      );
+    });
+  });
+});
+
+const buildFixture = (fixture: string) => {
+  const packageDirectory = path.join(__dirname, "__fixtures__", fixture);
+  // Named manifest.json rather than package.json so that nothing takes the fixture for a workspace package.
+  const packageJson = JSON.parse(readFileSync(path.join(packageDirectory, "manifest.json"), "utf-8"));
+
+  return build({
+    entryPoints: [path.join(packageDirectory, "index.js")],
+    bundle: true,
+    write: false,
+    format: "cjs",
+    platform: "node",
+    logLevel: "silent",
+    plugins: [
+      stylesheetPlugin({
+        packageName: packageJson.name,
+        packageDirectory,
+        declaredDependencies: new Set(Object.keys(packageJson.dependencies ?? {})),
+      }),
+    ],
+  });
+};
+
+// Runs the bundle with the contracts stubbed to hand back what they were given,
+// so that the tests see the stylesheets the bundle declares.
+const evaluate = (bundle: string) => {
+  const module = { exports: {} as Record<string, Record<string, unknown>> };
+  const requireStub = (specifier: string) =>
+    specifier === "@k8slens/stylesheet-contracts" ? { asStylesheet: (stylesheet: unknown) => stylesheet } : {};
+
+  new Function("require", "module", "exports", bundle)(requireStub, module, module.exports);
+
+  return module.exports;
+};

package/src/stylesheet-plugin.ts

@@ -0,0 +1,272 @@
+import type { Plugin } from "esbuild";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { type FileImporter, Logger, compile } from "sass";
+import postcss, { type AcceptedPlugin } from "postcss";
+import postcssModules from "postcss-modules";
+import tailwindcss from "tailwindcss";
+
+export const stylesheetContractsPackageName = "@k8slens/stylesheet-contracts";
+
+const namespace = "lens-stylesheet";
+const isStylesheetPath = /\.(scss|css)$/;
+const isModulePath = /\.module\.(scss|css)$/;
+const generateScopedName = "[name]__[local]___[hash:base64:5]";
+
+export interface StylesheetPluginParams {
+  /** The name of the package being built; the first half of every stylesheet id. */
+  readonly packageName: string;
+  /** The directory of the package being built; stylesheet ids are relative to it. */
+  readonly packageDirectory: string;
+  /** The `dependencies` of the package being built, by name. */
+  readonly declaredDependencies: ReadonlySet<string>;
+}
+
+const getPackageNameOf = (specifier: string) => {
+  const [first, second] = specifier.split("/");
+
+  return specifier.startsWith("@") ? `${first}/${second}` : first;
+};
+
+/**
+ * Compiles every stylesheet the package imports into a module that declares
+ * it as a stylesheet injectable of the package's Feature:
+ *
+ *     import { asStylesheet } from "@k8slens/stylesheet-contracts";
+ *     export const stylesheet = asStylesheet({ id: "<package>/<file>", css: "…" });
+ *     export default { local: "scoped" }; // css modules only
+ *
+ * The Feature picks the `stylesheet` export up through its stylesheet glob,
+ * and the renderer application applies it while the Feature is registered.
+ * A css module keeps its scoped class names as the default export, and its
+ * `@apply` rules go through tailwind as before. Nothing is written beside the
+ * bundle any more: the css travels inside it.
+ *
+ * A stylesheet of a dependency, imported by a bare specifier from the
+ * package's own sources (`import "xterm/css/xterm.css"`), is compiled the same
+ * way and identified by that specifier. Nothing registers it by itself, since
+ * it is not under the Feature's stylesheet glob: the package re-exports its
+ * `stylesheet` from an `*.injectable.ts` file, and the Feature registers it
+ * like any injectable.
+ */
+export const stylesheetPlugin = ({
+  packageName,
+  packageDirectory,
+  declaredDependencies,
+}: StylesheetPluginParams): Plugin => ({
+  name: "lens-stylesheet",
+
+  setup: (build) => {
+    const isOwnSourceFile = (file: string) => {
+      const relative = path.relative(packageDirectory, file);
+
+      return (
+        !relative.startsWith("..") && !relative.split(path.sep).includes("node_modules") && /\.(t|j)sx?$/.test(file)
+      );
+    };
+
+    build.onResolve({ filter: isStylesheetPath }, (args) => {
+      if (args.path.startsWith(".")) {
+        const absolutePath = path.resolve(args.resolveDir, args.path);
+
+        if (path.relative(packageDirectory, absolutePath).startsWith("..")) {
+          return null;
+        }
+
+        return { path: absolutePath, namespace };
+      }
+
+      if (!isOwnSourceFile(args.importer)) {
+        return null;
+      }
+
+      const dependency = getPackageNameOf(args.path);
+
+      if (!declaredDependencies.has(dependency)) {
+        return {
+          errors: [
+            {
+              text: `"${packageName}" imports the stylesheet "${args.path}" of "${dependency}" without declaring "${dependency}" in its dependencies.`,
+            },
+          ],
+        };
+      }
+
+      try {
+        return {
+          path: require.resolve(args.path, { paths: [packageDirectory] }),
+          namespace,
+          pluginData: { id: `${packageName}/${args.path}` },
+        };
+      } catch {
+        return {
+          errors: [
+            { text: `"${packageName}" imports the stylesheet "${args.path}", which "${dependency}" does not have.` },
+          ],
+        };
+      }
+    });
+
+    build.onResolve({ filter: /.*/, namespace }, (args) => {
+      if (args.path !== stylesheetContractsPackageName) {
+        return null;
+      }
+
+      if (!declaredDependencies.has(stylesheetContractsPackageName)) {
+        return {
+          errors: [
+            {
+              text: `"${packageName}" imports a stylesheet but does not declare "${stylesheetContractsPackageName}" in its dependencies. Every stylesheet becomes an injectable bound to its token.`,
+            },
+          ],
+        };
+      }
+
+      // Shared with the rest of the application, so that the token identity is: never bundled in.
+      return { path: args.path, external: true };
+    });
+
+    build.onLoad({ filter: /.*/, namespace }, async (args) => {
+      const isModule = isModulePath.test(args.path);
+      // Quiet: the legacy stylesheets trip sass warnings by the hundred, and a build
+      // that prints them drowns what matters. Errors still fail the build.
+      const compiled = compile(args.path, { logger: Logger.silent, importers: [tildeImporter(packageDirectory)] });
+      const processed = isModule
+        ? await toCssModule(compiled.css, args.path)
+        : { css: compiled.css, classNames: undefined };
+      const loadedDirectories = compiled.loadedUrls.map((url) => path.dirname(fileURLToPath(url)));
+      const { css, unresolved } = inlineUrls(processed.css, [path.dirname(args.path), ...loadedDirectories]);
+      const classNames = processed.classNames;
+      const id: string =
+        args.pluginData?.id ?? `${packageName}/${path.relative(packageDirectory, args.path).split(path.sep).join("/")}`;
+
+      const contents = [
+        ...(css.trim() === ""
+          ? []
+          : [
+              `import { asStylesheet } from "${stylesheetContractsPackageName}";`,
+              `export const stylesheet = asStylesheet({ id: ${JSON.stringify(id)}, css: ${JSON.stringify(css)} });`,
+            ]),
+        ...(isModule ? [`export default ${JSON.stringify(classNames ?? {})};`] : []),
+      ].join("\n");
+
+      return {
+        contents,
+        loader: "js",
+        resolveDir: path.dirname(args.path),
+        watchFiles: compiled.loadedUrls.map((url) => fileURLToPath(url)),
+        warnings: unresolved.map((url) => ({
+          text: `"${path.relative(packageDirectory, args.path)}" refers to "${url}", which was not found next to the stylesheet or its imports; the browser will not find it either.`,
+        })),
+      };
+    });
+  },
+});
+
+/**
+ * `@import "~some-package/some/file"` reaches into a dependency, the way the
+ * webpack-era stylesheets were written. The package is found the way node
+ * would find it from the package being built, and sass takes it from there:
+ * the extension, the `_partial` prefix and the index file are its business.
+ */
+const tildeImporter = (packageDirectory: string): FileImporter<"sync"> => ({
+  findFileUrl: (url) => {
+    if (!url.startsWith("~")) {
+      return null;
+    }
+
+    const specifier = url.slice(1);
+    const segments = specifier.split("/");
+    const packageNameLength = specifier.startsWith("@") ? 2 : 1;
+    const packageName = segments.slice(0, packageNameLength).join("/");
+    const packageRoot = findInNodeModules(packageName, packageDirectory);
+
+    return packageRoot ? pathToFileURL(path.join(packageRoot, ...segments.slice(packageNameLength))) : null;
+  },
+});
+
+const findInNodeModules = (packageName: string, from: string): string | undefined => {
+  for (let directory = from; ; directory = path.dirname(directory)) {
+    const candidate = path.join(directory, "node_modules", packageName);
+
+    if (fs.existsSync(candidate)) {
+      return candidate;
+    }
+
+    if (path.dirname(directory) === directory) {
+      return undefined;
+    }
+  }
+};
+
+const mimeTypes: Record<string, string> = {
+  ".ttf": "font/ttf",
+  ".otf": "font/otf",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".eot": "application/vnd.ms-fontobject",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+};
+
+const isExternalUrl = (url: string) => /^(data:|https?:|\/\/|#)/.test(url);
+
+/**
+ * A stylesheet travels inside the bundle as text, so a `url("../fonts/x.ttf")`
+ * it refers to has no file next to it any more when the browser reads it. The
+ * referenced file goes into the text as a data url instead — resolved the way
+ * the old css pipeline did, relative to the stylesheet being compiled, with
+ * the directories of its imports as fallbacks for a partial that refers to a
+ * neighbour of its own.
+ */
+const inlineUrls = (css: string, directories: string[]) => {
+  const unresolved: string[] = [];
+
+  const inlined = css.replace(/url\(\s*(['"]?)([^'")]+)\1\s*\)/g, (match, quote: string, url: string) => {
+    if (isExternalUrl(url)) {
+      return match;
+    }
+
+    const filePath = url.replace(/[?#].*$/, "");
+    const found = directories
+      .map((directory) => path.resolve(directory, filePath))
+      .find((candidate) => fs.existsSync(candidate));
+
+    if (!found) {
+      unresolved.push(url);
+
+      return match;
+    }
+
+    const mimeType = mimeTypes[path.extname(found).toLowerCase()] ?? "application/octet-stream";
+
+    return `url(${quote}data:${mimeType};base64,${fs.readFileSync(found).toString("base64")}${quote})`;
+  });
+
+  return { css: inlined, unresolved };
+};
+
+const toCssModule = async (css: string, filePath: string) => {
+  let classNames: Record<string, string> = {};
+
+  // postcss-modules and tailwind resolve their own copy of postcss, whose plugin
+  // type the compiler will not compare to ours; at runtime it is the same shape.
+  const plugins = [
+    postcssModules({
+      generateScopedName,
+      getJSON: (_cssFileName: string, json: Record<string, string>) => {
+        classNames = json;
+      },
+    }),
+    tailwindcss,
+  ] as unknown as AcceptedPlugin[];
+
+  const result = await postcss(plugins).process(css, { from: filePath, map: false });
+
+  return { css: result.css, classNames };
+};

package/src/glob-import-plugin.js

@@ -1,46 +0,0 @@
-import glob from "fast-glob";
-import { randomUUID } from "node:crypto";
-import { resolve as resolvePath } from "node:path";
-export const globImportPlugin = () => ({
-    name: "glob-import-plugin",
-    setup: (build) => {
-        const uniquenessCache = new Map();
-        build.onResolve({ filter: /\*/ }, async (args) => {
-            const { resolveDir, path } = args;
-            if (resolveDir === "") {
-                return; // Ignore unresolvable paths
-            }
-            const cacheKey = resolvePath(resolveDir, path);
-            const uniqueId = getOrInsertWith(uniquenessCache, cacheKey, getRandomUniqueId);
-            return {
-                path: `${path}/proof-of-uniqueness/${uniqueId}`,
-                namespace: "import-glob",
-                pluginData: { resolveDir },
-            };
-        });
-        build.onLoad({ filter: /.*/, namespace: "import-glob" }, async (args) => {
-            const { path, pluginData: { resolveDir }, } = args;
-            const [globImportString] = path.split("/proof-of-uniqueness/");
-            const files = (await glob(globImportString, { cwd: resolveDir })).sort();
-            const contents = [
-                files.map((module, index) => `import * as module${index} from './${module}'`).join(";"),
-                "",
-                `const modules = [${files.map((_, index) => `module${index}`).join(",")}];`,
-                "",
-                "export default modules;",
-                `export const filenames = [${files.map((module) => `'${module}'`).join(",")}]`,
-                "",
-            ].join("\n");
-            return { contents, resolveDir };
-        });
-    },
-});
-const getRandomUniqueId = () => randomUUID();
-const getOrInsertWith = (map, key, builder) => {
-    if (map.has(key)) {
-        return map.get(key);
-    }
-    const value = builder();
-    map.set(key, value);
-    return value;
-};

package/src/package-build.js

@@ -1,193 +0,0 @@
-import { build } from "esbuild";
-import path from "node:path";
-import { sassPlugin, postcssModules } from "esbuild-sass-plugin";
-import { readFileSync } from "node:fs";
-import { builtinModules as rawBuiltinModules } from "node:module";
-import yargs from "yargs";
-import { globImportPlugin } from "./glob-import-plugin";
-import tailwindcss from "tailwindcss";
-import { partition } from "lodash";
-const CWD = process.cwd();
-const packageJson = JSON.parse(readFileSync(path.resolve(CWD, "package.json"), "utf-8"));
-const isExperimentalModule = (module) => module.startsWith("_");
-const alsoAddNodeRefs = (module) => [module, `node:${module}`];
-const { builtinModules, disallowedBuiltinModules } = (() => {
-    const [disallowed, allowed] = partition(rawBuiltinModules, isExperimentalModule);
-    const disallowedBuiltinModules = new Set(disallowed.flatMap(alsoAddNodeRefs));
-    const builtinModules = new Set(allowed.flatMap(alsoAddNodeRefs));
-    return { disallowedBuiltinModules, builtinModules };
-})();
-const getPackageName = (path) => {
-    const [firstPart, secondPart] = path.split("/");
-    if (path.startsWith("@")) {
-        return [firstPart, secondPart].join("/");
-    }
-    return firstPart;
-};
-const bundleDependency = null;
-const ensureCorrectImportsPlugin = {
-    name: "ensure-correct-imports",
-    setup: (build) => {
-        build.onResolve({ filter: /^\./ }, (args) => {
-            const fullPath = path.resolve(args.resolveDir, args.path);
-            const relativePathToImporter = path.relative(CWD, args.importer);
-            const relativePath = path.relative(CWD, fullPath);
-            if (relativePath.startsWith("..") && !relativePathToImporter.startsWith("..")) {
-                throw new Error(`Tried to import "${args.path}" from "${relativePathToImporter}" but it is outside of the package.`);
-            }
-            return bundleDependency;
-        });
-        build.onResolve({ filter: /^[^.]/ }, async (args) => {
-            // Enforce declared imports only for the package's own sources (.ts/.tsx/.js/.jsx).
-            // Anything imported from outside the package directory — node_modules files or
-            // other workspace packages' dists (whose realpaths live outside node_modules) —
-            // belongs to an already-bundled dependency and must keep bundling freely.
-            const relativePathToImporter = path.relative(CWD, args.importer);
-            const importerIsOwnFile = !relativePathToImporter.startsWith("..") &&
-                !relativePathToImporter.split(path.sep).includes("node_modules");
-            const importerIsSourceFile = /\.(t|j)sx?$/.test(args.importer);
-            if (!importerIsOwnFile || !importerIsSourceFile) {
-                return bundleDependency;
-            }
-            if (disallowedBuiltinModules.has(args.path)) {
-                throw new Error(`Tried to import "${args.path}" from "${args.importer}" but it is a disallowed builtin module.`);
-            }
-            if (builtinModules.has(args.path)) {
-                return {
-                    external: true,
-                    path: args.path,
-                };
-            }
-            const packageName = getPackageName(args.path);
-            const isExplicitDependency = packageName in (packageJson.dependencies ?? {});
-            const isExplicitDevDependency = packageName in (packageJson.devDependencies ?? {});
-            if (isExplicitDependency) {
-                // Note: Return the full path since we assume that it is a "exports" entry of the dependency found in package.json
-                return {
-                    external: true,
-                    path: args.path,
-                };
-            }
-            if (isExplicitDevDependency) {
-                return bundleDependency;
-            }
-            throw new Error(`Tried to import "${args.path}" from "${relativePathToImporter}" but it is not a dependency of the package.`);
-        });
-    },
-};
-const parsedArgs = yargs()
-    .options({
-    tsconfig: {
-        type: "string",
-        default: "tsconfig.json",
-        description: 'Custom tsconfig.json -file, defaults to "tsconfig.json"',
-    },
-    "entry-point": {
-        type: "string",
-        default: "index.ts",
-        description: 'Custom entry-point, defaults to "index.ts"',
-    },
-    outfile: {
-        type: "string",
-        default: path.resolve(CWD, "dist/index.js"),
-        description: `Custom outfile, defaults to "dist/index.js"`,
-    },
-    format: {
-        choices: ["cjs", "esm"],
-        default: "cjs",
-        description: `Transpilation output format, defaults to "cjs"`,
-    },
-})
-    .parseSync(process.argv);
-// Copied from https://github.com/evanw/esbuild/issues/1051
-const nativeNodeModulesPlugin = {
-    name: "native-node-modules",
-    setup(build) {
-        // If a ".node" file is imported within a module in the "file" namespace, resolve
-        // it to an absolute path and put it into the "node-file" virtual namespace.
-        build.onResolve({ filter: /\.node$/, namespace: "file" }, (args) => ({
-            path: require.resolve(args.path, { paths: [args.resolveDir] }),
-            namespace: "node-file",
-        }));
-        // Files in the "node-file" virtual namespace call "require()" on the
-        // path from esbuild of the ".node" file in the output directory.
-        build.onLoad({ filter: /.*/, namespace: "node-file" }, (args) => ({
-            contents: `
-        import path from ${JSON.stringify(args.path)}
-        try { module.exports = require(path) }
-        catch {}
-      `,
-        }));
-        // If a ".node" file is imported within a module in the "node-file" namespace, put
-        // it in the "file" namespace where esbuild's default loading behavior will handle
-        // it. It is already an absolute path since we resolved it to one above.
-        build.onResolve({ filter: /\.node$/, namespace: "node-file" }, (args) => ({
-            path: args.path,
-            namespace: "file",
-        }));
-        // Tell esbuild's default loading behavior to use the "file" loader for
-        // these ".node" files.
-        const opts = build.initialOptions;
-        opts.loader = opts.loader || {};
-        opts.loader[".node"] = "file";
-    },
-};
-// Keep .png imports as require() calls in the dist bundle instead of inlining
-// them as base64 data urls, so images ship as files loaded on demand rather
-// than megabytes of string literals in every consuming bundle. The import
-// path is rewritten to stay correct relative to the output file, since the
-// application build resolves it from there with its "file" loader.
-const externalImagesPlugin = {
-    name: "external-images",
-    setup(build) {
-        build.onResolve({ filter: /\.png$/ }, (args) => {
-            const absolutePath = path.resolve(args.resolveDir, args.path);
-            const outputDirectory = path.dirname(path.resolve(CWD, parsedArgs.outfile));
-            const relativePath = path.relative(outputDirectory, absolutePath).split(path.sep).join("/");
-            return {
-                path: relativePath.startsWith(".") ? relativePath : `./${relativePath}`,
-                external: true,
-            };
-        });
-    },
-};
-export const packageBuild = async () => {
-    try {
-        await build({
-            entryPoints: [parsedArgs.entryPoint],
-            tsconfig: parsedArgs.tsconfig,
-            outfile: parsedArgs.outfile,
-            format: parsedArgs.format,
-            bundle: true,
-            platform: "node",
-            target: "node16",
-            sourcemap: "inline",
-            plugins: [
-                ensureCorrectImportsPlugin,
-                externalImagesPlugin,
-                globImportPlugin(),
-                sassPlugin({
-                    filter: /\.module\.scss$/,
-                    transform: postcssModules({
-                        basedir: __dirname,
-                        generateScopedName: "[name]__[local]___[hash:base64:5]",
-                    }, [tailwindcss]),
-                }),
-                sassPlugin({
-                    filter: /\.scss$/,
-                }),
-                nativeNodeModulesPlugin,
-            ],
-            loader: {
-                ".ttf": "dataurl",
-                ".svg": "text",
-                ".yaml": "text",
-                ".yml": "text",
-                ".yml.hb": "text",
-            },
-        });
-    }
-    catch {
-        process.exit(1);
-    }
-};