bug: Changes to the @Component decorator's styles do not trigger a hot module reload

[karlpablo]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

4.19.2

Current Behavior

Any changes to the @Component decorator's styles don't trigger a hot module reload to automatically update the page, needing a manual page refresh to see any visual changes.

EDIT (7/15/24): It seems that the styleUrl is affected as well.

The file watcher detects that something has changed with the component rather than with the styles of it.

https://github.com/user-attachments/assets/b4bea89d-87ec-493e-8e15-023ca8c145e4

Expected Behavior

The previewing browser should automatically re-inject the component AKA hot module reloading on any updates to styles.

System Info

OS: macOS Ventura 13.3.1
Google Chrome: 125.0.6422.176 (Official Build) (arm64)
NPM: 10.7.0

System: node 20.11.1
Platform: darwin (22.4.0)
CPU Model: Apple M2 Pro (10 cpus)
Compiler: /Users/[redacted]/Sites/stencil-starter/node_modules/@stencil/core/compiler/stencil.js
Build: 1719938890
Stencil: 4.19.2 🏉
TypeScript: 5.4.5
Rollup: 2.56.3
Parse5: 7.1.2
jQuery: 4.0.0-pre
Terser: 5.31.1

Steps to Reproduce

From a fresh install, comment out the @Component decorator's styleUrl of the my-component.tsx. Then, add styles: 'div { background-color: red; }', then start the local dev server (npm start).

Open the preview in a browser, then change red to any other color. The console will detect the change and will log out "[Build] Updated component: my-component", but the actual changes won't show up until you refresh the page.

Code Reproduction URL

https://github.com/karlpablo/stencil-starter

Additional Information

~~This does not happen when using styleUrl pointed to a local stylesheet. Stencil does detect the changes and the browser console will log out "[Build] Updated styles: my-component" (notice it says "styles" instead of "component").

This makes styling very difficult if you want the styles to be in the same files as the owning component, so for now, as a workaround, I am dumping everything into one CSS file.~~

EDIT (7/15/24): It seems that the styleUrl is affected as well.

[christian-bromann]

Thanks for raising the issue. I was able to validate the bug and it seems to be an issue with the Stencil compiler not recognizing changes for this part of the component. We appreciate any help on this issue as the Stencil team works on their own priorities and can't provide any date when someome from the team will be able to look into this. We however are happy to provide support coming up with a bug fix.

[karlpablo]

It seems I was wrong about this not happening when using styleUrl.

It started happening recently when I was working on a unified stylesheet (not the global one from the config) imported by the root component via styleUrl. What's weird was it only started happening when the file started to grew in size/number of lines.

The workaround of refreshing the page also became very inconsistent. 60% the time, I would now have to restart the dev watcher process just to get the UI to update. I even disabled caching already and it's still the same.

[karlpablo]

Thanks for raising the issue. I was able to validate the bug and it seems to be an issue with the Stencil compiler not recognizing changes for this part of the component. We appreciate any help on this issue as the Stencil team works on their own priorities and can't provide any date when someome from the team will be able to look into this. We however are happy to provide support coming up with a bug fix.

I can check the source code, but I would appreciate a headstart. Can you point me to the part responsible for comparing watched files for changes, please?

[christian-bromann]

I think src/compiler/transpile/create-watch-program.ts is a good place to start as well as src/compiler/transpile/create-watch-program.ts.

[karlpablo]

I think src/compiler/transpile/create-watch-program.ts is a good place to start as well as src/compiler/transpile/create-watch-program.ts.

They're the same file.

[christian-bromann]

They're the same file.

Ouch, yes 🙈