salesforce/lwc

[HMR] `swapStyle()` API should swap CSS content rather than appending it

aheber opened this issue · 3 comments

aheber commented

Description

Not sure if this is LWC or LWR owned code, maybe the LWC Rollup Plugin? Happy to close this and open a support case for the LWR team if appropriate.

Using LWR with Hot Module Reload/Replacement (HMR) appends a duplicate of the CSS <style> tag for an updated component, never removing the old.

This mostly works but can have unexpected results. If you remove a CSS property assignment then it is still inherited from the previous scoped style tag. The old value will not be in the new appended <style> tag but will still be present in the old tag and the browser will use it.

Steps to Reproduce

Create a new LWR-based project for a single page app. Ensure you have at least one module with a .css file already. Start the project using the dev script action. Add a visible style change via new CSS attribute using the module's .css file. That change should be visible in the browsers live update. Remove that new style attribute from the .css file and allow the HMR to update the component.

Expected Results

Changing a components .css file should correctly change the live web view in all cases.

Actual Results

Updating an attribute mostly works but removing an attribute requires a page reload to be respected. This is because of the duplicated scope <style> tags all applying to the same component.

Browsers Affected

All

Version

  • LWC: 5.0.0
  • LWR: 0.11.13
  • @lwc/synthetic-shadow: 6.2.1

Possible Solution

If possible, maybe only in HRM, it should remove the old style tag before appending the new.

Alternatively, you could generate a different style token for that component when reloaded so the old scoped style no longer applies. (I have no idea the repercussions or effort involved)

nolanlawson commented

Thanks for opening! This is actually a known issue; we're tracking it internally as TD-0185205. I'll mirror this internally since we hopefully will tackle it soon.

nolanlawson commented

Internal WI: W-15347398

aheber commented

Thanks! I figured I wasn't the only one experiencing it.