The magic formula

docs/package.json

@@ -16,24 +16,30 @@
     "@primer/octicons": "^11.0.0",
     "@primer/octicons-react": "^11.0.0",
     "@primer/primitives": "4.2.0",
-    "@svgr/webpack": "^4.3.2",
-    "autoprefixer": "^9.6.1",
-    "babel-preset-gatsby": "^0.5.10",
+    "@svgr/webpack": "5.5.0",
+    "autoprefixer": "10.2.5",
+    "babel-preset-gatsby": "^1.2.0",
     "chroma-js": "^2.0.6",
     "core-js": "^3.6.5",
-    "gatsby": "^2.24.62",
+    "gatsby": "2.x",
     "gatsby-plugin-alias-imports": "^1.0.5",
-    "gatsby-plugin-sass": "^2.3.13",
-    "gatsby-plugin-svgr": "^2.0.2",
-    "postcss-loader": "^3.0.0",
-    "postcss-node-sass": "^2.1.8",
-    "postcss-scss": "^2.0.0",
+    "gatsby-plugin-sass": "3.x",
+    "gatsby-plugin-svgr": "2.1.0",
+    "path": "0.12.7",
+    "postcss": "8.2.10",
+    "postcss-import": "14.0.1",
+    "postcss-load-config": "3.0.1",
+    "postcss-loader": "4.2.0",
+    "postcss-node-sass": "3.1.0",
+    "postcss-scss": "3.0.5",
+    "postcss-simple-vars": "6.0.3",
     "prop-types": "^15.7.2",
-    "raw-loader": "^3.1.0",
+    "raw-loader": "^4.0.2",
     "react": "^16.13.1",
     "react-bodymovin": "^2.0.0",
     "react-dom": "^16.13.1",
     "react-frame-component": "^4.1.1",
+    "sass-loader": "10.1.1",
     "styled-components": "^4.3.2",
     "title-case": "^2.1.1"
   },

docs/postcss.config.js

@@ -1,12 +1,14 @@
 // This config file is necessary to get postcss-loader to work in
 // ./src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js.
+const path = require('path')
+
 module.exports = {
   parser: 'postcss-scss',
-  plugins: {
-    'postcss-node-sass': {
-      includePaths: ['node_modules'],
+  plugins: [
+    require('postcss-node-sass')({
+      includePaths: [path.join(__dirname, 'node_modules')],
       outputStyle: 'compressed'
-    },
-    autoprefixer: {}
-  }
+    }),
+    require('autoprefixer')
+  ]
 }