Add support for the Styled Components Babel plugin (#4722)

Author: KyleAMathews

examples/using-styled-components/package.json

@@ -5,17 +5,18 @@
   "version": "1.0.0",
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
-    "gatsby": "latest",
-    "gatsby-link": "latest",
-    "gatsby-plugin-google-analytics": "latest",
-    "gatsby-plugin-offline": "latest",
-    "gatsby-plugin-styled-components": "latest",
-    "lodash": "^4.16.4",
-    "react-typography": "^0.15.0",
-    "slash": "^1.0.0",
-    "styled-components": "^2.2.3",
-    "typography": "^0.15.8",
-    "typography-breakpoint-constants": "^0.14.0"
+    "babel-plugin-styled-components": "^1.5.1",
+    "gatsby": "1.9.242",
+    "gatsby-link": "1.6.39",
+    "gatsby-plugin-google-analytics": "1.0.25",
+    "gatsby-plugin-offline": "1.0.15",
+    "gatsby-plugin-styled-components": "2.0.10",
+    "lodash": "^4.17.5",
+    "react-typography": "^0.16.13",
+    "slash": "^2.0.0",
+    "styled-components": "^3.2.3",
+    "typography": "^0.16.6",
+    "typography-breakpoint-constants": "^0.15.10"
   },
   "keywords": [
     "gatsby"

packages/gatsby-plugin-styled-components/README.md

@@ -6,7 +6,7 @@ built-in server-side rendering support.
 
 ## Install
 
-`npm install --save gatsby-plugin-styled-components styled-components`
+`npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components`
 
 ## How to use
 

packages/gatsby-plugin-styled-components/package.json

@@ -22,7 +22,8 @@
   "main": "index.js",
   "peerDependencies": {
     "gatsby": "^1.0.0",
-    "styled-components": ">= 2.0.0"
+    "styled-components": ">= 2.0.0",
+    "babel-plugin-styled-components": ">1.5.0"
   },
   "repository": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-styled-components",
   "scripts": {

packages/gatsby-plugin-styled-components/src/gatsby-node.js

@@ -0,0 +1,33 @@
+// Add Babel plugin
+let babelPluginExists = false
+try {
+  require.resolve(`babel-plugin-styled-components`)
+  babelPluginExists = true
+} catch (e) {
+  // Ignore
+}
+
+exports.modifyBabelrc = ({ babelrc, stage }) => {
+  if (babelPluginExists) {
+    if (stage === `build-html`) {
+      return {
+        ...babelrc,
+        plugins: babelrc.plugins.concat([
+          [
+            `babel-plugin-styled-components`,
+            {
+              ssr: true,
+            },
+          ],
+        ]),
+      }
+    }
+
+    return {
+      ...babelrc,
+      plugins: babelrc.plugins.concat([`babel-plugin-styled-components`]),
+    }
+  }
+
+  return babelrc
+}

packages/gatsby/src/utils/babel-config.js

@@ -179,6 +179,7 @@ module.exports = async function babelConfig(program, stage) {
 
   const normalizedConfig = normalizeConfig(babelrc, directory)
   let modifiedConfig = await apiRunnerNode(`modifyBabelrc`, {
+    stage,
     babelrc: normalizedConfig,
   })
   if (modifiedConfig.length > 0) {