Fix 3884 text styles not applied correctly

[primos63]

Closes #3884

📝 Description

Process text and layer styles correctly

⛳️ Current behavior (updates)

If a component already has a property for which a textStyle property would overwrite, the update is skipped.

🚀 New behavior

Each style property is processed in precedence order. For each style the CSS for the style is generated, the CSS is then merged with an accumulator for the final computed CSS. This ensures that properties, including responsive ones, have the correct values.

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

📝 Additional Information

[changeset-bot]

🦋 Changeset detected

Latest commit: f0884f1

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

This PR includes changesets to release 7 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/test-utils	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]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-storybook/2uWuqes2Vj6JHMTQ44anKn8GZCHN
✅ Preview: https://chakra-ui-storybook-git-fork-primos63-fix-3884-c02bf6-chakra-ui.vercel.app

[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 f0884f1:

Sandbox	Source
create-react-app-ts	Configuration
textStyle problems	Issue #3884
textStyle problems	Issue #3884

[TimKolberger]

Thank you @primos63 for this PR ✨

I really like the improvements you did to the code structure and readability.

Kindly see my comments in the code to see the performance impact.
I think we may need a re-architecture of the styled-system that's focused heavily on performance. When we do that, we will include the idea behind your solution.

We are not able to move forward with this PR. Feel free to reach out to me to discuss this more!

Thanks for understanding

[TimKolberger]

The mergeWith function causes to increase the runtime complexity to increase from O(n) to O(n^2). Sadly this is in the styled-system algorithm hot path, which will be called by every chakra component on every render.

A very simple loop test gave us the following average time in ms for a run with 10000 iterations:

PR solution: 0.045435ms
Current main branch: 0.02831ms

The large chunk of the performance regression is caused by running mergeWith and css function in a loop, compared to the current approach that uses Object.assign and runs the css function once.