svelte-sharg/rollup.config.mjs

import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import autoprefixer from "autoprefixer";
import child_process from "child_process";
import postcss from "postcss";
import livereload from "rollup-plugin-livereload";
import scss from "rollup-plugin-scss";
import svelte from "rollup-plugin-svelte";
import { terser } from "rollup-plugin-terser";
import sveltePreprocess from "svelte-preprocess";

const production = !process.env.ROLLUP_WATCH;

function serve() {
  let server;

  function toExit() {
    if (server) server.kill(0);
  }

  return {
    writeBundle() {
      if (server) return;
      server = child_process.spawn("yarn", ["start", "--dev"], {
        stdio: ["ignore", "inherit", "inherit"],
        shell: true,
      });

      process.on("SIGTERM", toExit);
      process.on("exit", toExit);
    },
  };
}

export default {
  input: "src/main.ts",
  output: {
    sourcemap: true,
    format: "module",
    name: "sharg",
    file: "public/build/bundle.js",
    externalLiveBindings: false,
    preferConst: true,
    strict: true,
    compact: production,
  },
  plugins: [
    // Svelte adds "stdin" to the sourceMap
    svelte({
      preprocess: [
        sveltePreprocess({
          scss: {
            renderSync: true,
          },
        }),
      ],
      compilerOptions: {
        // enable run-time checks when not in production
        dev: !production,
      },
    }),

    // The processor (postcss) adds "bundle.css" to the sourceMap
    // but for some reason only in dev mode?
    scss({
      sourceMap: true,
      outputStyle: production ? "compressed" : "expanded",
      processor() {
        // If this is a separate plugin, it doesn't seem to run (autoprefixer doesn't run)
        return postcss({
          plugins: [autoprefixer()],
        });
      },
    }),

    resolve({
      browser: true,
      dedupe: ["svelte"],
    }),
    typescript({
      sourceMap: true,
      inlineSources: true,
      exclude: ["node_modules/*", "public/*", "**/service-worker.ts"],
    }),

    // In dev mode, call `yarn start` once
    // the bundle has been generated
    !production && serve(),

    // Watch the `public` directory and refresh the
    // browser on changes when not in production
    !production && livereload("public"),

    // If we're building for production (yarn build
    // instead of yarn dev), minify js
    production &&
      terser({
        mangle: false,
        output: { comments: false },
      }),
  ],
  watch: {
    clearScreen: false,
  },
};