`<Columns>` has trouble supporting "composite" `space` prop

[engfragui]

🐛 Bug report

Current behavior

Currently, a "composite" space prop (in the format of something like {{ tablet: 'medium', mobile: 'large' }}) seems to be supported by <Columns> if we look at its types.

However what happens is that the getClassNames(styles, 'container', space) call fails for "composite" space props, causing a "Not all generated class names were found" error in the console log:

Developer notes

It seems like the reason why our code tries to generate a class name is so that we can pick up these css classes:

https://github.com/Doist/reactist/blob/7dad31302e314a6c73ad85e50b2a8bb947b39f5a/src/columns/columns.module.css#L22-L40

Background info

I've come to notice this "issue" while looking at todoist-web onboarding console tab and noticed this:

(Please note that this is the only screen in todoist-web where we're passing a "composite" space prop to <Columns> so the issue is not widespread.)

Steps to reproduce the bug

Repro PR: https://github.com/Doist/reactist/pull/916

Expected behavior

No error in the console log 🤷‍♀️

Possible solutions

I do not know. I guess first of all we have to understand if we really do need these css classes:

https://github.com/Doist/reactist/blob/7dad31302e314a6c73ad85e50b2a8bb947b39f5a/src/columns/columns.module.css#

If not, then we should just remove the getClassNames(styles, 'container', space) call 👋

If we do need those css classes, I hope Ernesto has a good idea 😅

Environment

• @doist/reactist version: latest
• react version: n/a
• Browser: n/a