search

styled-components / vue-styled-components

Visual primitives for the component age. A simple port for Vue of styled-components 💅
MIT License
1.38k stars 99 forks source link

FOUC solution based on radicalpi's implementation #133

Closed IntusFacultas closed 1 year ago

IntusFacultas commented 3 years ago

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 commented 3 years ago

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

IntusFacultas commented 3 years ago

I've fixed the merge conflict