Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support as const for object property names #1607

Open
dddlr opened this issue Dec 27, 2023 · 0 comments
Open

Support as const for object property names #1607

dddlr opened this issue Dec 27, 2023 · 0 comments
Labels
bug 🐛 Something isn't working

Comments

@dddlr
Copy link
Collaborator

dddlr commented Dec 27, 2023

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 dddlr added the bug 🐛 Something isn't working label Dec 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant