From 5cb57ee6503dfaa9633ea7b08f7aefb180c2d202 Mon Sep 17 00:00:00 2001 From: Ryandi Tjia Date: Tue, 5 Jun 2018 13:53:16 +0700 Subject: [PATCH 1/8] Bump package versions --- examples/using-styled-components/package.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/examples/using-styled-components/package.json b/examples/using-styled-components/package.json index 708e81b559d1e..1989d548f4290 100644 --- a/examples/using-styled-components/package.json +++ b/examples/using-styled-components/package.json @@ -5,16 +5,16 @@ "version": "1.0.0", "author": "Kyle Mathews ", "dependencies": { - "gatsby": "latest", - "gatsby-plugin-google-analytics": "latest", - "gatsby-plugin-offline": "latest", - "gatsby-plugin-styled-components": "latest", + "gatsby": "next", + "gatsby-plugin-google-analytics": "next", + "gatsby-plugin-offline": "next", + "gatsby-plugin-styled-components": "next", "lodash": "^4.16.4", - "react-typography": "^0.15.0", + "react-typography": "^0.16.13", "slash": "^1.0.0", - "styled-components": "^2.2.3", - "typography": "^0.15.8", - "typography-breakpoint-constants": "^0.14.0" + "styled-components": "^3.3.2", + "typography": "^0.16.17", + "typography-breakpoint-constants": "^0.15.10" }, "keywords": [ "gatsby" From 463a89d8b3651df8944c4fb4e9df14c094d8b214 Mon Sep 17 00:00:00 2001 From: Ryandi Tjia Date: Tue, 5 Jun 2018 14:03:18 +0700 Subject: [PATCH 2/8] Add gatsby-plugin-react-helmet and gatsby-plugin-typography --- examples/using-styled-components/gatsby-config.js | 7 +++++++ examples/using-styled-components/package.json | 3 +++ 2 files changed, 10 insertions(+) diff --git a/examples/using-styled-components/gatsby-config.js b/examples/using-styled-components/gatsby-config.js index 4bd5976146856..abcad0612d891 100644 --- a/examples/using-styled-components/gatsby-config.js +++ b/examples/using-styled-components/gatsby-config.js @@ -4,12 +4,19 @@ module.exports = { }, plugins: [ `gatsby-plugin-styled-components`, + { + resolve: `gatsby-plugin-typography`, + options: { + pathToConfigModule: `src/utils/typography.js`, + }, + }, { resolve: `gatsby-plugin-google-analytics`, options: { trackingId: `UA-93349937-2`, }, }, + `gatsby-plugin-react-helmet`, `gatsby-plugin-offline`, ], } diff --git a/examples/using-styled-components/package.json b/examples/using-styled-components/package.json index 1989d548f4290..cfc6ed07bb6b0 100644 --- a/examples/using-styled-components/package.json +++ b/examples/using-styled-components/package.json @@ -8,8 +8,11 @@ "gatsby": "next", "gatsby-plugin-google-analytics": "next", "gatsby-plugin-offline": "next", + "gatsby-plugin-react-helmet": "next", "gatsby-plugin-styled-components": "next", + "gatsby-plugin-typography": "^1.7.18", "lodash": "^4.16.4", + "react-helmet": "^5.2.0", "react-typography": "^0.16.13", "slash": "^1.0.0", "styled-components": "^3.3.2", From 8969a24e820b9af07a8c2dff9feed4c2ec6dc911 Mon Sep 17 00:00:00 2001 From: Ryandi Tjia Date: Tue, 5 Jun 2018 14:12:48 +0700 Subject: [PATCH 3/8] Add react react-dom babel-plugin-styled-components --- examples/using-styled-components/package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/examples/using-styled-components/package.json b/examples/using-styled-components/package.json index cfc6ed07bb6b0..fc2c16fa6d3a5 100644 --- a/examples/using-styled-components/package.json +++ b/examples/using-styled-components/package.json @@ -5,6 +5,7 @@ "version": "1.0.0", "author": "Kyle Mathews ", "dependencies": { + "babel-plugin-styled-components": "^1.5.1", "gatsby": "next", "gatsby-plugin-google-analytics": "next", "gatsby-plugin-offline": "next", @@ -12,6 +13,8 @@ "gatsby-plugin-styled-components": "next", "gatsby-plugin-typography": "^1.7.18", "lodash": "^4.16.4", + "react": "^16.4.0", + "react-dom": "^16.4.0", "react-helmet": "^5.2.0", "react-typography": "^0.16.13", "slash": "^1.0.0", From ab0b1e5acbd39e7eed808d432d858d3685fb8203 Mon Sep 17 00:00:00 2001 From: Ryandi Tjia Date: Tue, 5 Jun 2018 14:13:25 +0700 Subject: [PATCH 4/8] Remove outdated line (Gatsby hot reloads regardless of this line) --- examples/using-styled-components/src/utils/typography.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/examples/using-styled-components/src/utils/typography.js b/examples/using-styled-components/src/utils/typography.js index 3f6059aeb4f1f..097317d41e088 100644 --- a/examples/using-styled-components/src/utils/typography.js +++ b/examples/using-styled-components/src/utils/typography.js @@ -32,9 +32,4 @@ const options = { const typography = new Typography(options) -// Hot reload typography in development. -if (process.env.NODE_ENV !== `production`) { - typography.injectStyles() -} - export default typography From 211eef1f732f1fad976d015c0263eb09c6099f9a Mon Sep 17 00:00:00 2001 From: Ryandi Tjia Date: Tue, 5 Jun 2018 14:16:33 +0700 Subject: [PATCH 5/8] Migrate from custom html.js to react-helmet --- examples/using-styled-components/src/html.js | 67 ------------------- .../src/pages/index.js | 47 ++++++++----- 2 files changed, 29 insertions(+), 85 deletions(-) delete mode 100644 examples/using-styled-components/src/html.js diff --git a/examples/using-styled-components/src/html.js b/examples/using-styled-components/src/html.js deleted file mode 100644 index 5affc9b4f6904..0000000000000 --- a/examples/using-styled-components/src/html.js +++ /dev/null @@ -1,67 +0,0 @@ -import React, { Component } from "react" -import * as PropTypes from "prop-types" -import { TypographyStyle } from "react-typography" -import typography from "./utils/typography" - -let stylesStr -if (process.env.NODE_ENV === `production`) { - try { - stylesStr = require(`!raw-loader!../public/styles.css`) - } catch (e) { - console.log(e) - } -} - -const propTypes = { - headComponents: PropTypes.node.isRequired, - body: PropTypes.node.isRequired, - postBodyComponents: PropTypes.node.isRequired, -} - -class Html extends Component { - render() { - let css - if (process.env.NODE_ENV === `production`) { - css = ( -