Use of buggy plugin gatsby-plugin-styled-jsx-postcss

[edmcman]

This project is using gatsby-plugin-styled-jsx-postcss which is known to cause lockups in some versions of nodejs and gatsbyjs. For more information please see this issue: https://github.com/gatsbyjs/gatsby/issues/21885

My website is based on this starter (thanks! it's great) and I have experienced this first-hand when upgrading package versions. I personally switched to sass.

[lucaskjaero]

Hi @edmcman, I'm in a similar situation. Do you have some pointers on how to switch to sass? I've gotten rid of most of the postcss plugins, but am stuck on media queries and nesting.

[edmcman]

@lucaskjaero Sass supports nesting out of the box. I don't remember any issues with media queries.

diff --git a/gatsby-config.js b/gatsby-config.js
index a30d21e..cfb5c1a 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -59,9 +59,14 @@ module.exports = {
     // Add typescript stack into webpack
     `gatsby-plugin-typescript`,

-    // Use styled jsx and PostCSS
+    // Use styled jsx and sass
+    {
+      resolve: `gatsby-plugin-styled-jsx`,
+      options: {
+        jsxPlugins: ['styled-jsx-plugin-sass']
+      }
+    },
     `gatsby-plugin-styled-jsx`, // The plugin's code is inserted directly to gatsby-node.js and gatsby-ssr.js files
-    `gatsby-plugin-styled-jsx-postcss`, // As above