Gatsby.js failing with this error -> Generating development SSR bundle failed. Unknown word position: relative;

Question

When I develop or build I am running into this issue.

[styled-jsx] Loading plugin from path: styled-jsx-plugin-postcss

 ERROR #98123  WEBPACK

Generating development SSR bundle failed

/Users/johncoker/newprojects/learndiesels/learndeisels/src/components/Menu/Menu.js:
[styled-jsx-plugin-postcss] postcss failed with CssSyntaxError: <css input>:24:13: Unknown word

  22 |             margin: 0;
  23 |             padding: 0; /* 0 /*%%styled-jsx-placeholder-4%%*/; */
> 24 |             position: relative;
     |             ^
  25 |             width: 100%;
  26 |           }

I just updated to v3 in gatsby so I am going to be having several issues this is just number 1. I think this could be an issue with the styled-jsx-plugin-postcss but I am not sure how to proceed. I can't seem to find the document help. Thank you for any help!

package.json

"dependencies": {
    "antd": "^4.16.8",
    "fontfaceobserver": "^2.0.13",
    "gatsby": "^3.9.1",
    "gatsby-cli": "^3.9.0",
    "gatsby-image": "^3.9.0",
    "gatsby-plugin-algolia": "^0.22.0",
    "gatsby-plugin-catch-links": "^3.9.0",
    "gatsby-plugin-feed": "^3.9.0",
    "gatsby-plugin-google-analytics": "^3.9.0",
    "gatsby-plugin-gtag": "^1.0.13",
    "gatsby-plugin-layout": "^2.9.0",
    "gatsby-plugin-manifest": "^3.9.0",
    "gatsby-plugin-netlify": "^3.9.0",
    "gatsby-plugin-offline": "^4.9.0",
    "gatsby-plugin-preact": "^5.9.0",
    "gatsby-plugin-react-helmet": "^4.9.0",
    "gatsby-plugin-react-svg": "^3.0.1",
    "gatsby-plugin-sharp": "^3.9.0",
    "gatsby-plugin-sitemap": "^4.5.0",
    "gatsby-plugin-styled-jsx": "^4.9.0",
    "gatsby-plugin-styled-jsx-postcss": "^2.0.2",
    "gatsby-remark-copy-linked-files": "^4.6.0",
    "gatsby-remark-embed-video": "^3.1.1",
    "gatsby-remark-emojis": "^0.4.3",
    "gatsby-remark-external-links": "^0.0.4",
    "gatsby-remark-images": "^5.6.0",
    "gatsby-remark-prismjs": "^5.6.0",
    "gatsby-remark-responsive-iframe": "^4.6.0",
    "gatsby-remark-smartypants": "^4.6.0",
    "gatsby-source-filesystem": "^3.9.0",
    "gatsby-transformer-remark": "^4.6.0",
    "gatsby-transformer-sharp": "^3.9.0",
    "gatsby-transformer-sqip": "^3.9.0",
    "js-yaml": "^4.1.0",
    "normalize.css": "^8.0.0",
    "preact": "^10.5.3",
    "preact-render-to-string": "^5.1.10",
    "prismjs": "^1.15.0",
    "react": "^17.0.0",
    "react-addons-perf": "^15.4.2",
    "react-dom": "^17.0.0",
    "react-facebook": "^8.1.4",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.2.0",
    "react-instantsearch": "^6.12.0",
    "react-md-spinner": "^1.0.0",
    "react-obfuscate": "^3.6.8",
    "react-scripts": "^4.0.0",
    "react-share": "^4.4.0",
    "react-visibility-sensor": "^5.1.1",
    "styled-jsx": "^3.4.4",
    "styled-jsx-plugin-postcss": "^4.0.1",
    "styled-jsx-plugin-stylelint": "^0.1.0",
    "tinycolor2": "^1.4.1",
    "typeface-open-sans": "^1.1.13",
    "yaml-loader": "^0.6.0"
  }
"devDependencies": {
    "@mapbox/stylelint-processor-arbitrary-tags": "^0.4.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-dynamic-import-webpack": "^1.0.2",
    "babel-plugin-import": "^1.8.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-webpack-plugin": "^0.1.1",
    "dotenv": "^10.0.0",
    "eslint": "^7.13.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-google": "^0.14.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-wesbos": "^1.0.1",
    "eslint-plugin-graphql": "^4.0.0",
    "eslint-plugin-html": "^6.1.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "json-loader": "^0.5.7",
    "postcss": "^8.3.5",
    "postcss-cli": "^8.3.1",
    "postcss-cssnext": "^3.1.0",
    "postcss-custom-properties": "^11.0.0",
    "postcss-custom-selectors": "^6.0.0",
    "postcss-easy-media-query": "^1.0.0",
    "postcss-load-plugins": "^2.3.0",
    "postcss-loader": "^6.1.1",
    "postcss-media-variables": "^2.0.1",
    "postcss-nested": "^5.0.5",
    "postcss-sorting": "^6.0.0",
    "postcss-text-remove-gap": "^1.1.1",
    "postcss-utilities": "^0.8.0",
    "precss": "^4.0.0",
    "prettier": "^2.1.2",
    "serve": "^12.0.0",
    "stylelint": "^13.13.1",
    "stylelint-config-css-modules": "^2.2.0",
    "stylelint-config-standard": "^22.0.0",
    "url-loader": "^4.1.1",
    "webpack-bundle-analyzer": "^4.4.2"
  }
}

Answer 1

I'm not sure styled-jsx-plugin-postcss is currently being maintained and compatible with Gatsby v3. It seems like a legacy/deprecated repository (last commit 3 years ago) and the owner itself recommend to not use it:

For PostCSS, without knowing more details of your implementation, I would suggest gatsby-plugin-postcss that is well updated and maintained and has a bunch of options and customizations.