-
Notifications
You must be signed in to change notification settings - Fork 72
Open
Description
To Reproduce
First, define media queries const
// ./media.ts
export const media = {
above: {
xxs: '@media all',
xs: '@media (min-width: 30rem)',
sm: '@media (min-width: 48rem)',
md: '@media (min-width: 64rem)',
lg: '@media (min-width: 90rem)',
xl: '@media (min-width: 110.5rem)',
} as const,
only: {
xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)',
xs: '@media (min-width: 30rem) and (max-width: 47.99rem)',
sm: '@media (min-width: 48rem) and (max-width: 63.99rem)',
md: '@media (min-width: 64rem) and (max-width: 89.99rem)',
lg: '@media (min-width: 90rem) and (max-width: 110.49rem)',
xl: '@media (min-width: 110.5rem)',
} as const,
below: {
xs: '@media not all and (min-width: 30rem)',
sm: '@media not all and (min-width: 48rem)',
md: '@media not all and (min-width: 64rem)',
lg: '@media not all and (min-width: 90rem)',
xl: '@media not all and (min-width: 110.5rem)',
} as const,
};
Then, use cssMap as the below
import { cssMap } from '@compiled/react';
import { media } from './media';
const foo = media.above.sm;
const styles = cssMap({
danger: {
[foo]: { // works
color: 'red',
},
[media.above.sm]: { // does not work
color: 'red',
}
}
});
Compiled errors out unless the key is a String or a Variable.
We can loose up the check, which allows MemberExpression (such as [media.above.sm]) as object key. Then buildCss
should be able to handle it.
Metadata
Metadata
Assignees
Labels
No labels