feat(styled-system): add complete support for `grid` CSS properties

[cheton]

The new configuration might look loke below:

const config = {
  gridArea: true,
  gridAutoColumns: true,
  gridAutoFlow: true,
  gridAutoRows: true,
  gridColumn: true,
  gridColumnEnd: true,
  gridColumnStart: true,
  gridRow: true,
  gridRowEnd: true,
  gridRowStart: true,
  gridTemplate: true,
  gridTemplateAreas: true,
  gridTemplateColumns: true,
  gridTemplateRows: true,

  // The following properties are renamed in CSS3 and will be deprecated or removed in the next major release
  gridGap: { // `gridGap` is an alias for `gap`
    property: 'gridGap',
    scale: 'sizes',
  },
  gridColumnGap: { // `gridColumnGap` is an alias for `columnGap`
    property: 'gridColumnGap',
    scale: 'sizes',
  },
  gridRowGap: { // `gridRowGap` is an alias for `rowGap`
    property: 'gridRowGap',
    scale: 'sizes',
  },
};

Note that the change will be applied to v1 and v2 releases.

[codesandbox[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

[codesandbox-ci[bot]]

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.

[trendmicro-frontend-bot]

Tonic UI Demo

• 2024-05-20 10:24:15 +0000 The PR #854 (e0b69d6c0187e13343a997ffe70a42db91810a3f) has been deployed to https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-854/

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 71.31%. Comparing base (51579d7) to head (e0b69d6).

Additional details and impacted files

```diff @@ Coverage Diff @@ ## master #854 +/- ## ======================================= Coverage 71.31% 71.31% ======================================= Files 374 374 Lines 6271 6271 ======================================= Hits 4472 4472 Misses 1799 1799 ``` | [Flag](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/854/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | Coverage Δ | | |---|---|---| | [react](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/854/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `73.01% <ø> (ø)` | | | [react-hooks](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/854/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `87.59% <ø> (ø)` | | | [react-lab](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/854/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `14.04% <ø> (ø)` | | | [styled-system](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/854/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `91.73% <ø> (ø)` | | | [theme](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/854/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `100.00% <ø> (ø)` | | | [utils](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/854/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `70.28% <ø> (ø)` | | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.