Not working with Gatsby 3, MDX and Prism

[soVader]

trafficstars

Reading the documentation my understanding is embed gist should come before Prism but for some reason this is not working and I'm unsure where my issue is. I've tried:

config:

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: 'gatsby-remark-embed-gist',
      },
      {
        resolve: `gatsby-remark-prismjs`,
        options: {
          classPrefix: 'language-',
          inlineCodeMarker: null,
          aliases: {},
          showLineNumbers: false,
          noInlineHighlight: false,
          languageExtensions: [
            {
              language: 'superscript',
              extend: 'javascript',
              definition: {
                superscript_types: /(SuperType)/,
              },
              insertBefore: {
                function: {
                  superscript_keywords: /(superif|superelse)/,
                },
              },
            },
          ],
          prompt: {
            user: 'root',
            host: 'localhost',
            global: false,
          },
          escapeEntities: {},
        },
      },
    ],
  },
},

and Ive tried with it's own transformer as the very first plugin:

    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-embed-gist',
            options: {
              gistDefaultCssInclude: true,
              gistCssPreload: true,
              gistCssUrlAddress:
                'https://github.githubassets.com/assets/gist-embed-b3b573358bfc66d89e1e95dbf8319c09.css',
            },
          },
        ],
      },
    },

When I search Issues I found:

• Embed gist on gatsby-mdx page

which mentions manually importing but I thought this would be resolved in gistCssUrlAddress?

package.json:

  "dependencies": {
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "@popperjs/core": "^2.9.1",
    "bootstrap": "^4.6.0",
    "gatsby": "^3.0.1",
    "gatsby-plugin-manifest": "^3.0.0",
    "gatsby-plugin-mdx": "^2.0.1",
    "gatsby-plugin-offline": "^4.0.0",
    "gatsby-plugin-react-helmet": "^4.1.0",
    "gatsby-plugin-robots-txt": "^1.5.5",
    "gatsby-plugin-sharp": "^3.0.0",
    "gatsby-plugin-sitemap": "^3.1.0",
    "gatsby-remark-embed-gist": "^1.2.1",
    "gatsby-remark-images": "^4.0.0",
    "gatsby-remark-prismjs": "^4.0.0",
    "gatsby-source-filesystem": "^3.0.0",
    "gatsby-transformer-remark": "^3.0.0",
    "gatsby-transformer-sharp": "^3.0.0",
    "jquery": "^3.6.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "node-sass": "^5.0.0",
    "popper.js": "^1.16.1",
    "prism-react-renderer": "^1.2.0",
    "prismjs": "^1.23.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.2.0"
  },
  "devDependencies": {
    "prettier": "2.2.1"
  },

Use case in my index.mdx:

`gist:weirdpattern/ce54fdb1e5621b5966e146026995b974#syntax.text`

Possible clash with gatsby-browser?

root-prism.js:

import React from 'react'
import { MDXProvider } from '@mdx-js/react'

import Prism from './src/components/Prism'

const components = {
  pre: Prism,
}

export const wrapMDX = ({ element }) => {
  return <MDXProvider components={components}>{element}</MDXProvider>
}

gatsby-browser.js:

// Prism
import { wrapMDX } from './root-prism'
export const wrapRootElement = wrapMDX

Curious to know am I misunderstanding how this is to me implemented?