CSS not generated when using nollup and HMR

[risalfajar]

I am using template from https://www.npmjs.com/package/routify-ts, that has built in routify, nollup and HMR.

However when I have installed Smelte and tried to run it using HMR: npm run dev, the css won't be generated.

"scripts": {
      "dev": "run-p routify nollup",
      "build": "routify -b && rollup -c"
      "rollup": "rollup -cw",
      "nollup": "nollup -c --verbose",
      "routify": "routify",
   }

Here's the css loaded in the browser looks like:

But when I am using npm run rollup, or npm run build everything works normally.

rollup config:

import svelte from 'rollup-plugin-svelte-hot'
import Hmr from 'rollup-plugin-hot'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import livereload from 'rollup-plugin-livereload'
import { terser } from 'rollup-plugin-terser'
import typescript from '@rollup/plugin-typescript'
import { copySync, removeSync } from 'fs-extra'
import { spassr } from 'spassr'
import getConfig from '@roxi/routify/lib/utils/config'
import autoPreprocess from 'svelte-preprocess'
import postcssImport from 'postcss-import'
import smelte from 'smelte/rollup-plugin-smelte'
import { nodeResolve } from '@rollup/plugin-node-resolve';


const { distDir } = getConfig() // use Routify's distDir for SSOT
const assetsDir = 'assets'
const buildDir = `${distDir}/build`
const isNollup = !!process.env.NOLLUP
const production = !process.env.ROLLUP_WATCH

// clear previous builds
removeSync(distDir)
removeSync(buildDir)


const serve = () => ({
  writeBundle: async () => {
    const options = {
      assetsDir: [assetsDir, distDir],
      entrypoint: `${assetsDir}/__app.html`,
      script: `${buildDir}/main.js`,
    }
    spassr({ ...options, port: 5002 })
    spassr({ ...options, ssr: true, port: 5005, ssrOptions: { inlineDynamicImports: true, dev: true } })
  },
})
const copyToDist = () => ({
  writeBundle() {
    copySync(assetsDir, distDir)
  },
})


export default {
  preserveEntrySignatures: false,
  input: ['src/main.ts'],
  output: {
    sourcemap: !production,
    format: 'esm',
    dir: buildDir,
    // for performance, disabling filename hashing in development
    chunkFileNames: `[name]${production && '-[hash]' || ''}.js`,
  },
  plugins: [
    svelte({
      compilerOptions: {
        // enable run-time checks when not in production
        dev: !production
      },
      emitCss: false,
      hot: isNollup,
      preprocess: [
        autoPreprocess({
          postcss: { plugins: [postcssImport()] },
          defaults: { style: 'postcss' },
        }),
      ],
    }),
    
    smelte({
      purge: production,
      output: `${distDir}/global.css`, // it defaults to static/global.css which is probably what you expect in Sapper
      postcss: [postcssImport()], // Your PostCSS plugins
      whitelist: [], // Array of classnames whitelisted from purging
      whitelistPatterns: [], // Same as above, but list of regexes
      tailwind: {
        colors: {
          primary: '#b027b0',
          secondary: '#009688',
          error: '#f44336',
          success: '#4caf50',
          alert: '#ff9800',
          blue: '#2196f3',
          dark: '#212121',
        }, // Object of colors to generate a palette from, and then all the utility classes
        darkMode: false,
      },
      // Any other props will be applied on top of default Smelte tailwind.config.js
    }),

    // resolve matching modules from current working directory
    resolve({
      browser: true,
      dedupe: importee => !!importee.match(/svelte(\/|$)/),
    }),
    nodeResolve(),
    commonjs(),
    typescript({
      sourceMap: !production,
      inlineSources: !production,
    }),

    production && terser(),
    !production && !isNollup && serve(),
    !production && !isNollup && livereload(distDir), // refresh entire window when code is updated
    !production && isNollup && Hmr({ inMemory: true, public: assetsDir }), // refresh only updated code
    {
      // provide node environment on the client
      transform: code => ({
        code: code.replace(/process\.env\.NODE_ENV/g, `"${process.env.NODE_ENV}"`),
        map: { mappings: '' },
      }),
    },
    production && copyToDist(),
  ],

  watch: {
    clearScreen: false,
    buildDelay: 100,
  },
}