feat: Proper CSS api & css bundle (#269)

Co-authored-by: Vap0r1ze <superdash993@gmail.com>
This commit is contained in:
Ven 2022-12-25 20:47:35 +01:00 committed by GitHub
parent 2172cae779
commit 2e5d27b6b6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 438 additions and 126 deletions

View file

@ -17,9 +17,9 @@
*/
import { exec, execSync } from "child_process";
import { existsSync } from "fs";
import { existsSync, readFileSync } from "fs";
import { readdir, readFile } from "fs/promises";
import { join } from "path";
import { join, relative } from "path";
import { promisify } from "util";
export const watch = process.argv.includes("--watch");
@ -35,7 +35,7 @@ export const banner = {
// https://github.com/evanw/esbuild/issues/619#issuecomment-751995294
/**
* @type {esbuild.Plugin}
* @type {import("esbuild").Plugin}
*/
export const makeAllPackagesExternalPlugin = {
name: "make-all-packages-external",
@ -46,7 +46,7 @@ export const makeAllPackagesExternalPlugin = {
};
/**
* @type {esbuild.Plugin}
* @type {import("esbuild").Plugin}
*/
export const globPlugins = {
name: "glob-plugins",
@ -87,7 +87,7 @@ export const globPlugins = {
};
/**
* @type {esbuild.Plugin}
* @type {import("esbuild").Plugin}
*/
export const gitHashPlugin = {
name: "git-hash-plugin",
@ -103,7 +103,7 @@ export const gitHashPlugin = {
};
/**
* @type {esbuild.Plugin}
* @type {import("esbuild").Plugin}
*/
export const gitRemotePlugin = {
name: "git-remote-plugin",
@ -125,7 +125,7 @@ export const gitRemotePlugin = {
};
/**
* @type {esbuild.Plugin}
* @type {import("esbuild").Plugin}
*/
export const fileIncludePlugin = {
name: "file-include-plugin",
@ -147,6 +147,31 @@ export const fileIncludePlugin = {
}
};
const styleModule = readFileSync("./scripts/build/module/style.js", "utf-8");
/**
* @type {import("esbuild").Plugin}
*/
export const stylePlugin = {
name: "style-plugin",
setup: ({ onResolve, onLoad }) => {
onResolve({ filter: /\.css\?managed$/, namespace: "file" }, ({ path, resolveDir }) => ({
path: relative(process.cwd(), join(resolveDir, path.replace("?managed", ""))),
namespace: "managed-style",
}));
onLoad({ filter: /\.css$/, namespace: "managed-style" }, async ({ path }) => {
const css = await readFile(path, "utf-8");
const name = relative(process.cwd(), path).replaceAll("\\", "/");
return {
loader: "js",
contents: styleModule
.replaceAll("STYLE_SOURCE", JSON.stringify(css))
.replaceAll("STYLE_NAME", JSON.stringify(name))
};
});
}
};
/**
* @type {import("esbuild").BuildOptions}
*/
@ -158,7 +183,7 @@ export const commonOpts = {
sourcemap: watch ? "inline" : "",
legalComments: "linked",
banner,
plugins: [fileIncludePlugin, gitHashPlugin, gitRemotePlugin],
plugins: [fileIncludePlugin, gitHashPlugin, gitRemotePlugin, stylePlugin],
external: ["~plugins", "~git-hash", "~git-remote"],
inject: ["./scripts/build/inject/react.mjs"],
jsxFactory: "VencordCreateElement",