Esbuild config for Shopify Themes

esbuild.config.js

import esbuild from "esbuild";
import { sassPlugin } from "esbuild-sass-plugin";
import postcss from "postcss";
import autoprefixer from "autoprefixer";
import postcssPresetEnv from "postcss-preset-env";

esbuild
  .build({
    entryPoints: {
      theme: "src/scripts/theme.js",
    },
    bundle: true,
    outdir: "assets",
    target: ["es2018"],
    plugins: [
      sassPlugin({
        async transform(source, resolveDir) {
          const { css } = await postcss([
            autoprefixer,
            postcssPresetEnv({ stage: 0 }),
          ]).process(source, { from: undefined });
          return css;
        },
      }),
    ],
    minify: true,
    watch: true,
    sourcemap: true,
  })
  .then(() => {
    console.log("Watching files...");
  })
  .catch((e) => console.error(e.message));