diff options
Diffstat (limited to 'packages/web-util/src/index.build.ts')
-rw-r--r-- | packages/web-util/src/index.build.ts | 141 |
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; } |