feat(gatsby-remark-code-repls): include matching css option (CodePen)

[deblasis]

Description

Currently it's possible to upload multiple files only by using CodeSandbox.

This PR adds an option that allows adding CSS files to CodePen examples by setting the css property in the payload object.

Ref: https://blog.codepen.io/documentation/api/prefill/

Matching CSS means that if the user is linking to example.js and the option is set to true, if example.css is present in the same directory, its content is sent to CodePen.

• The default behaviour is left untouched
• If the option is set to true and the matched file doesn't exist, nothing changes
• tests included

Related Issues

[wardpeet]

i'm not sure this is the best API. Maybe we should enable custom config per provider?

// In your gatsby-config.js
{
  resolve: 'gatsby-remark-code-repls',
  options: {
    codepen: {
      // specific options
    }
  }
}

[deblasis]

Hi @wardpeet, I thought about it but there are other options that are provider-specific and they are currently inside options:

• dependencies
  https://github.com/gatsbyjs/gatsby/pull/12110/files#diff-f714fe023c0c52878f495131b12d36a8R140
• externals
  https://github.com/gatsbyjs/gatsby/pull/12110/files#diff-f714fe023c0c52878f495131b12d36a8R149
• html
  https://github.com/gatsbyjs/gatsby/pull/12110/files#diff-f714fe023c0c52878f495131b12d36a8R155

that's why I followed the same pattern.

If I moved only the new option includeMatchingCSS inside options.codepen, the API would definitely be confusing.

The best thing would be to refactor all the options and to scope them depending on the provider that supports them but that would break backwards compatibility unless we put in place fallbacks.

The scope of this PR is to add the feature in a non-breaking fashion.

If you feel like that the API should change, I reckon it's a separate refactoring issue that should also cover all the test cases, update the README.md, etc.

Thoughts?

[deblasis]

Hi @wardpeet, I have created a new PR #12936 which is mutually exclusive with this one.
#12936 implements the refactored API for the provider-specific options as discussed above.
#12110, instead, has just the non-breaking changes and the new feature.

[wardpeet]

Make sense, thanks a bunch i'll test this one out.

[wardpeet]

no need to update package.json yourself.

Suggested change

	"version": "2.1.0",
	"version": "2.0.8",

[wardpeet]

I've tested this and it works how it should. Thanks for the effort

[wardpeet]

Thanks a bunch!

[gatsbot]

Holy buckets, @deblasis — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!