Unify getCss and expandResponsive

[itkrt2y]

📝 Description

Both getCss and expandResponsive recursively iterate styles.
I fixed not to loop style processing twice for performance.

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

[changeset-bot]

🦋 Changeset detected

Latest commit: ccd92b4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
@chakra-ui/styled-system	Patch
@chakra-ui/system	Patch
@chakra-ui/props-docs	Patch
@chakra-ui/provider	Patch
@chakra-ui/react	Patch
@chakra-ui/skeleton	Patch
@chakra-ui/toast	Patch
@chakra-ui/test-utils	Patch
create-react-app-ts	Patch
gatsby-starter-default	Patch
chakra-nextjs	Patch
chakra-nextjs-ts	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
chakra-ui-storybook	✅ Ready (Inspect)	Visit Preview	Aug 5, 2022 at 6:54AM (UTC)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ccd92b4:

Sandbox	Source
create-react-app-ts	Configuration

[lgtm-com]

This pull request introduces 2 alerts and fixes 1 when merging 25451f4 into 19e1532 - view on LGTM.com

new alerts:

• 2 for Prototype-polluting assignment

fixed alerts:

• 1 for Prototype-polluting assignment

[itkrt2y]

The results of css() are as follows.
There are some differences, but I think the behavior will not change.

Before

{
  flexDirection: 'column',
  justifyContent: null,
  '@media screen and (min-width: 40em)': {
    justifyContent: 'flex-start',
    paddingInlineStart: 'var(--space-3)',
    paddingInlineEnd: 'var(--space-3)'
  },
  '@media screen and (min-width: 52em)': {
    justifyContent: 'flex-end',
    paddingInlineStart: 'var(--space-4)',
    paddingInlineEnd: 'var(--space-4)'
  },
  color: 'background',
  height: '100%',
  paddingInlineStart: 'var(--space-2)',
  paddingInlineEnd: 'var(--space-2)',
  paddingTop: 'var(--space-4)',
  paddingBottom: 'var(--space-4)'
}

After

{
  flexDirection: 'column',
  color: 'background',
  height: '100%',
  paddingInlineStart: 'var(--space-2)',
  paddingInlineEnd: 'var(--space-2)',
  paddingTop: 'var(--space-4)',
  paddingBottom: 'var(--space-4)',
  '@media screen and (min-width: 40em)': {
    justifyContent: 'flex-start',
    paddingInlineStart: 'var(--space-3)',
    paddingInlineEnd: 'var(--space-3)'
  },
  '@media screen and (min-width: 52em)': {
    justifyContent: 'flex-end',
    paddingInlineStart: 'var(--space-4)',
    paddingInlineEnd: 'var(--space-4)'
  }
}

[lgtm-com]

This pull request fixes 1 alert when merging 1900f17 into 19e1532 - view on LGTM.com

fixed alerts:

• 1 for Prototype-polluting assignment

[lgtm-com]

This pull request fixes 1 alert when merging 7c38c16 into 19e1532 - view on LGTM.com

fixed alerts:

• 1 for Prototype-polluting assignment

[lgtm-com]

This pull request fixes 1 alert when merging e2231e0 into 19e1532 - view on LGTM.com

fixed alerts:

• 1 for Prototype-polluting assignment

[lgtm-com]

This pull request fixes 1 alert when merging 85277e2 into 19e1532 - view on LGTM.com

fixed alerts:

• 1 for Prototype-polluting assignment

[segunadebayo]

Great work here @itkrt2y.

Can we include a perf track tool in this PR to visualize the perf gains? Let's use a tool like https://www.npmjs.com/package/cronometro to measure it.

[itkrt2y]

@segunadebayo

I tried to introduce cronometro in 11528a9 . (I used node/undici as a reference code)
I'm not sure what kind of benchmark scripts you had in mind, is this commit okay?

Benchmark result

Before (main branch)

$ yarn workspace @chakra-ui/styled-system benchmark
╔══════════════╤═════════╤══════════════════╤═══════════╗
║ Slower tests │ Samples │           Result │ Tolerance ║
╟──────────────┼─────────┼──────────────────┼───────────╢
║ Fastest test │ Samples │           Result │ Tolerance ║
╟──────────────┼─────────┼──────────────────┼───────────╢
║ systemProps  │   10000 │ 155570.77 op/sec │  ± 1.46 % ║
╚══════════════╧═════════╧══════════════════╧═══════════╝

After (this PR)

$ yarn workspace @chakra-ui/styled-system benchmark
╔══════════════╤═════════╤══════════════════╤═══════════╗
║ Slower tests │ Samples │           Result │ Tolerance ║
╟──────────────┼─────────┼──────────────────┼───────────╢
║ Fastest test │ Samples │           Result │ Tolerance ║
╟──────────────┼─────────┼──────────────────┼───────────╢
║ systemProps  │   10000 │ 209751.39 op/sec │  ± 3.97 % ║
╚══════════════╧═════════╧══════════════════╧═══════════╝

[segunadebayo]

@itkrt2y, that's exactly what I have in mind as well. Thanks for adding that.

I'll review the code shortly and leave any comments.

[segunadebayo]

Looks good to me. Love the extra comments you've added