HMR causes component styles to disappear

🐛 Bug Report

HMR works but loses inline styles until you refresh the whole page.

🎛 Configuration

See https://github.com/beyonk-adventures/svelte-parcel-hmr-issue

💻 Code Sample

See https://github.com/beyonk-adventures/svelte-parcel-hmr-issue

If you npm i then npm run dev you will see the time, in green, in realtime.

If you then change the component’s CSS to ‘red’ rather than ‘green’, you will actually lose all component defined styles until you refresh the page (font will become normal instead of bold, and black).

Upon refresh your style will have updated and you will see the time in red.

Worth noting - this might be caused by the fix for the other issue #15 whereby multiple css files added to parcel’s tree were causing styles to be overwritten.

🌍 Your Environment

See package.json for versions Ubuntu 18.10 Chrome Version 68.0.3440.106 (Official Build) (64-bit)

[adamhepton]

If you are using inline styles, it is preferable to have a compilerOptions config specified for css: true in order for HMR to work with CSS changes, e.g. (in a svelte.config.js file at the root of your project):

module.exports = {
  compilerOptions: {
    css: true
  }
}

[antony]

@adamhepton This fixes it! Wow! I can’t thank you enough!

This needs to be in the docs. I’ll open a PR.