guardian · sndrs · Sep 5, 2017 · Sep 5, 2017 · Sep 5, 2017 · Sep 5, 2017
diff --git a/common/app/rendering/core/JavascriptRendering.scala b/common/app/rendering/core/JavascriptRendering.scala
@@ -56,7 +56,7 @@ trait JavascriptRendering extends Logging {
   private def prescript: ByteArrayInputStream = {
     val pre =
       """
-        |var global = global || this, self = self || this, window = window || this;
+        |var global = global || this, self = self || this;
         |
         |var console = {};
         |

diff --git a/ui/.babelrc b/ui/.babelrc
@@ -10,6 +10,7 @@
         ["babel-plugin-transform-runtime", {
             "polyfill": false
         }],
+        "styled-jsx/babel",
         ["babel-plugin-transform-react-jsx", {
             "pragma": "h"
         }]

diff --git a/ui/__config__/webpack.config.js b/ui/__config__/webpack.config.js
@@ -74,6 +74,10 @@ const config = {
             'node_modules', // default location, but we're overiding above, so it needs to be explicit
         ],
         extensions: ['.js', '.jsx'],
+        alias: {
+            // some libs expect react, this stops them bundling it
+            react: 'preact',
+        },
     },
     resolveLoader: { modules: [path.resolve(ui, '__tools__'), 'node_modules'] },
     watchOptions: { ignored: /node_modules/ },

diff --git a/ui/__tools__/svg-loader.js b/ui/__tools__/svg-loader.js
@@ -22,24 +22,7 @@ module.exports = function loadSVG(source) {
             `export default props => {
                 const svg = ${converter.convert(result.data)};
 
-                function setStyle(node, style) {
-                    node.attributes.style = Object.assign({}, node.attributes.style, style);
-                }
-
-                function setBlockStyles(node) {
-                    const style = props['block-styles'][node.attributes['data-block']];
-                    if (style) setStyle(node, style);
-                    node.children.forEach(setBlockStyles);
-                }
-
-                if (props.className) {
-                    if (svg.attributes['class']) {
-                        svg.attributes['class'] += props.className;
-                    } else {
-                        svg.attributes['class'] = props.className;
-                    }
-                }
-                if (props['block-styles']) setBlockStyles(svg);
+                Object.assign(svg.attributes, props);
 
                 return svg;
             }

diff --git a/ui/package.json b/ui/package.json
@@ -60,6 +60,7 @@
         "preact-svg-loader": "^0.2.0",
         "prettier": "^1.5.3",
         "sass-loader": "^6.0.6",
+        "styled-jsx": "^1.0.10",
         "stylelint-config-standard": "^17.0.0",
         "stylelint-order": "^0.6.0",
         "stylelint-scss": "^2.0.0",

diff --git a/ui/src/assets/images/guardian-logo-320.svg b/ui/src/assets/images/guardian-logo-320.svg
diff --git a/ui/src/components/head/index.js b/ui/src/components/head/index.js
@@ -7,7 +7,7 @@
 import resetCSS from './reset.css';
 import fontsCSS from './fonts.css';
 
-export default (props: any, css: string) =>
+export default (props: any, css: Array<string>) =>
     `<head lang="en" data-page-path="/uk">
         <meta charset="utf-8"/>
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -19,5 +19,5 @@ export default (props: any, css: string) =>
         <link rel="stylesheet" href="${props.fontsUrl}">
         <style>${resetCSS}</style>
         <style>${fontsCSS}</style>
-        ${css}
+        ${css.join('\n')}
     </head>`;
diff --git a/ui/src/index.server.jsx b/ui/src/index.server.jsx
@@ -3,6 +3,7 @@
 import { render as renderToString } from 'preact-render-to-string';
 import { StyletronProvider } from 'styletron-preact';
 import StyletronServer from 'styletron-server';
+import { flushToHTML as getStyledJSXStylesheetsHtml } from 'styled-jsx/server';
 
 import head from 'components/head';
 import Body from 'components/body';
@@ -26,7 +27,10 @@ export const render = (props: Object) => {
     return `
         <!DOCTYPE html>
         <html lang="en">
-            ${head(props, styletron.getStylesheetsHtml())}
+            ${head(props, [
+                styletron.getStylesheetsHtml(),
+                getStyledJSXStylesheetsHtml(),
+            ])}
             ${body}
         </html>
     `.trim();

diff --git a/ui/src/views/404/index.jsx b/ui/src/views/404/index.jsx
@@ -15,17 +15,21 @@ import {
     logo,
 } from './style.js.scss';
 
-export default ({ beaconUrl }: Object) => (
+export default ({ beaconUrl }: Object) =>
     <div style={fluidWrap}>
         <div style={topBar}>
             <a href="/" style={topBarLink}>
                 Home
             </a>
         </div>
-        <Logo
-            block-styles={{ guardian: { fill: colour.brandBlueDark } }}
-            style={logo}
-        />
+        <div>
+            <Logo style={logo} />
+            <style jsx>{`
+                div :global(.guardian) {
+                    fill: ${colour.brandBlueDark};
+                }
+            `}</style>
+        </div>
         <h1 style={heading}>
             Sorry - we haven’t been able to serve the page you asked for.
         </h1>
@@ -80,5 +84,4 @@ export default ({ beaconUrl }: Object) => (
             style={{ display: 'none' }}
             rel="nofollow"
         />
-    </div>
-);
+    </div>;