Page not reloaded when css file changes

[GHNewbiee]

Problem
Web page is not reloaded when a change in css file occurs.

Notes

• Change is logged as expected.
• .reboost_cache was also erased; nothing changed.

Version
reboost: 0.17.0

Files

package.json

{
  "name": "reboost-test",
  "version": "0.0.1",
  "description": "",
  "scripts": {
    "dev": "node reboost"
  },
  "license": "MIT",
  "devDependencies": {
    "reboost": "^0.17.0"
  },
  "dependencies": {
    "lit-element": "^2.4.0",
    "lit-html": "^1.3.0"
  }
}

reboost.js

const {
  start,
  builtInPlugins: {
    CSSPlugin,
    esbuildPlugin,
  }
} = require('reboost');

start({
  entries: [
    ['./src/index.js', './public/dist/index.js']
  ],
  contentServer: {
    root: './public',
    open: { app: '/usr/bin/waterfox-current' }
  },
  plugins: [
    esbuildPlugin({ target: 'es2015' }),
    CSSPlugin()
  ]
});

index.js

import { LitElement, customElement, css, unsafeCSS, html } from 'lit-element';
import cssStyles from './styles.css';

@customElement('my-element')
export class MyElement extends LitElement {
  static get styles() {
    return css`${unsafeCSS(cssStyles)}`; /* or */
    // return css`${unsafeCSS(cssStyles.toString())}`;
  }

  render() {
    return html`
      <div class="background"></div>
      <div class="main">
        <p>
          Get started by editing
          <code>src/index.js</code> and <code>public/index.html</code>
        </p>
      </div>
    `
  }
}

style.css

.main {
  /* position: fixed; */
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.2rem;
  text-align: center;
  font-family: sans-serif;
  color: white;
  background-color: #2a2938;
  padding: 20px;
}

[sarsamurmu]

I going to release a hot fix for that.

[sarsamurmu]

For now, update Reboost to v0.17.1, and set hotReload to false in reboost.js