From 1488d6b5aa3151ad5ad6f236732b235a91cd238f Mon Sep 17 00:00:00 2001 From: Alex Sanders <a@snd.rs> Date: Tue, 5 Sep 2017 16:07:39 +0100 Subject: [PATCH 1/8] install styled jsx --- ui/package.json | 1 + ui/yarn.lock | 112 ++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 105 insertions(+), 8 deletions(-) diff --git a/ui/package.json b/ui/package.json index 5e6a53a074a..3601b199c2a 100644 --- 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/yarn.lock b/ui/yarn.lock index c243f77af4d..97a0ca12fd8 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -283,6 +283,14 @@ babel-code-frame@^6.11.0, babel-code-frame@^6.22.0: esutils "^2.0.2" js-tokens "^3.0.0" +babel-code-frame@^6.20.0: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b" + dependencies: + chalk "^1.1.3" + esutils "^2.0.2" + js-tokens "^3.0.2" + babel-core@^6.0.0, babel-core@^6.24.1, babel-core@^6.25.0: version "6.25.0" resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.25.0.tgz#7dd42b0463c742e9d5296deb3ec67a9322dad729" @@ -445,7 +453,7 @@ babel-loader@^7.1.1: loader-utils "^1.0.2" mkdirp "^0.5.1" -babel-messages@^6.23.0: +babel-messages@^6.23.0, babel-messages@^6.8.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e" dependencies: @@ -491,7 +499,7 @@ babel-plugin-syntax-flow@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d" -babel-plugin-syntax-jsx@^6.8.0: +babel-plugin-syntax-jsx@6.18.0, babel-plugin-syntax-jsx@^6.8.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946" @@ -794,6 +802,13 @@ babel-runtime@^6.18.0, babel-runtime@^6.22.0: core-js "^2.4.0" regenerator-runtime "^0.10.0" +babel-runtime@^6.20.0, babel-runtime@^6.26.0: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" + dependencies: + core-js "^2.4.0" + regenerator-runtime "^0.11.0" + babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.25.0: version "6.25.0" resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.25.0.tgz#665241166b7c2aa4c619d71e192969552b10c071" @@ -804,6 +819,20 @@ babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.25.0: babylon "^6.17.2" lodash "^4.2.0" +babel-traverse@6.21.0: + version "6.21.0" + resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.21.0.tgz#69c6365804f1a4f69eb1213f85b00a818b8c21ad" + dependencies: + babel-code-frame "^6.20.0" + babel-messages "^6.8.0" + babel-runtime "^6.20.0" + babel-types "^6.21.0" + babylon "^6.11.0" + debug "^2.2.0" + globals "^9.0.0" + invariant "^2.2.0" + lodash "^4.2.0" + babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.25.0: version "6.25.0" resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.25.0.tgz#2257497e2fcd19b89edc13c4c91381f9512496f1" @@ -818,6 +847,15 @@ babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.25.0: invariant "^2.2.0" lodash "^4.2.0" +babel-types@6.23.0: + version "6.23.0" + resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.23.0.tgz#bb17179d7538bad38cd0c9e115d340f77e7e9acf" + dependencies: + babel-runtime "^6.22.0" + esutils "^2.0.2" + lodash "^4.2.0" + to-fast-properties "^1.0.1" + babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.25.0: version "6.25.0" resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.25.0.tgz#70afb248d5660e5d18f811d91c8303b54134a18e" @@ -827,6 +865,23 @@ babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.25 lodash "^4.2.0" to-fast-properties "^1.0.1" +babel-types@^6.21.0: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497" + dependencies: + babel-runtime "^6.26.0" + esutils "^2.0.2" + lodash "^4.17.4" + to-fast-properties "^1.0.3" + +babylon@6.14.1: + version "6.14.1" + resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.14.1.tgz#956275fab72753ad9b3435d7afe58f8bf0a29815" + +babylon@^6.11.0: + version "6.18.0" + resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3" + babylon@^6.17.2, babylon@^6.17.4: version "6.17.4" resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.4.tgz#3e8b7402b88d22c3423e137a1577883b15ff869a" @@ -1364,6 +1419,10 @@ content-type@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.2.tgz#b7d113aee7a8dd27bd21133c4dc2529df1721eed" +convert-source-map@1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.3.0.tgz#e9f3e9c6e2728efc2676696a70eb382f73106a67" + convert-source-map@^1.1.0, convert-source-map@^1.4.0: version "1.5.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5" @@ -1504,6 +1563,12 @@ css-selector-tokenizer@^0.7.0: fastparse "^1.1.1" regexpu-core "^1.0.0" +css-tree@1.0.0-alpha17: + version "1.0.0-alpha17" + resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha17.tgz#7ab95ab72c533917af8be54313fec81841c5223a" + dependencies: + source-map "^0.5.3" + css@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/css/-/css-2.2.1.tgz#73a4c81de85db664d4ee674f7d47085e3b2d55dc" @@ -1900,7 +1965,7 @@ escape-html@~1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988" -escape-string-regexp@^1.0.0, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5: +escape-string-regexp@1.0.5, escape-string-regexp@^1.0.0, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" @@ -3204,6 +3269,10 @@ js-tokens@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7" +js-tokens@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" + js-yaml@3.6.1: version "3.6.1" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.6.1.tgz#6e5fe67d8b205ce4d22fad05b7781e8dadcc4b30" @@ -4702,6 +4771,10 @@ regenerator-runtime@^0.10.0: version "0.10.5" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658" +regenerator-runtime@^0.11.0: + version "0.11.0" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz#7e54fe5b5ccd5d6624ea6255c3473be090b802e1" + regenerator-transform@0.9.11: version "0.9.11" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.11.tgz#3a7d067520cb7b7176769eb5ff868691befe1283" @@ -5095,6 +5168,10 @@ source-map-url@~0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.3.0.tgz#7ecaf13b57bcd09da8a40c5d269db33799d4aaf9" +source-map@0.5.6, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3: + version "0.5.6" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" + source-map@^0.1.38: version "0.1.43" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346" @@ -5107,10 +5184,6 @@ source-map@^0.4.2, source-map@^0.4.4: dependencies: amdefine ">=0.0.4" -source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3: - version "0.5.6" - resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" - source-map@~0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d" @@ -5211,6 +5284,10 @@ strict-uri-encode@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" +string-hash@1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.1.tgz#8e85bed291e0763b8f6809d9c3368fea048db3dc" + string-length@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/string-length/-/string-length-1.0.1.tgz#56970fb1c38558e9e70b728bf3de269ac45adfac" @@ -5292,6 +5369,21 @@ style-search@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902" +styled-jsx@^1.0.10: + version "1.0.10" + resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-1.0.10.tgz#114eea6ff5ae8f54bc2bcda86d2861085d5c99dd" + dependencies: + babel-plugin-syntax-jsx "6.18.0" + babel-traverse "6.21.0" + babel-types "6.23.0" + babylon "6.14.1" + convert-source-map "1.3.0" + css-tree "1.0.0-alpha17" + escape-string-regexp "1.0.5" + source-map "0.5.6" + string-hash "1.1.1" + stylis "3.2.8" + stylelint-config-recommended@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-1.0.0.tgz#752c17fc68fa64cd5e7589e24f6e46e77e14a735" @@ -5406,6 +5498,10 @@ styletron@^2.5.7: styletron-client "^2.5.7" styletron-server "^2.5.7" +stylis@3.2.8: + version "3.2.8" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.2.8.tgz#9b23a3e06597f7944a3d9ae880d5796248b8784f" + sugarss@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-1.0.0.tgz#65e51b3958432fb70d5451a68bb33e32d0cf1ef7" @@ -5528,7 +5624,7 @@ to-arraybuffer@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43" -to-fast-properties@^1.0.1: +to-fast-properties@^1.0.1, to-fast-properties@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47" From c4d7d1c1d87615377b58ae31d82bf316375ed2cb Mon Sep 17 00:00:00 2001 From: Alex Sanders <a@snd.rs> Date: Tue, 5 Sep 2017 16:07:59 +0100 Subject: [PATCH 2/8] apply styled jsx transpilation --- ui/.babelrc | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/.babelrc b/ui/.babelrc index e966220564a..177ae8de85e 100644 --- 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" }] From d91289190de53ad0561ab41806c490836df329cc Mon Sep 17 00:00:00 2001 From: Alex Sanders <a@snd.rs> Date: Tue, 5 Sep 2017 16:10:22 +0100 Subject: [PATCH 3/8] use styled jsx output inline --- ui/src/components/head/index.js | 4 ++-- ui/src/index.server.jsx | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/ui/src/components/head/index.js b/ui/src/components/head/index.js index 549b938fe95..a4458c3bad6 100644 --- 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 index e12c15ee89c..0d87fd59f1f 100644 --- 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(); From 2ad77ecd78c21ad50d397abbc15ea6459cd7b8b5 Mon Sep 17 00:00:00 2001 From: Alex Sanders <a@snd.rs> Date: Tue, 5 Sep 2017 16:13:50 +0100 Subject: [PATCH 4/8] style svg children with styled jsx --- ui/src/assets/images/guardian-logo-320.svg | 4 ++-- ui/src/views/404/index.jsx | 17 ++++++++++------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/ui/src/assets/images/guardian-logo-320.svg b/ui/src/assets/images/guardian-logo-320.svg index ef3f6b3c7ea..27654a72f66 100755 --- a/ui/src/assets/images/guardian-logo-320.svg +++ b/ui/src/assets/images/guardian-logo-320.svg @@ -1,4 +1,4 @@ <svg xmlns="http://www.w3.org/2000/svg" width="320" height="60" viewBox="0 0 320 60"> - <path data-block="the" fill="#AAD8F1" d="M83 30c0-13-5.1-16.9-13-16.9-9 0-15 6.2-15 16.4 0 10.5 5.5 16.2 15.8 16.2 5.6 0 9.7-2.7 11.2-4.7v-3c-2.1.7-3.9 1.2-7.7 1.2-5.6 0-9.3-3.2-9.3-9.2h18zm-13.1-13.4c2.5 0 3.8 1.8 3.8 9.6l-8.4.7c.1-7.9 1.8-10.3 4.6-10.3zm-32.9 28.4v-3l-3-1.5v-19.5c1.2-.9 3.2-1.7 4.8-1.7 2.8 0 4.3 1.6 4.2 4.2v17l-3 1.5v3h16v-3l-3-1.5v-19c0-5.7-3.3-8.3-7.7-8.3-4.1 0-8.6 1.3-11.3 3.8v-17h-1l-12 2v3l4 1.5v34l-3 1.5v3h15zm-33-8.6c0 5.7 2.8 9.3 8.9 9.3 3.1 0 6.2-.8 8.1-2.3v-3.8c-.8.3-1.9.5-2.9.5-2.9 0-4.1-1.6-4.1-4.6v-16.5h7v-5h-7v-7.5l-10 1.5v6l-4 1v4h4v17.4z"/> - <path data-block="guardian" fill="#fff" d="M284 45h16v-3l-3-1.5v-20c1.2-.9 2.8-1.1 4.3-1.1 2.8 0 3.7.9 3.7 4.1v17l-3 1.5v3h16v-3l-3-1.5v-19c0-5.7-2.1-8.3-7.1-8.3-4.1 0-8.1 1.5-10.8 4v-4.2h-1l-12.4 2.2v2.7l3.3 1.6v21l-3 1.5v3zm-38.7-44.6c-3 0-5.4 2.4-5.4 5.5 0 3 2.4 5.4 5.4 5.4 2.9 0 5.4-2.4 5.4-5.4-.1-3.1-2.5-5.5-5.4-5.5zm-8.3 14.7v2.8l3 1.6v20.9l-3 1.5v3.1h16v-3.1l-3-1.5v-27.3h-1l-12 2zm-14 23.9c-.7.6-1.7 1.1-3.2 1.1-4 0-5.9-3.3-5.9-10.9 0-8.7 2.4-11.6 5.6-11.6 1.8 0 2.8.6 3.5 1.4v20zm0-24.4c-1.2-.9-3.3-1.4-5-1.4-7.4 0-14.5 4.4-14.5 16.8 0 11.9 7.1 15.7 11.8 15.7 3.8 0 6.4-1.7 7.6-3.4h.3v3.3h.9l11.9-1.4v-2.3l-3-1.8v-39.5h-1l-12.6 2v2.8l3.6 1.5v7.7zm-42 3.4l3 1.5v20.9l-3 1.5v3.1h17v-3.1l-4-1.5v-16.3c1.8-1.4 4.1-1.9 6.8-1.9.9 0 1.6.2 2.2.3v-9c-.3-.1-.7-.2-1.2-.2-3.3 0-6 2.2-7.8 6.2v-6.5h-1l-12 2v3zm-19.3-.8c3.9 0 5.3 2 5.3 5.9v3.5l-6.1 1.1c-5.9 1.1-10.4 2.9-10.4 9.3 0 5.1 3.5 8.7 8.3 8.7 3.8 0 7.4-1.7 8.7-4.4h.3c.5 3.3 3.3 4.4 6.4 4.4 2.4 0 4.8-.6 5.7-1.6v-2l-2.9-1.5v-18c0-7-5.2-9.4-13.3-9.4-5.3 0-8.6 1.3-11.4 2.6v7.8h4.7l2-6c1.1-.4 2.3-.4 2.7-.4zm2.3 22.9c-1.9 0-4-1.1-4-4.6 0-2.4 2.4-4.7 4.8-5l2.2-.5v8.5s-1.9 1.6-3 1.6zm100.7-22.9c3.9 0 5.3 2 5.3 5.9v3.5l-6.1 1.1c-5.9 1.1-10.4 2.9-10.4 9.3 0 5.1 3.5 8.7 8.3 8.7 3.8 0 7.4-1.7 8.7-4.4h.3c.5 3.3 3.3 4.4 6.4 4.4 2.4 0 4.8-.6 5.7-1.6v-2l-2.9-1.5v-18c0-7-5.2-9.4-13.3-9.4-5.3 0-8.6 1.3-11.4 2.6v7.8h4.7l2-6c1.1-.4 2.3-.4 2.7-.4zm2.3 22.9c-1.9 0-4-1.1-4-4.6 0-2.4 2.4-4.7 4.8-5l2.2-.5v8.5s-1.9 1.6-3 1.6zm-138.7 5.6c.4 0 .9 0 1.3-.1 3.5-.3 6.7-2 8.4-4.2v4.1l12-1.5v-2l-3-2v-27h-1l-12 2.3v2.7l4 1.7v18.3c-1.1.8-2.4 1.3-4.2 1.3-2.5 0-4.8-.8-4.8-4.3v-22h-1l-12 2.5v2.6l4 1.6v16.3c0 5.4 2.2 9.7 8.3 9.7zm-32.3-7.7c-1.2 0-2.5-.8-2.5-1.9 0-.8.6-1.7 1.4-2.3 1.6.5 3 .6 5 .6 7.8 0 13.2-3.7 13.2-10.4 0-3-1.3-4.6-3.2-6.4l5.1 1.4v-6l-8.2 1.6c-1.9-.7-4.5-1.6-7-1.6-7.8 0-13.2 4.1-13.2 10.8 0 4.1 2 7.1 5 8.8l.2.2c-1.7 1.2-5.3 4-5.3 7.2 0 2.4 1.5 4.8 4.8 5.5-3.4.8-7.3 2.5-7.3 6.5 0 4.1 5.9 8 15.5 8 11.8 0 16.5-5.7 16.5-13 0-6.1-2.8-9-9.5-9h-10.5zm7.5-14c0 5.7-1.3 6.5-3.5 6.5s-4-.8-4-6.5c0-5.8 1.8-7.5 4-7.5s3.5 2 3.5 7.5zm-11.5 26.9c.1-1.5 1.1-3.4 3.7-3.6h8.6c2.5 0 3.7 2 3.7 3.6 0 3.2-2 4.4-8.3 4.4-5.5 0-7.8-2.2-7.7-4.4z"/> + <path class="the" fill="#AAD8F1" d="M83 30c0-13-5.1-16.9-13-16.9-9 0-15 6.2-15 16.4 0 10.5 5.5 16.2 15.8 16.2 5.6 0 9.7-2.7 11.2-4.7v-3c-2.1.7-3.9 1.2-7.7 1.2-5.6 0-9.3-3.2-9.3-9.2h18zm-13.1-13.4c2.5 0 3.8 1.8 3.8 9.6l-8.4.7c.1-7.9 1.8-10.3 4.6-10.3zm-32.9 28.4v-3l-3-1.5v-19.5c1.2-.9 3.2-1.7 4.8-1.7 2.8 0 4.3 1.6 4.2 4.2v17l-3 1.5v3h16v-3l-3-1.5v-19c0-5.7-3.3-8.3-7.7-8.3-4.1 0-8.6 1.3-11.3 3.8v-17h-1l-12 2v3l4 1.5v34l-3 1.5v3h15zm-33-8.6c0 5.7 2.8 9.3 8.9 9.3 3.1 0 6.2-.8 8.1-2.3v-3.8c-.8.3-1.9.5-2.9.5-2.9 0-4.1-1.6-4.1-4.6v-16.5h7v-5h-7v-7.5l-10 1.5v6l-4 1v4h4v17.4z"/> + <path class="guardian" fill="#fff" d="M284 45h16v-3l-3-1.5v-20c1.2-.9 2.8-1.1 4.3-1.1 2.8 0 3.7.9 3.7 4.1v17l-3 1.5v3h16v-3l-3-1.5v-19c0-5.7-2.1-8.3-7.1-8.3-4.1 0-8.1 1.5-10.8 4v-4.2h-1l-12.4 2.2v2.7l3.3 1.6v21l-3 1.5v3zm-38.7-44.6c-3 0-5.4 2.4-5.4 5.5 0 3 2.4 5.4 5.4 5.4 2.9 0 5.4-2.4 5.4-5.4-.1-3.1-2.5-5.5-5.4-5.5zm-8.3 14.7v2.8l3 1.6v20.9l-3 1.5v3.1h16v-3.1l-3-1.5v-27.3h-1l-12 2zm-14 23.9c-.7.6-1.7 1.1-3.2 1.1-4 0-5.9-3.3-5.9-10.9 0-8.7 2.4-11.6 5.6-11.6 1.8 0 2.8.6 3.5 1.4v20zm0-24.4c-1.2-.9-3.3-1.4-5-1.4-7.4 0-14.5 4.4-14.5 16.8 0 11.9 7.1 15.7 11.8 15.7 3.8 0 6.4-1.7 7.6-3.4h.3v3.3h.9l11.9-1.4v-2.3l-3-1.8v-39.5h-1l-12.6 2v2.8l3.6 1.5v7.7zm-42 3.4l3 1.5v20.9l-3 1.5v3.1h17v-3.1l-4-1.5v-16.3c1.8-1.4 4.1-1.9 6.8-1.9.9 0 1.6.2 2.2.3v-9c-.3-.1-.7-.2-1.2-.2-3.3 0-6 2.2-7.8 6.2v-6.5h-1l-12 2v3zm-19.3-.8c3.9 0 5.3 2 5.3 5.9v3.5l-6.1 1.1c-5.9 1.1-10.4 2.9-10.4 9.3 0 5.1 3.5 8.7 8.3 8.7 3.8 0 7.4-1.7 8.7-4.4h.3c.5 3.3 3.3 4.4 6.4 4.4 2.4 0 4.8-.6 5.7-1.6v-2l-2.9-1.5v-18c0-7-5.2-9.4-13.3-9.4-5.3 0-8.6 1.3-11.4 2.6v7.8h4.7l2-6c1.1-.4 2.3-.4 2.7-.4zm2.3 22.9c-1.9 0-4-1.1-4-4.6 0-2.4 2.4-4.7 4.8-5l2.2-.5v8.5s-1.9 1.6-3 1.6zm100.7-22.9c3.9 0 5.3 2 5.3 5.9v3.5l-6.1 1.1c-5.9 1.1-10.4 2.9-10.4 9.3 0 5.1 3.5 8.7 8.3 8.7 3.8 0 7.4-1.7 8.7-4.4h.3c.5 3.3 3.3 4.4 6.4 4.4 2.4 0 4.8-.6 5.7-1.6v-2l-2.9-1.5v-18c0-7-5.2-9.4-13.3-9.4-5.3 0-8.6 1.3-11.4 2.6v7.8h4.7l2-6c1.1-.4 2.3-.4 2.7-.4zm2.3 22.9c-1.9 0-4-1.1-4-4.6 0-2.4 2.4-4.7 4.8-5l2.2-.5v8.5s-1.9 1.6-3 1.6zm-138.7 5.6c.4 0 .9 0 1.3-.1 3.5-.3 6.7-2 8.4-4.2v4.1l12-1.5v-2l-3-2v-27h-1l-12 2.3v2.7l4 1.7v18.3c-1.1.8-2.4 1.3-4.2 1.3-2.5 0-4.8-.8-4.8-4.3v-22h-1l-12 2.5v2.6l4 1.6v16.3c0 5.4 2.2 9.7 8.3 9.7zm-32.3-7.7c-1.2 0-2.5-.8-2.5-1.9 0-.8.6-1.7 1.4-2.3 1.6.5 3 .6 5 .6 7.8 0 13.2-3.7 13.2-10.4 0-3-1.3-4.6-3.2-6.4l5.1 1.4v-6l-8.2 1.6c-1.9-.7-4.5-1.6-7-1.6-7.8 0-13.2 4.1-13.2 10.8 0 4.1 2 7.1 5 8.8l.2.2c-1.7 1.2-5.3 4-5.3 7.2 0 2.4 1.5 4.8 4.8 5.5-3.4.8-7.3 2.5-7.3 6.5 0 4.1 5.9 8 15.5 8 11.8 0 16.5-5.7 16.5-13 0-6.1-2.8-9-9.5-9h-10.5zm7.5-14c0 5.7-1.3 6.5-3.5 6.5s-4-.8-4-6.5c0-5.8 1.8-7.5 4-7.5s3.5 2 3.5 7.5zm-11.5 26.9c.1-1.5 1.1-3.4 3.7-3.6h8.6c2.5 0 3.7 2 3.7 3.6 0 3.2-2 4.4-8.3 4.4-5.5 0-7.8-2.2-7.7-4.4z"/> </svg> diff --git a/ui/src/views/404/index.jsx b/ui/src/views/404/index.jsx index 6e192f7940a..7a1c1ef0ac8 100644 --- 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>; From f65021d8dd7442fbcbb50dbc9f31c8df867e0993 Mon Sep 17 00:00:00 2001 From: Alex Sanders <a@snd.rs> Date: Tue, 5 Sep 2017 16:14:19 +0100 Subject: [PATCH 5/8] bring nashorn more into line with node --- common/app/rendering/core/JavascriptRendering.scala | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common/app/rendering/core/JavascriptRendering.scala b/common/app/rendering/core/JavascriptRendering.scala index c5c0d1709cc..9f8de9d7404 100644 --- 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, window = undefined; | |var console = {}; | From 419a6ad75cf2353c00c71bc5b80a76ee6ea12584 Mon Sep 17 00:00:00 2001 From: Alex Sanders <a@snd.rs> Date: Tue, 5 Sep 2017 16:19:31 +0100 Subject: [PATCH 6/8] remove block-style stuff from svgloader --- ui/__tools__/svg-loader.js | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/ui/__tools__/svg-loader.js b/ui/__tools__/svg-loader.js index 15182fc3fe1..4b3a4f619a3 100644 --- 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; } From 74104fe8726f4be0cdbbe8088dad303d244be86d Mon Sep 17 00:00:00 2001 From: Alex Sanders <a@snd.rs> Date: Tue, 5 Sep 2017 16:37:34 +0100 Subject: [PATCH 7/8] alias react --- ui/__config__/webpack.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ui/__config__/webpack.config.js b/ui/__config__/webpack.config.js index c0df36b36fe..cd48e41c2e8 100644 --- 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/ }, From 0279abd417d10f6782dfd8d5cbcc823bdbc67343 Mon Sep 17 00:00:00 2001 From: Alex Sanders <a@snd.rs> Date: Wed, 6 Sep 2017 10:50:10 +0100 Subject: [PATCH 8/8] doh! JUST DO NOT DEFINE IT --- common/app/rendering/core/JavascriptRendering.scala | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common/app/rendering/core/JavascriptRendering.scala b/common/app/rendering/core/JavascriptRendering.scala index 9f8de9d7404..6d9bebcdae2 100644 --- 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 = undefined; + |var global = global || this, self = self || this; | |var console = {}; |