Named capture groups not supported (latest Firefox and < Node 10)

[devjmetivier]

Describe the bug

A syntax of named capture groups is being used in mdx-utils that is not widely supported. Babel isn't doing much for me using their plugin for named capture groups either 🤷‍♂️

Specifically in mdx-utils - index.js:

const matches = className.match(/language-(?<lang>.*)/);

Any way we could run babel on this file and publish to fix firefox and builders using node?

Materials

• https://github.com/tc39/proposal-regexp-named-groups
• https://babeljs.io/docs/en/babel-plugin-transform-named-capturing-groups-regex
• https://zeit.co/docs/v2/deployments/official-builders/static-build-now-static-build/#node.js-version

Notes

I could be a total derp trying to get babel working with Gatsby because I've never had to worry about it. I have a .babelrc file with these settings:

{
  "presets": [
    "babel-preset-gatsby"
  ],
  "plugins": [
    "@babel/plugin-transform-named-capturing-groups-regex"
  ]
}

Still no luck.

[johno]

Somewhat related (we recently had to remove the dot all regex syntax from MDX core to ensure it works inside FF as well): mdx-js/mdx#532

[devjmetivier]

@johno Would it be preferable to destructure the match instead of use a (ES2018) capture group for now? At least until Firefox catches up and builders start using Node 10+...

In mdx-utils index.js...

Current:

const [matches] = className.match(/language-(?<lang>.*)/);

return {
  codeString: codeString.trim(),
  className,
  language:
    matches && matches.groups && matches.groups.lang
      ? matches.groups.lang
      : "",
  ...props
};

New (works well for me):

const [,match] = className.match(/language-(.*)/);

return {
  codeString: codeString.trim(),
  className,
  language:
    match ? match : "",
  ...props
};

[johno]

Yeah, AFAICT this would work well since there will never be more than one language from a code block. Though I think we'll want to use the more verbose regex here as well ([\0-\uFFFF]) so that folks don't have to use the babel polyfill.

[devjmetivier]

Would [a-zA-Z]* not yield the same/better result? Unless they'd have to use a polyfill for that too...

[ChristopherBiscardi]

[a-zA-Z]* wouldn't work because we can't guarantee that someone isn't passing in a custom lang like:

```js-something

We have to scoop everything up until the next whitespace afaik

[devjmetivier]

@ChristopherBiscardi That's very true. /language-([\0-\uFFFF]*)/ works just fine for me in my testing. Safe to say we could have something like this implemented?

const [,match] = className.match(/language-([\0-\uFFFF]*)/);

return {
  codeString: codeString.trim(),
  className,
  language:
    match ? match : "",
  ...props
};

[ChristopherBiscardi]

lgtm, would accept a PR