tsdown watch mode doesn't track CSS file changes

[jackholden]

Hello,

Firstly I just want to say how awesome tsdown is!

I seem to have ran into a bit of an issue regarding watch mode with CSS files. When I make an update in the .css file, no rebuild is triggered. I have to instead go cmd + s in the .ts file which then triggers the rebuild.

Am I doing something wrong?

Reproduction steps:

1. I run npm run dev (tsdown --watch)
2. I import my CSS files with ?inline
3. LightningCSS then transforms the @Custom-Media rules etc.
4. I make a change in the .ts file, all is well and updates.
5. I make a change in the .css file, nothing happens.

import css from './hello-world.css?inline';
import reset from '../../shared-styles/reset.css?inline';

const resetSheet = new CSSStyleSheet();
resetSheet.replaceSync(`${reset}`);

const componentSheet = new CSSStyleSheet();
componentSheet.replaceSync(`${css}`);

export class HelloWorld extends HTMLElement {
    #internals: ElementInternals;

    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.#internals = this.attachInternals();
        this.shadowRoot!.adoptedStyleSheets = [resetSheet, componentSheet];
    }

    connectedCallback() {
        this.#internals.ariaLabel = 'A label';
        this.render();
    }

    render() {
        this.shadowRoot!.innerHTML = `
            <div>
                <h1>Hello world!</h1>
            </div>
        `;
    }
}

customElements.define('hello-world', HelloWorld);

Many thanks.

[sxzz]

Thanks for the feedback, but please raise an issue with minimal reproduction.

[jackholden]

An issue was created here.