[V2] Using SSR API on client side

I still can’t find a way to extract styles from client side with SC2. With SC1, I did it this way:

[render static component...]
let cssRules = StyleSheet.rules().map(rule => rule.cssText).join('\n');

When upgrading to SC2, I switch to the new SSR API:

let sheet = new ServerStyleSheet();
[render static component...]
let cssRules = sheet.getStyleTags();

But since I’m on client side, I get the “BrowserTag cannot be cloned!” error when trying to create the ServerStyleSheet object (see #811).

Digging the source code, I find this way to do it:

[render static component...]
let cssRules = StyleSheet.instance.toHTML();

But it generates several <styles> tags, some with data-styled-components attributes, some comments…not a very clean stylesheet.

What is the proper way to extract SC <styles> from the client side, with or without SSR API ?

[PlanetIrata]

I’m using React to build a static page editor/generator, so I need at some point to extract the HTML (with React renderStatic…) and the styles (with SC). At this stage I do everything on the client side. In the end, I may split the app with a server, or not: I may embed the app in an Electron like wrapper, so I’ll still need to extract the style from the client side.

[Igorbek]

Sure, it is pretty simple:

import { create } from 'react-test-renderer';
import { ServerStyleSheet } from 'styled-components';
import StyleSheet from 'styled-components/lib/models/StyleSheet';
import * as css from 'css';

StyleSheet.reset(true); // reset to use server stylesheet

export function testComponent(element) {
    const sheet = new ServerStyleSheet();
    const output = create(sheet.collectStyles(element));

    expect(output).toMatchSnapshot(); // take snapshot of output

    // prettify css output slightly
    const cssStyles = sheet.getStyleElement()
        .map(el => el.props.dangerouslySetInnerHTML.__html)
        .join();
    const styles = css.stringify(css.parse(cssStyles));

    expect(styles).toMatchSnapshot(); // take a snapshot of produced css
}

// somewhere in the test:
import { testComponent } from ...

it('renders', () => {
    testComponent(<MyStyledComponentToTest ... />);
});

In fact, I have my own snapshot serializer that produces nice snapshots of input element, its rendered output and captured css.