styled-components improvement #297

datoml · 2016-12-31T14:33:07Z

Hello,

I made some tests with server side rendering and the styled components feature branch.
Seems like the server side rendering doesn't work for the styles.
Regarding to this discussions styled-components/styled-components#124 I implemented this:

file: src/server/middleware/reactApplication/index.js

import styleSheet from 'styled-components/lib/models/StyleSheet'
...
// Create our React application and render it into a string.
  const reactAppString = renderToString(
    <CodeSplitProvider context={codeSplitContext}>
      <ServerRouter location={request.url} context={reactRouterContext}>
        <DemoApp />
      </ServerRouter>
    </CodeSplitProvider>,
  );

  const styles = styleSheet.rules().map(rule => rule.cssText).join('\n')

  // Generate the html response.
  const html = generateHTML({
    // Provide the full app react element.
    reactAppString,
    // Nonce which allows us to safely declare inline scripts.
    nonce,
    // Running this gets all the helmet properties (e.g. headers/scripts/title etc)
    // that need to be included within our html.  It's based on the rendered app.
    // @see https://github.com/nfl/react-helmet
    helmet: Helmet.rewind(),
    // We provide our code split state so that it can be included within the
    // html, and then the client bundle can use this data to know which chunks/
    // modules need to be rehydrated prior to the application being rendered.
    codeSplitState: codeSplitContext.getState(),
    styledComponents: styles,
  });

Then I added them into

file: src/server/middleware/reactApplication/generateHTML.js
export default function generateHTML(args: Args) {
  const { reactAppString, initialState, nonce, helmet, codeSplitState, styledComponents } = args;
  ...
return `<!DOCTYPE html>
    <html ${helmet ? helmet.htmlAttributes.toString() : ''}>
      <head>
        ${helmet ? helmet.title.toString() : ''}
        ${helmet ? helmet.meta.toString() : ''}
        ${helmet ? helmet.link.toString() : ''}
        ${styleTags(assetsForRender.css)}
        <style>${styledComponents || ''}</style>
        ${helmet ? helmet.style.toString() : ''}
      </head>
      <body>

Looks now a lot nicer to me.
Can someone confirm that this is a good solution? :)
Thanks

The text was updated successfully, but these errors were encountered:

codepunkt · 2016-12-31T16:55:59Z

It's a start.
More information on styled-components SSR @ styled-components/styled-components#214

ctrlplusb · 2017-01-01T08:36:43Z

Thanks for looking into this @datoml :)

I'll have a review of this soon. :)

teonik · 2017-01-09T12:41:00Z

The glamor styleSheet that styled-components exposes is a singleton.With the above approach every request to render a page will result in it's styles being appended to it.So in subsequent requests you end up sending previously rendered CSS unrelated to the current page.

Calling styleSheet.flush() in between requests doesn't seem to work at the moment.

ctrlplusb · 2017-01-09T12:53:33Z

Has someone got a full working implementation that they are willing to create a PR for?

datoml · 2017-01-09T13:01:07Z

I am currently using styled-components for my project with the hope that there will be a fix in die near future for this.
@ctrlplusb I am not that familiar with creating a PRs :).

ctrlplusb · 2017-01-09T15:08:16Z

@datoml I encourage you to try!

Check out this cool egghead course:
How to Contribute to an Open Source Project on GitHub

datoml · 2017-01-09T15:31:56Z

Thanks for the link. I'll have a look :):

rlindskog · 2017-01-09T23:11:32Z

@ctrlplusb I implemented the SSR changed that @datoml recommended above, you can check it out here. It seems to work, but it double injects the styles, once on the server and once on the client.

codepunkt · 2017-01-10T07:28:42Z

I'm wondering if you read what i linked. That's all known and discussed and there's no solution for it yet, even though it's very simple in principle
styled-components/styled-components#214

datoml · 2017-01-10T07:38:53Z

I did.
We currently have to wait that this gets implemented.
Everything here is currently a workaround until its done and gets released.

ctrlplusb · 2017-01-10T07:41:20Z

FYI I have been using styletron, which has no problems with SSR and has a similar API to styled-components. In case this is blocking someones adoption, there are alternatives.

datoml · 2017-01-10T07:43:47Z

I tried styletron but I like the api from styled-components more.
Doing something like this feels awesome to me :).

import styled from 'styled-components';

const button = styled.button`
  color: green;
  border: 1px solid blue;
`;

codepunkt · 2017-01-10T07:45:34Z

I'm hard to convince as well. On the one hand i'm not sure about the performance implications of styletrons many CSS selectors in really large DOMs (think Githubs Diff view), on the other hand i love to be able to write CSS instead of objects, including inline syntax highlighting etc, so i'm with @datoml on that one :)

ctrlplusb · 2017-01-10T09:00:38Z

Totally see your guys points, I guess I prefer the object style as it opens up the Javascript as the API to modifying/merging styles:

const centeredButtonStyle = Object.assign(
  {}, 
  { color: 'red' },
  theme.layout.centered
);

I have been really enjoying creating and composing objects for more generic styles.

datoml · 2017-01-10T09:25:03Z

Thats true.
The reason styled-components won my heart was that I can copy the whole css and go back to good old css styles.
Every approach has it pros and cons tho :).

ctrlplusb · 2017-01-11T09:35:38Z

Check this out: https://github.com/RafalFilipek/styled-props

:)

datoml · 2017-01-11T09:45:16Z

I will have a look on it :).
But it seems similar to the build in ThemeProvider.
https://github.com/styled-components/styled-components#theming

Or am I missing something? :D

teonik · 2017-01-11T10:46:22Z

@codepunkt Thanks for suggesting styletron, i was totally unaware of it's existence....:P

lucianlature · 2017-01-11T11:14:54Z

@ctrlplusb @codepunkt Server Rendering API for styled-components has just been merged into master

codepunkt · 2017-01-11T11:25:50Z

@lucianlature it was merged into v2 branch, not master.

lucianlature · 2017-01-11T11:28:06Z

Got too excited for a moment, sorry.

bkniffler · 2017-01-17T11:30:53Z

Out of curiosity, did you guys look at https://github.com/rofrischmann/fela
According to https://github.com/hellofresh/css-in-js-perf-tests it is extremely fast and creates very small sized output compared to something like glamor/styletron. The docs are great (http://fela.js.org/docs/guides/UsageWithReact.html), it works with react-native, and SSR is implemented and works too.

And with https://github.com/jakecoxon/babel-plugin-css-to-js you can have a very similar API to styled-components!

codepunkt · 2017-01-18T10:33:26Z

@bkniffler The alternatives are endless. CSS in JSS fatigue! 🤣

mschipperheyn · 2017-03-03T22:57:57Z

In order to get styled-components working server-side with current v2-beta, which api seems still a bit under discussion (styled-components/styled-components#214), you can use this approach.

https://gist.github.com/mschipperheyn/c17280278218074a53147f54259af66a

The reference keyword is: styledComponentCSS

I based this on react-universally@next

designspin · 2017-07-13T16:28:55Z

Does anybody have styled components working with react universally nowadays? I am using version 2.1.1 of styled components, but have not had any joy. I looked at the gist provided by 'mschipperheyn', but it looks like things have changed in styled-components land!

I am trying to use ServerStyleSheet, creating an instance and then using collectStyles on my app component. But I am missing something, getStyleElement returns an empty array. I know that app is async so perhaps at the point of collection it is empty?

designspin · 2017-07-13T18:49:03Z

Okay, I was on the right track. I managed to implement Styled Components by passing my ServerStyleSheet instance as a prop on ServerHTML, then using .getStyleElement() to add the css to headerElements within ServerHTML.js. I am really pleased I got this working and also pleased I found React Universally.

oyeanuj · 2017-07-13T19:45:47Z

@designspin is there a gist you could share if it all works? Btw, here is the main issue on styled-components where you could also maybe post that update for others following the issue - styled-components/styled-components#762

designspin · 2017-07-13T21:39:50Z

@oyeanuj

Here is a GIST of what appears to be working for me right now: https://gist.github.com/designspin/c11095334ae1f105d1f93123232d37fd

strues · 2017-07-13T22:21:57Z

@designspin If you will link me a repo where you're having issues, I'll take a look.

designspin · 2017-07-13T22:24:49Z

@strues

No issue, the above GIST is in fact a solution. It is working for me, thanks.

oyeanuj · 2017-08-31T19:40:09Z

@mschipperheyn @strues @designspin Does anyone have the setup for using the starter kit with SC v2? The feature branch still seems to have v1 of SC.

rlindskog mentioned this issue Jan 10, 2017

Added styled-components SSR #309

Merged

kitten mentioned this issue Jul 28, 2017

2.0.0 react universally doesn't work anymore styled-components/styled-components#762

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

styled-components improvement #297

styled-components improvement #297

datoml commented Dec 31, 2016 •

edited

Loading

codepunkt commented Dec 31, 2016

ctrlplusb commented Jan 1, 2017

teonik commented Jan 9, 2017

ctrlplusb commented Jan 9, 2017

datoml commented Jan 9, 2017

ctrlplusb commented Jan 9, 2017

datoml commented Jan 9, 2017

rlindskog commented Jan 9, 2017

codepunkt commented Jan 10, 2017

datoml commented Jan 10, 2017

ctrlplusb commented Jan 10, 2017

datoml commented Jan 10, 2017

codepunkt commented Jan 10, 2017 •

edited

Loading

ctrlplusb commented Jan 10, 2017

datoml commented Jan 10, 2017 •

edited

Loading

ctrlplusb commented Jan 11, 2017

datoml commented Jan 11, 2017

teonik commented Jan 11, 2017

lucianlature commented Jan 11, 2017

codepunkt commented Jan 11, 2017

lucianlature commented Jan 11, 2017

bkniffler commented Jan 17, 2017

codepunkt commented Jan 18, 2017

mschipperheyn commented Mar 3, 2017

designspin commented Jul 13, 2017

designspin commented Jul 13, 2017

oyeanuj commented Jul 13, 2017

designspin commented Jul 13, 2017 •

edited

Loading

strues commented Jul 13, 2017

designspin commented Jul 13, 2017

oyeanuj commented Aug 31, 2017

styled-components improvement #297

styled-components improvement #297

Comments

datoml commented Dec 31, 2016 • edited Loading

codepunkt commented Dec 31, 2016

ctrlplusb commented Jan 1, 2017

teonik commented Jan 9, 2017

ctrlplusb commented Jan 9, 2017

datoml commented Jan 9, 2017

ctrlplusb commented Jan 9, 2017

datoml commented Jan 9, 2017

rlindskog commented Jan 9, 2017

codepunkt commented Jan 10, 2017

datoml commented Jan 10, 2017

ctrlplusb commented Jan 10, 2017

datoml commented Jan 10, 2017

codepunkt commented Jan 10, 2017 • edited Loading

ctrlplusb commented Jan 10, 2017

datoml commented Jan 10, 2017 • edited Loading

ctrlplusb commented Jan 11, 2017

datoml commented Jan 11, 2017

teonik commented Jan 11, 2017

lucianlature commented Jan 11, 2017

codepunkt commented Jan 11, 2017

lucianlature commented Jan 11, 2017

bkniffler commented Jan 17, 2017

codepunkt commented Jan 18, 2017

mschipperheyn commented Mar 3, 2017

designspin commented Jul 13, 2017

designspin commented Jul 13, 2017

oyeanuj commented Jul 13, 2017

designspin commented Jul 13, 2017 • edited Loading

strues commented Jul 13, 2017

designspin commented Jul 13, 2017

oyeanuj commented Aug 31, 2017

datoml commented Dec 31, 2016 •

edited

Loading

codepunkt commented Jan 10, 2017 •

edited

Loading

datoml commented Jan 10, 2017 •

edited

Loading

designspin commented Jul 13, 2017 •

edited

Loading