compiled icon indicating copy to clipboard operation
compiled copied to clipboard

Support `as const` for object property names

Open dddlr opened this issue 1 year ago • 0 comments

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.

dddlr avatar Dec 27 '23 03:12 dddlr