Unable to modify the default viewport breakpoints of the token `s` when generating a theme

[hahahumble]

Describe the bug Unable to modify the default viewport breakpoints of the token s when generating a theme. However, it works correctly for other tokens (m, l, xl).

To Reproduce

viewport: {
  s: { minPx: 520 },
},

When running the reshaped theming command, the min-width for the token s in the generated media.css is incorrect, while it is correct for the other tokens.

@custom-media --rs-viewport-m (min-width: 660px);
@custom-media --rs-viewport-l (min-width: 900px);
@custom-media --rs-viewport-xl (min-width: 1280px);
@custom-media --rs-viewport-s (max-width: 659px);

Environment (please complete the following information):

• Version 2.11.10

[hahahumble]

It seems that the issue lies in my understanding. The viewport here refers to a range:

• s: 0-660
• m: 660-900
• l: 900-1280
• xl: 1280+

Is it possible to add another breakpoint below s, for example, xs?

[blvdmitry]

Hey, right now it's not possible to add custom ones. We can add support for generating them in css, however that won't generate new viewports support in the component properties since we don't have the jsx generation supported right now. Would that still be helpful for you?

[hahahumble]

Supporting JSX would be ideal. Alternatively, is it possible to add more viewports beyond s, m, l, and xl, such as xs and 2xl?

[blvdmitry]

I can add more viewports to make them available as css custom media queries so you will be able to write custom styles using it. Existing viewports would still support customizing their values and those values will be respected when you use them via jsx props. For example, the s viewport right now allows customizing the maxPx right now but not minPx because if the smallest viewport and introducing a non 0 minPx value will product no css below that value