CSS Mods Require Browser Reload to see

[kensodemann]

Stencil version:

 @stencil/core@1.9.0-18

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
Changes to CSS are not immediately displayed in the browser. Rather, you have to refresh the browser.

Expected behavior:
CSS changes would be displayed via the browser without a need for refresh.

Steps to reproduce:

1. git clone https://github.com/jcfranco/stencil-changes-from-partials-are-not-picked-up.git
2. cd stencil-changes-from-partials-are-not-picked-up
3. npm i
4. npm start
5. change some styling in scss/includes/_partial.scss or components/my-component/my-component.scss
6. note that the project is rebuilt due to the file change
7. note that the change is not reflected in the browser
8. refresh the browser, and see the change is now reflected

Next npm i @stencil/core@latest to get latest 1.8.x and redo the above steps starting with the npm start.

Now the changes are reflected in the browser right away as expected.

Also tested using https://github.com/kensodemann/kws-weather-widgets, which uses CSS instead of SASS. Same issue: 1.8.x works fine, 1.9.x requires a reload of the browser to see CSS mods.

[adamdbradley]

9a015e9

[kensodemann]

I am getting reports of there being a regression with this in current versions of Stencil (1.17.3 specifically), but in testing this it is not so much a "regression" as it appears to be an issue that the fix that was released above in 1.9.1 did not make it into the next compiler (which at the time was hidden behind the --next option).

If you do the following

1. git clone https://github.com/jcfranco/stencil-changes-from-partials-are-not-picked-up.git
2. cd stencil-changes-from-partials-are-not-picked-up
3. npm i
4. npm i @stencil/core@1.9.1
5. npm start
6. modify the color specified in src/scss/includes/_partial.scss

Notice that the source does a rebuild and the text color changes.

1. stop the dev server
2. restart the dev server via: npm run start -- --next
3. modify the color specified in src/scss/includes/_partial.scss

The source still does a rebuild, but the color does not change. In order to see the change you must restart the server.

This is the consistent with how it works in 1.17.3 but you no longer need the --next flag.