[BUG] Analyze what components have different styling in dev and prod environments

[Baroshem]

Describe how this feature will help us improve
Describe why do you think this feature is needed.

Related to #1882

For now, we know that the issue appears with SfCallToAction with link prop provided. Without it styling is completely the same in dev and prod environments which means that it is rather a single component problem than whole library. If you know about any other components that have the same issue, please post them here.

┆Issue is synchronized with this Jira Zadanie by Unito

[dt2patel]

Here is a link to someone having issues with the header css rendering incorrectly: vuestorefront/vsf-capybara#600

[SkullyFM]

Following our discussion on Discord here is a bit more info on the tests I did following your video to change the default color scheme. I modified the initial project to change from green to purple. At first I thought the dist directory didn't reflect those changes but I made a mistake (I used only yarn build and not yarn generate which means I used the old static files before modifying the color scheme.)

The new color does show on the static site but there are still some missing classes.

Git project has been updated here:
https://github.com/SkullyFM/test-storefrontui-nuxt/

[FRSgit]

Hey @SkullyFM and @dt2patel!

Thanks for sharing your use cases in this issues, especially the reproduction from @SkullyFM - it was really useful! 🙌

After looking more closely into this issue it seems that there is still some non-deterministic behaviour in how vue-server-renderer orders styling blocks within .vue page files vs global styling 😞
As a resolution I've added a note about this behaviour to our docs: #2867
I've also managed to fix your use case by changing global selector to :root body.

As SFUI1 is now in LTS mode I think that documentation addition resolves this issue. Please try it out and raise a new issue if you think that the problem can be and should be targeted differently! 🆘

Also, try out new version of SFUI which operates on Vue@3 (and react) - so it does not have this problem anymore! 😄

Cheers!