Need update in example code about external stylesheet

In example code about external stylesheet https://github.com/zeit/next.js/tree/master/examples/with-global-stylesheet , it still has dangerouslySetInnerHTML. According to this styled-jsx improvement` https://github.com/zeit/styled-jsx/pull/148, we can reference imported stylesheet now.

I tried to change code and it works.

 export default () =>
   <div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
+    <style jsx global>{stylesheet}</style>
     <p>ciao</p>
   </div>

The dangerouslySetInnerHTML does not look right and might trigger eslint error. If my understanding is right, I’ll submit a PR for this.

[giuseppeg]

Alright @mocheng it works indeed! Apparently a combo of babel-plugin-wrap-in-js and webpack’s raw-loader does the trick. But I wouldn’t use it in production yet because the babel plugin doesn’t have tests and when doing server side rendering styled-jsx writes the css in a style tag in the page which means that it is never cached therefore if you have a lot of css and big external files your page size can grow considerably.

Since there is a solution though we might explore ways to allow this in a performant way – maybe we should write external compiled files for SSR in actual .css files and then load them using a regular link tags rather than an inline style.

[giuseppeg]

for regular global styles files I would just serve them from /static and include them in the page with a link tag. You can use a prebuild script to copy or build them into static.