Styles loading on page when component isn't actually rendered?
seancrater opened this issue · comments
What is the current behavior?
To preface: I believe this would be considered a bug. Currently, I'm experiencing an interesting behavior where our styles (placed in a nested component that is conditionally rendered if a user is logged in via a v-if) are rendered to the tag regardless of if the component is actually mounted or not.
If the current behavior is a bug, please provide the steps to reproduce.
To reproduce, place a v-if statement that evaluates to false around a component with nested styles (such as a background color on the body tag) and the styles will still render on the page if the component is hidden.
What is the expected behavior?
I'd expect styles to be embedded in the page when a component is mounted so styles can change the page experience depending on the Vue state.
If this is a feature request, what is motivation or use case for changing the behavior?
If this is a feature, my motivation would be so we can conditionally change padding on non-Vue elements how we have in the past with prior webpack/vue-style-loader versions. (This issue is being triggered by upgrading)
Please mention other relevant information such as your webpack version, Node.js version and Operating System.
webpack: 4.12.2
vue-style-loader: 4.1.0
Node 8.11.3
OSX 10.13.2
This is a documented and intentional change.
The previous behavior was loading styles on mount but the styles are not removed when mounted. It's essentially a global side effect in your component mount hook, and is a brittle pattern as the order of your component being mounted is dependent on user interaction and thus indeterministic. In addition, the behavior is different from the case when you build your app with CSS extraction.
My suggestion is that you should not rely on this behavior and instead use explicit state to control the style toggling.