vue-styled-components icon indicating copy to clipboard operation
vue-styled-components copied to clipboard

FOUC solution based on radicalpi's implementation

Open IntusFacultas opened this issue 3 years ago • 2 comments

Hi there, this expands on the idea implemented by @radicalpi in #112 by fixing the double injection issue where the server side rendered CSS gets loaded as well as the style tags that are thrown into the

during runtime. I've also refactored the logic they wrote for setting up the server side rendering into a mixin that can be used.

I've tested this with a fairly simple Nuxt project which I've uploaded to a repository here, and I seem to have managed to fix the double injection issue they mentioned.

Here is a screenshot of the element inspector, you'll notice there's only one vue-styled-components style tag image. The other style tags below it are Nuxt specific style tags.

The way I foresee this being used can be seen in pages/index.vue, but I'll share the code here for convenience:

import { StyleSheet, ServerSideRenderMixin } from 'vue-styled-components';
StyleSheet.serverRendered = true;

export default {
  mixins: [ServerSideRenderMixin],
}

IntusFacultas avatar Jul 20 '21 04:07 IntusFacultas

This pull request is meant to address the issue in #52 forgot to mention

IntusFacultas avatar Jul 20 '21 04:07 IntusFacultas

I've fixed the merge conflict

IntusFacultas avatar Jul 27 '21 14:07 IntusFacultas