atlassian-labs / compiled

A familiar and performant compile time CSS-in-JS library for React.
https://compiledcssinjs.com
Apache License 2.0
1.98k stars 68 forks source link

Support `as const` for object property names #1607

Open dddlr opened 8 months ago

dddlr commented 8 months ago

This causes an error in @compiled/babel-plugin:

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.