Skip to content

cssMap errors out if css key is MemberExpression #1701

@liamqma

Description

@liamqma

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',
    }
  }
});

We will get an error.
image

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions