[system] Keep the unit of container query sizes - #49669

• I have followed (at least) the PR section of the contributing guide.

The container query shorthand drops rules whose size has a unit. With a theme from createTheme():

sx={{ padding: { '@': 0, '@20em': 2, '@40em': 4 } }}
// '@container (min-width:20empx)': { padding: '16px' },
// '@container (min-width:40empx)': { padding: '32px' },

sx={{ padding: { '@40rem/sidebar': 4 } }}
// '@container sidebar (min-width:40rempx)': { padding: '32px' }

Browsers ignore 40empx, so these styles never apply. The container queries page uses @40em and @20em in its "sorted correctly" example, and the error for an invalid shorthand suggests @40rem/sidebar.

The shorthand calls theme.containerQueries(name).up(size), and breakpoints.up() appends the theme unit to any value that is not a breakpoint key. Without a containerQueries on the theme, the fallback in breakpoints.ts already leaves such a size alone and gives @container (min-width:40em).

This changes up() to use a string that has its own unit as is. Numbers, numeric strings and breakpoint keys still get the theme unit, so @600 and @sm don't change. down() and between() are unchanged: they subtract the step from the value, which needs a number or a key.

I also updated the caveat on the docs page that says @500px won't render correctly. With this change it gives the same query as @500.

Added tests in createBreakpoints.test.js and cssContainerQueries.test.ts. Both fail on master.

I used Claude Code to write this change.