Add CSS Map

examples/parcel/src/app.jsx

@@ -9,6 +9,7 @@ import '@compiled/react';
 
 import { primary } from './constants';
 import Annotated from './ui/annotated';
+import CSSMap from './ui/css-map';
 import {
   CustomFileExtensionStyled,
   customFileExtensionCss,
@@ -29,5 +30,6 @@ export const App = () => (
     <React.Suspense fallback={<div>Loading...</div>}>
       <AsyncComponent />
     </React.Suspense>
+    <CSSMap variant="danger">CSS Map</CSSMap>
   </>
 );

examples/parcel/src/ui/css-map.jsx

@@ -0,0 +1,12 @@
+import { css, cssMap } from '@compiled/react';
+
+const styles = cssMap({
+  danger: {
+    color: 'red',
+  },
+  success: {
+    color: 'green',
+  },
+});
+
+export default ({ variant, children }) => <div css={css(styles[variant])}>{children}</div>;

examples/webpack/src/app.jsx

@@ -4,6 +4,7 @@ import { Suspense, lazy } from 'react';
 
 import { primary } from './common/constants';
 import Annotated from './ui/annotated';
+import CSSMap from './ui/css-map';
 import {
   CustomFileExtensionStyled,
   customFileExtensionCss,
@@ -23,5 +24,6 @@ export const App = () => (
     <CustomFileExtensionStyled>Custom File Extension Styled</CustomFileExtensionStyled>
     <div css={customFileExtensionCss}>Custom File Extension CSS</div>
     <Annotated />
+    <CSSMap variant="danger">CSS Map</CSSMap>
   </>
 );

examples/webpack/src/ui/css-map.jsx

@@ -0,0 +1,12 @@
+import { css, cssMap } from '@compiled/react';
+
+const styles = cssMap({
+  danger: {
+    color: 'red',
+  },
+  success: {
+    color: 'green',
+  },
+});
+
+export default ({ variant, children }) => <div css={css(styles[variant])}>{children}</div>;

packages/babel-plugin/src/babel-plugin.ts

@@ -20,6 +20,7 @@ import {
   isCompiledKeyframesTaggedTemplateExpression,
   isCompiledStyledCallExpression,
   isCompiledStyledTaggedTemplateExpression,
+  isCompiledCSSMapCallExpression,
 } from './utils/is-compiled';
 import { normalizePropsUsage } from './utils/normalize-props-usage';
 
@@ -150,7 +151,7 @@ export default declare<State>((api) => {
             return;
           }
 
-          (['styled', 'ClassNames', 'css', 'keyframes'] as const).forEach((apiName) => {
+          (['styled', 'ClassNames', 'css', 'keyframes', 'cssMap'] as const).forEach((apiName) => {
             if (
               state.compiledImports &&
               t.isIdentifier(specifier.node?.imported) &&
@@ -185,7 +186,8 @@ export default declare<State>((api) => {
           isCompiledCSSTaggedTemplateExpression(path.node, state) ||
           isCompiledKeyframesTaggedTemplateExpression(path.node, state) ||
           isCompiledCSSCallExpression(path.node, state) ||
-          isCompiledKeyframesCallExpression(path.node, state);
+          isCompiledKeyframesCallExpression(path.node, state) ||
+          isCompiledCSSMapCallExpression(path.node, state);
 
         if (isCompiledUtil) {
           state.pathsToCleanup.push({ path, action: 'replace' });

packages/babel-plugin/src/css-prop/__tests__/css-map.test.ts

@@ -0,0 +1,199 @@
+import type { TransformOptions } from '../../test-utils';
+import { transform as transformCode } from '../../test-utils';
+import { ErrorMessages } from '../../utils/css-map';
+
+describe('css map behaviour', () => {
+  beforeAll(() => {
+    process.env.AUTOPREFIXER = 'off';
+  });
+
+  afterAll(() => {
+    delete process.env.AUTOPREFIXER;
+  });
+
+  const transform = (code: string, opts: TransformOptions = {}) =>
+    transformCode(code, { pretty: false, ...opts });
+
+  const styles = `
+    import { css, cssMap } from '@compiled/react';
+
+    const styles = cssMap({
+      danger: {
+          color: 'red',
+          backgroundColor: 'red'
+      },
+      success: {
+        color: 'green',
+        backgroundColor: 'green'
+      }
+    });
+  `;
+
+  describe('valid syntax', () => {
+    it('should evaluate css map when variant is a runtime variable', () => {
+      const actual = transform(`
+        ${styles}
+
+        <div css={css(styles[variant])} />;
+      `);
+
+      expect(actual).toInclude(
+        '<div className={ax([variant==="danger"&&"_syaz5scu _bfhk5scu",variant==="success"&&"_syazbf54 _bfhkbf54"])}/>'
+      );
+    });
+
+    it('should evaluate css map when variant is statically defined', () => {
+      const actual = transform(`
+       ${styles}
+
+        <div css={css(styles.success)} />;
+        <div css={css(styles['danger'])} />;
+      `);
+
+      expect(actual).toInclude(
+        '<div className={ax(["success"==="danger"&&"_syaz5scu _bfhk5scu","success"==="success"&&"_syazbf54 _bfhkbf54"])}/>'
+      );
+      expect(actual).toInclude(
+        '<div className={ax([\'danger\'==="danger"&&"_syaz5scu _bfhk5scu",\'danger\'==="success"&&"_syazbf54 _bfhkbf54"])}/>'
+      );
+    });
+
+    it('should combine CSS Map with other styles', () => {
+      const actual = transform(
+        `
+        ${styles}
+
+        <div css={css([styles[variant], { color: 'blue' }])} />;
+      `
+      );
+
+      expect(actual).toInclude(
+        '<div className={ax([variant==="danger"&&"_syaz5scu _bfhk5scu",variant==="success"&&"_syazbf54 _bfhkbf54","_syaz13q2"])}/>'
+      );
+    });
+  });
+
+  describe('invalid syntax', () => {
+    it('does not support TemplateLiteral as object property', () => {
+      expect(() => {
+        transform(`
+          ${styles}
+
+          <div css={css(styles[\`danger\`])} />;
+        `);
+      }).toThrow(ErrorMessages.VARIANT_ACCESS);
+    });
+
+    it('does not support BinaryExpression as object property', () => {
+      expect(() => {
+        transform(`
+          ${styles}
+
+          <div css={css(styles[isDanger?'danger':'success'])} />;
+        `);
+      }).toThrow(ErrorMessages.VARIANT_ACCESS);
+
+      expect(() => {
+        transform(`
+          ${styles}
+
+          <div css={css(styles['dang' + 'er'])} />;
+        `);
+      }).toThrow(ErrorMessages.VARIANT_ACCESS);
+    });
+
+    it('does not support MemberExpression as object property', () => {
+      expect(() => {
+        transform(`
+          ${styles}
+
+          <div css={css(styles[props.variant])} />;
+        `);
+      }).toThrow(ErrorMessages.VARIANT_ACCESS);
+    });
+
+    it('does not support CallExpression as object property', () => {
+      expect(() => {
+        transform(`
+          ${styles}
+
+          <div css={css(styles()[variant])} />;
+        `);
+      }).toThrow(ErrorMessages.VARIANT_CALL_EXPRESSION);
+    });
+
+    it('does not support nesting', () => {
+      expect(() => {
+        transform(`
+          ${styles}
+
+          <div css={css(styles.danger.veryDanger)} />;
+        `);
+      }).toThrow(ErrorMessages.NESTED_VARIANT);
+    });
+
+    it('should error out if cssMap does not receive any argument', () => {
+      expect(() => {
+        transform(`
+          import { css, cssMap } from '@compiled/react';
+
+          const styles = cssMap();
+
+          <div css={css(styles.danger)} />;
+        `);
+      }).toThrow(ErrorMessages.NUMBER_OF_ARGUMENT);
+    });
+
+    it('should error out if cssMap receives more than one argument', () => {
+      expect(() => {
+        transform(`
+          import { css, cssMap } from '@compiled/react';
+
+          const styles = cssMap({}, {});
+
+          <div css={css(styles.danger)} />;
+        `);
+      }).toThrow(ErrorMessages.NUMBER_OF_ARGUMENT);
+    });
+
+    it('should error out if cssMap does not receive an object', () => {
+      expect(() => {
+        transform(`
+          import { css, cssMap } from '@compiled/react';
+
+          const styles = cssMap('color: red');
+
+          <div css={css(styles.danger)} />;
+        `);
+      }).toThrow(ErrorMessages.ARGUMENT_TYPE);
+    });
+
+    it('should error out if spread element is used', () => {
+      expect(() => {
+        transform(`
+          import { css, cssMap } from '@compiled/react';
+
+          const styles = cssMap({
+            ...base
+          });
+
+          <div css={css(styles.danger)} />;
+        `);
+      }).toThrow(ErrorMessages.STATIC_VARIANT_OBJECT);
+    });
+
+    it('should error out if css map object key is dynamic', () => {
+      expect(() => {
+        transform(`
+          import { css, cssMap } from '@compiled/react';
+
+          const styles = cssMap({
+            [variantName]: { color: 'red' }
+          });
+
+          <div css={css(styles.danger)} />;
+        `);
+      }).toThrow(ErrorMessages.STATIC_VARIANT_KEY);
+    });
+  });
+});

packages/babel-plugin/src/types.ts

@@ -98,6 +98,7 @@ export interface State extends PluginPass {
     css?: string;
     keyframes?: string;
     styled?: string;
+    cssMap?: string;
   };
 
   importedCompiledImports?: {