Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[gatsby-plugin-mdx] Remark plugins using mutateSource seems to be ignored #23409

Closed
Strajk opened this issue Apr 23, 2020 · 7 comments
Closed
Labels
stale? Issue that may be closed soon due to the original author not responding any more. type: bug An issue or pull request relating to a bug in Gatsby

Comments

@Strajk
Copy link

Strajk commented Apr 23, 2020

Description

Remark plugins are able both to transform AST and mutate original source

exports.mutateSource = ({ markdownNode }) => {
  markdownNode.internal.content = markdownNode.internal.content.replace("foo", "bar")
}

exports.default = ({ markdownAST }) => {
  visit(markdownAST, ["heading"], (node) => {  })
  return markdownAST
}

Remark plugins in gatsby-plugin-mdx seem to ignore the mutateSource hook and only run AST transformation.
(or more precisely, it ignores plugins without default export && doesn't check for mutateSource on plugins)

• There seems to be some code prepared to handle this, but it's commented out
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-mdx/utils/gen-mdx.js#L22
(Commented out by @ChristopherBiscardi so tagging, sry if not appropriate)

• Filtering out seems to be done here
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-mdx/utils/get-source-plugins-as-remark-plugins.js#L50

• There's an issue for this in old repo
ChristopherBiscardi/gatsby-mdx#118
The proposed workaround in the last comment is to rewrite the plugin to use AST transformation instead of mutateSource, so not a real solution

Steps to reproduce

https://github.com/Strajk/jungle/tree/master/gatsby-replace-md-with-md

There are two local plugins:

  • ./plugins/remark-ast – add ⭐ at the end of headings
  • ./plugins/remark-mutate-source – replaces "dog" with dog emoji in html tag

Project uses both transformer-remark & plugin-mdx for easier reproducibility.
Both are configured to use both plugins https://github.com/Strajk/jungle/blob/master/gatsby-replace-md-with-md/gatsby-config.js

There are two sample posts to test the functionality

Expected result

Both posts (md & mdx) should be transformed with both plugins.

Actual result

  • MD post is transformed with both plugins
  • MDX post is transformed with just ./plugins/remark-ast plugin

Environment

Gatsby 2.20.25 – Expand for all info
  System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.8.0 - ~/.nvm/versions/node/v13.8.0/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.13.6 - ~/.nvm/versions/node/v13.8.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 81.0.4044.122
    Firefox: 75.0
    Safari: 13.1
  npmPackages:
    gatsby: ^2.20.25 => 2.20.25 
    gatsby-image: ^2.3.4 => 2.3.4 
    gatsby-plugin-feed: ^2.4.3 => 2.4.3 
    gatsby-plugin-google-analytics: ^2.2.4 => 2.2.4 
    gatsby-plugin-manifest: ^2.3.5 => 2.3.5 
    gatsby-plugin-mdx: ^1.1.10 => 1.1.10 
    gatsby-plugin-offline: ^3.1.4 => 3.1.4 
    gatsby-plugin-react-helmet: ^3.2.4 => 3.2.4 
    gatsby-plugin-sharp: ^2.5.6 => 2.5.6 
    gatsby-plugin-typography: ^2.4.3 => 2.4.3 
    gatsby-remark-copy-linked-files: ^2.2.3 => 2.2.3 
    gatsby-remark-images: ^3.2.4 => 3.2.4 
    gatsby-remark-prismjs: ^3.4.3 => 3.4.3 
    gatsby-remark-responsive-iframe: ^2.3.3 => 2.3.3 
    gatsby-remark-smartypants: ^2.2.3 => 2.2.3 
    gatsby-source-filesystem: ^2.2.4 => 2.2.4 
    gatsby-transformer-remark: ^2.7.3 => 2.7.3 
    gatsby-transformer-sharp: ^2.4.6 => 2.4.6 
  npmGlobalPackages:
    gatsby-cli: 2.11.14

Tagging @mathieudutour and @vladar as I noticed they done some (maybe) similar work in #21188
(sry if not appropriate 🙏)

@Strajk Strajk added the type: bug An issue or pull request relating to a bug in Gatsby label Apr 23, 2020
@Strajk
Copy link
Author

Strajk commented Apr 23, 2020

Real-world use case:

Remark plugin for finding and replacing, something like https://github.com/angeloashmore/gatsby-remark-find-replace, but with support for markdown and HTML in replacing text, eg:

{
  COMPANY: "The Company" // Supported in mention plugin
  NOTE: "This is a note with **markdown**" // Not Supported
  TOP: "Go to <a href="#top" style=''>top</a>" // Not Supported
}

@vladar
Copy link
Contributor

vladar commented Apr 23, 2020

Just to clarify - is this a recent break? Or was it working like this for a long time now?

@mathieudutour
Copy link
Contributor

I don't think it ever worked

@Strajk
Copy link
Author

Strajk commented Apr 23, 2020

@vladar @mathieudutour even though I don't use Gatsby for a long time, I agree with @mathieudutour that it probably never worked –– that commented out code is there from October 2018

Was not sure if this issue should be Feature request or Bug

YuukiOkamoto added a commit to YuukiOkamoto/my-portfolio-site that referenced this issue Apr 25, 2020
mdxにしたことで、 `:smile:`のような形式で絵文字が変換されなかった。
こちらを参考に解決。
ChristopherBiscardi/gatsby-mdx#118 (comment)

また、新しいissueもあったので要チェック
gatsbyjs/gatsby#23409
@github-actions
Copy link

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

@github-actions github-actions bot added the stale? Issue that may be closed soon due to the original author not responding any more. label May 13, 2020
@github-actions
Copy link

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

@artt
Copy link

artt commented Feb 17, 2021

@Strajk you ever find a solution to this? Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
stale? Issue that may be closed soon due to the original author not responding any more. type: bug An issue or pull request relating to a bug in Gatsby
Projects
None yet
Development

No branches or pull requests

4 participants