Rollup

rollup.config.js

import path from 'path';
import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import images from 'rollup-plugin-image-files';
import postcss from 'rollup-plugin-postcss';
import progress from 'rollup-plugin-progress';

import purgecss from '@fullhuman/postcss-purgecss';
import tailwindcss from 'tailwindcss';
import postcssImport from 'postcss-import';
import postcssPresetEnv from 'postcss-preset-env';
import postcssBackgroundSvgs from 'postcss-encode-background-svgs';

const production = !process.env.ROLLUP_WATCH;

const getPath = (chunkName, generate) =>
  generate === 'ssr'
    ? path.join('server', 'dist', `${chunkName}`)
    : path.join('dist', `${chunkName}`);

const getPlugins = (chunkName, generate) => [
  progress(),
  postcss({
    modules: false,
    plugins: [
      postcssImport(),
      tailwindcss('./tailwind.config.js'),
      postcssPresetEnv({
        preserve: true,
        autoprefixer: { grid: 'autoplace' },
        stage: 1,
        features: {
          'color-mod-function': {
            unresolved: 'warn',
          },
          'custom-properties': {
            preserve: true,
          },
          'nesting-rules': true,
        },
      }),
      postcssBackgroundSvgs,
      production &&
        purgecss({
          content: ['./**/*.html', './**/*.svelte'],
          defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
        }),
    ],
  }),
  svelte({
    dev: !production,
    generate,
    emitCss: true,
    css:
      generate === 'ssr'
        ? false
        : css => {
            css.write(`${getPath(chunkName, generate)}.css`);
          },
    onwarn: (warning, handler) => {
      if (warning.code === 'a11y-distracting-elements') return;
      handler(warning);
    },
  }),
  images(),
  resolve({
    browser: true,
    dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/'),
  }),
  commonjs(),

  production && terser(),
];

const getOutput = (chunkName, format, generate) => ({
  sourcemap: generate !== 'ssr',
  format,
  name: chunkName,
  file: `${getPath(chunkName, generate)}.js`,
});

export default [
  {
    input: 'server/templates/doctorPage.js',
    output: getOutput('doctorPage', 'cjs', 'ssr'),
    plugins: getPlugins('doctorPage', 'ssr'),
  },
  {
    input: 'server/templates/doctorPage.js',
    output: getOutput('doctorPage', 'iife', 'browser'),
    plugins: getPlugins('doctorPage', 'browser'),
  },
];