Gatsby: How to use remark-bracketed-spans with gatsby-transformer-plugin?

[vadimshvetsov]

Summary

I'm trying to bind remark-bracketed-spans with gatsby-transformer-remark. I'm really stuck with it about 3-4 weeks and can't understand why it's not working together. I've already asked this question at Discord and StackOverflow but nobody helps.
I've opened issue, even provided pull request, the history is below:
Issue
Pull Request
Tried with publishing and using this gatsby-remark-bracketed-spans, but it also doesn't work.

I would appreciate any advice, suggestion or help with starting to contribute to gatsby plugin ecosystem with solving this issue.

Relevant information

Now I'm trying to set remark-bracketed-spans right inside gatsby-transformer-remark for getting it's working there for start. Here is my custom gatsby/packages/gatsby-transformer-remark/src/extend-node-types.js from line 87 code:

    let remark = new Remark().data(`settings`, remarkOptions)

    const remarkBracketedSpans = require(`remark-bracketed-spans`)
    remark.use(remarkBracketedSpans)

    for (let plugin of pluginOptions.plugins) {
      const requiredPlugin = require(plugin.resolve)
      if (_.isFunction(requiredPlugin.setParserPlugins)) {
        for (let parserPlugin of requiredPlugin.setParserPlugins(
          plugin.pluginOptions
        )) {
          if (_.isArray(parserPlugin)) {
            const [parser, options] = parserPlugin
            remark = remark.use(parser, options)
          } else {
            remark = remark.use(parserPlugin)
          }
        }
      }
    }

I've followed all steps from How to Contribute page. I'm using my local gatsby repo with this commands in sequence:

local-gatsby-repo: yarn run watch --scope=gatsby-transformer-remark
local-test-site-repo: gatsby-dev --packages gatsby-transformer-remark
local-test-site-repo: gatsby develop

I've tried to put console.log into gatsby-transformer-remark for check and in gatsby develop I see all this logging executing properly.

I need this plugin so much and I can't getting started with implement this. Maybe somebody with more Markdown parse knowledge will advance me where to start. I'm not sure, that I want dive so deeply in unified, remark and other parsing environment libraries, but if it is the only way, I will.

Also @KyleAMathews suggested to use 'remark-bracketed-spans' it with remark here:

Environment (if relevant)

I have in my test site this code inside .md page:

[text in the span]{.class .other-class key=val another=example}

And it must be transformed to:

<p><span class="class other-class" data-key="val" data-another="example">text in the span</span></p>

All pages transform properly even with gatsby-remark-images, the only thing that doesn't work is 'remark-bracketed-spans' usage.

File contents (if changed)

gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
      },
    },
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 1100,
            },
          },
        ],
      },
    },
  ],
};

package.json without unnecessary props:

{
  "dependencies": {
    "@babel/runtime": "^7.0.0",
    "babel-plugin-styled-components": "^1.6.4",
    "gatsby": "next",
    "gatsby-image": "next",
    "gatsby-plugin-sharp": "next",
    "gatsby-remark-images": "next",
    "gatsby-source-filesystem": "next",
    "gatsby-transformer-remark": "next",
    "gatsby-transformer-sharp": "next",
    "react": "^16.5.0",
    "react-dom": "^16.5.0",
    "remark-bracketed-spans": "^3.0.0"
  },
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.6",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.11.1",
    "prettier": "^1.14.2"
  }
}

I've added remark-bracketed-spans for working with local gatsby-transformer-remark.
gatsby-node.js:

const path = require('path');

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, './src'), 'node_modules'],
    },
  });
};

exports.createPages = ({ actions, graphql }) => {
  const { createPage } = actions;
  const articleTemplate = path.resolve('src/templates/articleTemplate.js');
  return graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              path
            }
          }
        }
      }
    }
  `).then((result) => {
    if (result.errors) {
      return Promise.reject(result.errors);
    }

    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
      createPage({
        path: node.frontmatter.path,
        component: articleTemplate,
      });
    });

    return undefined;
  });
};

gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[pieh]

Try using something like this in your gatsby-remark-bracketed-spans plugin:

const remarkBracketedSpans = require(`remark-bracketed-spans`)

const transformer = remarkBracketedSpans()

module.exports = ({ markdownAST }) => transformer(markdownAST)

you were just setting parser plugins - but you don't actually want to parse anything, but transform

[vadimshvetsov]

@pieh You're a saviour, thank you so much! I will update gatsby-remark-bracketed-spans with your code and it would work!