build(deps): bump styled-components from 5.0.1 to 5.1.0

[dependabot-preview[bot]]

Bumps styled-components from 5.0.1 to 5.1.0.

Release notes

Sourced from styled-components's releases.

v5.1.0

New Functionality

• Add shouldForwardProp API (almost the same as emotion's, just a slightly different usage pattern); styled-components/styled-components#3006

  Sometimes when composing multiple higher-order components together, it's possible to get into scenarios when multiple layers consume props by the same name. In the past we've introduced various workarounds for popular props like "as" but this power-user API allows for more granular customization of what props are passed down to descendant component children when using the styled() HOC wrapper.

  When combined with other APIs like .attrs() this becomes a very powerful constellation of abilities.

  Here's how you use it:

  const Comp = styled('div').withConfig({
    shouldForwardProp: (prop, defaultValidatorFn) => !['filterThis'].includes(prop),
  })`
    color: red;
  `;
  render(<Comp filterThis="abc" passThru="def" />);
  Renders: <div className="[generated]" passThru="def"></div>
  

  The second argument defaultValidatorFn is what we use internally to validate props based on known HTML attributes. It's provided so you can filter exactly what props you don't wish to pass and then fall-back to the default filtering mechanism if desired.

  Other methods on the styled HOC like .attrs can be chained after withConfig(), and before opening your template literal:

  const Comp = styled('div').withConfig({
    shouldForwardProp: (prop, defaultValidatorFn) => !['filterThis'].includes(prop),
  }).attrs({ className: 'foo' })`
    color: red;
  `;
  render(<Comp filterThis="abc" passThru="def" />);
  Renders: <div className="[generated] foo" passThru="def"></div>
  

  Thanks @stevesims and all that contributed!

• Add "transient props" API; styled-components/styled-components#3052

  Think of transient props as a lightweight, but complementary API to shouldForwardProp. Because styled-components allows any kind of prop to be used for styling (a trait shared by most CSS-in-JS libraries, but not the third party library ecosystem in general), adding a filter for every possible prop you might use can get cumbersome.

  Transient props are a new pattern to pass props that are explicitly consumed only by styled components and are not meant to be passed down to deeper component layers. Here's how you use them:

  const Comp = styled.div`
    color: ${props => props.$fg || 'black'};
  

... (truncated)

Changelog

Sourced from styled-components's changelog.

[v5.1.0] - 2020-04-07

New Functionality

• Add shouldForwardProp API (almost the same as emotion's, just a slightly different usage pattern); styled-components/styled-components#3006

  Sometimes when composing multiple higher-order components together, it's possible to get into scenarios when multiple layers consume props by the same name. In the past we've introduced various workarounds for popular props like "as" but this power-user API allows for more granular customization of what props are passed down to descendant component children when using the styled() HOC wrapper.

  When combined with other APIs like .attrs() this becomes a very powerful constellation of abilities.

  Here's how you use it:

  const Comp = styled('div').withConfig({
    shouldForwardProp: (prop, defaultValidatorFn) => !['filterThis'].includes(prop),
  })`
    color: red;
  `;
  render(<Comp filterThis="abc" passThru="def" />);
  Renders: <div className="[generated]" passThru="def"></div>
  

  The second argument defaultValidatorFn is what we use internally to validate props based on known HTML attributes. It's provided so you can filter exactly what props you don't wish to pass and then fall-back to the default filtering mechanism if desired.

  Other methods on the styled HOC like .attrs can be chained after withConfig(), and before opening your template literal:

  const Comp = styled('div').withConfig({
    shouldForwardProp: (prop, defaultValidatorFn) => !['filterThis'].includes(prop),
  }).attrs({ className: 'foo' })`
    color: red;
  `;
  render(<Comp filterThis="abc" passThru="def" />);
  Renders: <div className="[generated] foo" passThru="def"></div>
  

  Thanks @stevesims and all that contributed!

• Add "transient props" API; styled-components/styled-components#3052

  Think of transient props as a lightweight, but complementary API to shouldForwardProp. Because styled-components allows any kind of prop to be used for styling (a trait shared by most CSS-in-JS libraries, but not the third party library ecosystem in general), adding a filter for every possible prop you might use can get cumbersome.

  Transient props are a new pattern to pass props that are explicitly consumed only by styled components and are not meant to be passed down to deeper component layers. Here's how you use them:

  const Comp = styled.div`
  

... (truncated)

Commits

• 2aa15b3 adjust changelog
• c57a273 v5.1.0
• 58538b7 shouldForwardProp receives the second argument, a default filter function
• 8836289 add knowledge of react-is "typeof" to rollup
• 55fc70a Bump acorn from 5.7.3 to 7.1.1 in /packages/styled-components (#3092)
• 843b018 Change isPlainObject to support objects created in a different context (#3068)
• 0c6852b transient props (#3052)
• 4293579 minor dep updates (#3091)
• 94df8bb Bump is-prop-valid (#3058)
• e02109e shouldForwardProp support (#3006)
• Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

---

Note: This repo was added to Dependabot recently, so you'll receive a maximum of 5 PRs for your first few update runs. Once an update run creates fewer than 5 PRs we'll remove that limit.

You can always request more updates by clicking Bump now in your Dependabot dashboard.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) - `@dependabot use these labels` will set the current labels as the default for future PRs for this repo and language - `@dependabot use these reviewers` will set the current reviewers as the default for future PRs for this repo and language - `@dependabot use these assignees` will set the current assignees as the default for future PRs for this repo and language - `@dependabot use this milestone` will set the current milestone as the default for future PRs for this repo and language - `@dependabot badge me` will comment on this PR with code to add a "Dependabot enabled" badge to your readme Additionally, you can set the following in your Dependabot [dashboard](https://app.dependabot.com): - Update frequency (including time of day and day of week) - Pull request limits (per update run and/or open at any time) - Automerge options (never/patch/minor, and dev/runtime dependencies) - Out-of-range updates (receive only lockfile updates, if desired) - Security updates (receive only security updates, if desired)