diff --git a/common/app/rendering/core/JavascriptRendering.scala b/common/app/rendering/core/JavascriptRendering.scala index c5c0d1709ccf..6d9bebcdae23 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; | |var console = {}; | diff --git a/ui/.babelrc b/ui/.babelrc index e966220564ab..177ae8de85e1 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" }] diff --git a/ui/__config__/webpack.config.js b/ui/__config__/webpack.config.js index c0df36b36fee..cd48e41c2e89 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/ }, diff --git a/ui/__tools__/svg-loader.js b/ui/__tools__/svg-loader.js index 15182fc3fe14..4b3a4f619a39 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; } diff --git a/ui/package.json b/ui/package.json index 5e6a53a074a3..3601b199c2af 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/src/assets/images/guardian-logo-320.svg b/ui/src/assets/images/guardian-logo-320.svg index ef3f6b3c7ea4..27654a72f665 100755 --- a/ui/src/assets/images/guardian-logo-320.svg +++ b/ui/src/assets/images/guardian-logo-320.svg @@ -1,4 +1,4 @@ - - + + diff --git a/ui/src/components/head/index.js b/ui/src/components/head/index.js index 7f91456de078..3ff31bea0a80 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) => ` @@ -18,5 +18,5 @@ export default (props: any, css: string) => - ${css} + ${css.join('\n')} `; diff --git a/ui/src/index.server.jsx b/ui/src/index.server.jsx index e12c15ee89c5..0d87fd59f1f3 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 ` - ${head(props, styletron.getStylesheetsHtml())} + ${head(props, [ + styletron.getStylesheetsHtml(), + getStyledJSXStylesheetsHtml(), + ])} ${body} `.trim(); diff --git a/ui/src/views/404/index.jsx b/ui/src/views/404/index.jsx index 6e192f7940a0..7a1c1ef0ac8d 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) =>
Home
- +
+ + +

Sorry - we haven’t been able to serve the page you asked for.

@@ -80,5 +84,4 @@ export default ({ beaconUrl }: Object) => ( style={{ display: 'none' }} rel="nofollow" /> -
-); + ; diff --git a/ui/yarn.lock b/ui/yarn.lock index c243f77af4df..97a0ca12fd8b 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"