You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// ./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',
}
}
});
We will get an error.
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.
The text was updated successfully, but these errors were encountered:
To Reproduce
First, define media queries const
Then, use cssMap as the below
We will get an error.
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.The text was updated successfully, but these errors were encountered: