What should we do with the styled-system?

[nlopin]

Context

We use low-level styled-system library to provide nice component css-props and shortcuts like p, m, etc. Those props are crucial for the developer experience and are actively used across codebases together with the per breakpoint value setting like:

<Box m={{_: 2, small: 6}}> ...</Box>

Problem

The last time when styled-system was updated was in May, 2020. Even though the API is stable, issues with types pop up here and there.

styled-components at the same time is evolving, and version 6.0 will be shipped this year. There is a risk that styled-system won't work with it.

Options

Here are the steps we can proactively take to mitigate future issues. Please, add yours!

Option #1. Fork and support the styled-system library for Wave's use case only

Even though the codebase of the styled-system consists of many files, they are primarily configurations of what to expose in each helper. We'll have flexibility to remove things we don't use and keep the surface smaller than now.

The downsides:

• costs to maintain the library
• current codebase is in plain JS (there are tests, though)

Option #2. Implement a set of helpers with the same functionality

We use only a subset of the styled-system, it could be easier to implement the featureset in place.

Option #3. Migrate to other solution.

[lloydaf]

Can you provide some examples of how this is creating a problem?

[nlopin]

One example is the issue with the Table component, solved in the ongoing PR.

New major is another potential risk