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

gatsbyjs · Mar 26, 2018 · dccf651 · dccf651
1 parent dc79b61
commit dccf651
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 13 deletions.
diff --git a/examples/using-styled-components/package.json b/examples/using-styled-components/package.json
@@ -5,17 +5,18 @@
   "version": "1.0.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "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"

diff --git a/packages/gatsby-plugin-styled-components/README.md b/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
 

diff --git a/packages/gatsby-plugin-styled-components/package.json b/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": {

diff --git a/packages/gatsby-plugin-styled-components/src/gatsby-node.js b/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
+}
diff --git a/packages/gatsby/src/utils/babel-config.js b/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) {