`<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:

reactist/src/columns/columns.module.css

Lines 22 to 40 in 7dad313

	/* Set the gap in the container as a CSS variable, so it can be used in width calculations inside column child elements below */
	.container-xsmall {
	--reactist-columns-gap: var(--reactist-spacing-xsmall);
	}
	.container-small {
	--reactist-columns-gap: var(--reactist-spacing-small);
	}
	.container-medium {
	--reactist-columns-gap: var(--reactist-spacing-medium);
	}
	.container-large {
	--reactist-columns-gap: var(--reactist-spacing-large);
	}
	.container-xlarge {
	--reactist-columns-gap: var(--reactist-spacing-xlarge);
	}
	.container-xxlarge {
	--reactist-columns-gap: var(--reactist-spacing-xxlarge);
	}

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: #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

[engfragui]

@gnapse Tagging you explicitly just in case you have a quick resolution and could give here some notes on how to address this issue. However, if it requires some time to dig in, let's probably post-pone it for now since it's not particularly priority.

[gnapse]

I can take a look next week if no one beats me to it.