Adding collectRules to expose currently inserted styelsheet rules

[radicalpi]

trafficstars

This adds a very basic module that returns all of the current rules off the Stylesheet singleton (While removing empty ones). The goal of this is to attempt to allow easier implementation of Server-Side Rendering and partially address #52

Example Usage in Nuxt:

import { collectRules } from 'vue-styled-components';

...

head() {
    if (typeof window === 'undefined') {
      const css = collectRules().map(rule => rule.cssText).join('');
      return {
        style: [{ hid: 'ssrStyles', innerHTML: css, type: 'text/css'}],
        __dangerouslyDisableSanitizers: ['style'],
      };
    }
    return {};
  }

This allows Nuxt/Vue Meta to inject all of the inserted rules from StyleSheet into the head of the page being rendered. Limitations being this will have to be done for each top-level "Page", but with access to the underlying rules, it should be easier to build more complete solutions.

I added this as a separate module rather than just exporting StyleSheet to allow for easier expansion in the future and to limit to scope of the exports.

[liqueflies]

I am back working in vue + nuxt. Now I am trying to do this into nuxt plugin, but with no luck.

Is that something that you assume is working or have you tested?

[radicalpi]

It was working to a degree when I created the PR. I later realized that the caveat was that it was adding the styles for any rendered components to a server-side style block, but it was still including all the styles dynamically in the browser. So, it does help prevent FOUC, as the styles are present upfront, but they're included again which isn't ideal. I didn't end up digging much deeper toward a more complete solution. It's also been a while since I looked at this and I have largely moved away from using Vue Styled Components in newer work.