const UNSAFE_container = {
below: {
xs: "@container not all and (min-width: 30rem)",
sm: "@container not all and (min-width: 48rem)",
md: "@container not all and (min-width: 64rem)",
lg: "@container not all and (min-width: 90rem)",
xl: "@container not all and (min-width: 110rem)"
}
} as const;
const myStyles = css({
[UNSAFE_container.below.xs]: ...
});
<div css={myStyles}>
hello world
</div>
We should be able to parse this, especially because removing the as const results in perfectly valid output. Additionally, replacing UNSAFE_container with media then importing media from @atlaskit/primitives/responsive also results in perfectly valid output.
Note that for any other form (that we do not support), like using const UNSAFE_container = Object.freeze({ ... }), we should give a more descriptive error. See #1606 for more details.
This causes an error in
@compiled/babel-plugin
:We should be able to parse this, especially because removing the
as const
results in perfectly valid output. Additionally, replacingUNSAFE_container
withmedia
then importingmedia
from@atlaskit/primitives/responsive
also results in perfectly valid output.Note that for any other form (that we do not support), like using
const UNSAFE_container = Object.freeze({ ... })
, we should give a more descriptive error. See #1606 for more details.