@compiled/react 0.13.1 → 0.15.0

package/dist/esm/css-map/index.d.ts

@@ -0,0 +1,112 @@
+import type { Properties, AtRules } from 'csstype';
+import type { Pseudos } from './pseudos';
+/**
+ * These are all the CSS props that will exist.
+ * Only 'string' and 'number' are valid CSS values.
+ *
+ * @example
+ * ```
+ * const style: CssProps = {
+ *  color: 'red',
+ *  margin: 10,
+ * };
+ * ```
+ */
+type CssProps = Readonly<Properties<string | number>>;
+type AllPseudos = {
+    [key in Pseudos]?: CssProps & AllPseudos;
+};
+type AtRuleSecondHalf = string;
+type WhitelistedAtRule = {
+    [atRuleFirstHalf in AtRules]?: {
+        [atRuleSecondHalf in AtRuleSecondHalf]: CssProps & AllPseudos & WhitelistedAtRule;
+    };
+};
+type WhitelistedSelector = AllPseudos & WhitelistedAtRule;
+type ExtendedSelector = {
+    [key: string]: CssProps | ExtendedSelector;
+} & {
+    /**
+     * Using `selectors` is not valid here - you cannot nest a `selectors` object
+     * inside another `selectors` object.
+     */
+    selectors?: never;
+};
+type ExtendedSelectors = {
+    /**
+     * Provides a way to use selectors that have not been explicitly whitelisted
+     * in cssMap.
+     *
+     * This does not provide any type-checking for the selectors (thus allowing
+     * more expressive selectors), though this is more flexible and allows
+     * nesting selectors in other selectors.
+     *
+     * A selector defined both outside of the `selectors` object and
+     * inside the `selectors` object is a runtime error.
+     *
+     * Note that you cannot nest a `selectors` object inside another
+     * `selectors` object.
+     *
+     * Only use if absolutely necessary.
+     *
+     * @example
+     * ```
+     * const myMap = cssMap({
+     *   danger: {
+     *     color: 'red',
+     *     '@media': {
+     *       '(min-width: 100px)': {
+     *         font-size: '1.5em',
+     *       },
+     *     },
+     *     '&:hover': {
+     *       color: 'pink',
+     *     },
+     *     selectors: {
+     *       '&:not(:active)': {
+     *         backgroundColor: 'yellow',
+     *       }
+     *     },
+     *   },
+     *   success: {
+     *     color: 'green',
+     *     '@media': {
+     *       '(min-width: 100px)': {
+     *         font-size: '1.3em',
+     *       },
+     *     },
+     *     '&:hover': {
+     *       color: '#8f8',
+     *     },
+     *     selectors: {
+     *       '&:not(:active)': {
+     *         backgroundColor: 'white',
+     *       }
+     *     },
+     *   },
+     * });
+     * ```
+     */
+    selectors?: ExtendedSelector;
+};
+type Variants<VariantName extends string> = Record<VariantName, CssProps & WhitelistedSelector & ExtendedSelectors>;
+type ReturnType<VariantName extends string> = Record<VariantName, CssProps>;
+/**
+ * ## cssMap
+ *
+ * Creates a collection of named CSS rules that are statically typed and useable with other Compiled APIs.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-cssmap).
+ *
+ * @example
+ * ```
+ * const borderStyleMap = cssMap({
+ *     none: { borderStyle: 'none' },
+ *     solid: { borderStyle: 'solid' },
+ * });
+ * const Component = ({ borderStyle }) => <div css={css(borderStyleMap[borderStyle])} />
+ *
+ * <Component borderStyle="solid" />
+ * ```
+ */
+export default function cssMap<T extends string>(_styles: Variants<T>): Readonly<ReturnType<T>>;
+export {};

package/dist/esm/css-map/index.js

@@ -0,0 +1,22 @@
+import { createSetupError } from '../utils/error';
+/**
+ * ## cssMap
+ *
+ * Creates a collection of named CSS rules that are statically typed and useable with other Compiled APIs.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-cssmap).
+ *
+ * @example
+ * ```
+ * const borderStyleMap = cssMap({
+ *     none: { borderStyle: 'none' },
+ *     solid: { borderStyle: 'solid' },
+ * });
+ * const Component = ({ borderStyle }) => <div css={css(borderStyleMap[borderStyle])} />
+ *
+ * <Component borderStyle="solid" />
+ * ```
+ */
+export default function cssMap(_styles) {
+    throw createSetupError();
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/css-map/index.js.flow

@@ -0,0 +1,125 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import type { Properties, AtRules } from 'csstype';
+import type { Pseudos } from './pseudos';
+/**
+ * These are all the CSS props that will exist.
+ * Only 'string' and 'number' are valid CSS values.
+ * @example ```
+ * const style: CssProps = {
+ *  color: 'red',
+ *  margin: 10,
+ * };
+ * ```
+ */
+declare type CssProps = $ReadOnly<Properties<string | number>>;
+declare type AllPseudos = $ObjMapi<
+  { [k: Pseudos]: any },
+  <key>(key) => { ...CssProps, ...AllPseudos }
+>;
+declare type AtRuleSecondHalf = string;
+declare type WhitelistedAtRule = $ObjMapi<
+  { [k: AtRules]: any },
+  <atRuleFirstHalf>(atRuleFirstHalf) => $ObjMapi<
+    { [k: AtRuleSecondHalf]: any },
+    <atRuleSecondHalf>(atRuleSecondHalf) => {
+      ...CssProps,
+      ...AllPseudos,
+      ...WhitelistedAtRule,
+    }
+  >
+>;
+declare type WhitelistedSelector = { ...AllPseudos, ...WhitelistedAtRule };
+declare type ExtendedSelector = {
+  ...{
+    [key: string]: CssProps | ExtendedSelector,
+  },
+  ...{
+    /**
+     * Using `selectors` is not valid here - you cannot nest a `selectors` object
+     * inside another `selectors` object.
+     */
+    selectors?: empty,
+    ...
+  },
+};
+declare type ExtendedSelectors = {
+  /**
+   * Provides a way to use selectors that have not been explicitly whitelisted
+   * in cssMap.
+   *
+   * This does not provide any type-checking for the selectors (thus allowing
+   * more expressive selectors), though this is more flexible and allows
+   * nesting selectors in other selectors.
+   *
+   * A selector defined both outside of the `selectors` object and
+   * inside the `selectors` object is a runtime error.
+   *
+   * Note that you cannot nest a `selectors` object inside another
+   * `selectors` object.
+   *
+   * Only use if absolutely necessary.
+   * @example ```
+   * const myMap = cssMap({
+   *   danger: {
+   *     color: 'red',
+   *     '@media': {
+   *       '(min-width: 100px)': {
+   *         font-size: '1.5em',
+   *       },
+   *     },
+   *     '&:hover': {
+   *       color: 'pink',
+   *     },
+   *     selectors: {
+   *       '&:not(:active)': {
+   *         backgroundColor: 'yellow',
+   *       }
+   *     },
+   *   },
+   *   success: {
+   *     color: 'green',
+   *     '@media': {
+   *       '(min-width: 100px)': {
+   *         font-size: '1.3em',
+   *       },
+   *     },
+   *     '&:hover': {
+   *       color: '#8f8',
+   *     },
+   *     selectors: {
+   *       '&:not(:active)': {
+   *         backgroundColor: 'white',
+   *       }
+   *     },
+   *   },
+   * });
+   * ```
+   */
+  selectors?: ExtendedSelector,
+  ...
+};
+declare type Variants<VariantName: string> = {
+  [key: VariantName]: { ...CssProps, ...WhitelistedSelector, ...ExtendedSelectors },
+};
+declare type ReturnType<VariantName: string> = { [key: VariantName]: CssProps };
+/**
+ * ## cssMap
+ *
+ * Creates a collection of named CSS rules that are statically typed and useable with other Compiled APIs.
+ * For further details [read the documentation](https://compiledcssinjs.com/docs/api-cssmap).
+ * @example ```
+ * const borderStyleMap = cssMap({
+ *     none: { borderStyle: 'none' },
+ *     solid: { borderStyle: 'solid' },
+ * });
+ * const Component = ({ borderStyle }) => <div css={css(borderStyleMap[borderStyle])} />
+ *
+ * <Component borderStyle="solid" />
+ * ```
+ */
+declare export default function cssMap<T: string>(_styles: Variants<T>): $ReadOnly<ReturnType<T>>;

package/dist/esm/css-map/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/css-map/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAuGlD;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAmB,OAAoB;IACnE,MAAM,gBAAgB,EAAE,CAAC;AAC3B,CAAC"}

package/dist/esm/css-map/pseudos.d.ts

@@ -0,0 +1 @@
+export type Pseudos = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::target-text' | '&::view-transition' | '&:active' | '&:autofill' | '&:blank' | '&:checked' | '&:default' | '&:defined' | '&:disabled' | '&:empty' | '&:enabled' | '&:first' | '&:focus' | '&:focus-visible' | '&:focus-within' | '&:fullscreen' | '&:hover' | '&:in-range' | '&:indeterminate' | '&:invalid' | '&:left' | '&:link' | '&:local-link' | '&:optional' | '&:out-of-range' | '&:paused' | '&:picture-in-picture' | '&:placeholder-shown' | '&:playing' | '&:read-only' | '&:read-write' | '&:required' | '&:right' | '&:target' | '&:user-invalid' | '&:user-valid' | '&:valid' | '&:visited';

package/dist/esm/css-map/pseudos.js

@@ -0,0 +1,5 @@
+// List of pseudo-classes and pseudo-elements are from csstype
+// but with & added in the front, so that we target the current element
+// (instead of a child element)
+export {};
+//# sourceMappingURL=pseudos.js.map

package/dist/esm/css-map/pseudos.js.flow

@@ -0,0 +1,57 @@
+/**
+ * Flowtype definitions for pseudos
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+export type Pseudos =
+  | '&::after'
+  | '&::backdrop'
+  | '&::before'
+  | '&::cue'
+  | '&::cue-region'
+  | '&::first-letter'
+  | '&::first-line'
+  | '&::grammar-error'
+  | '&::marker'
+  | '&::placeholder'
+  | '&::selection'
+  | '&::spelling-error'
+  | '&::target-text'
+  | '&::view-transition'
+  | '&:active'
+  | '&:autofill'
+  | '&:blank'
+  | '&:checked'
+  | '&:default'
+  | '&:defined'
+  | '&:disabled'
+  | '&:empty'
+  | '&:enabled'
+  | '&:first'
+  | '&:focus'
+  | '&:focus-visible'
+  | '&:focus-within'
+  | '&:fullscreen'
+  | '&:hover'
+  | '&:in-range'
+  | '&:indeterminate'
+  | '&:invalid'
+  | '&:left'
+  | '&:link'
+  | '&:local-link'
+  | '&:optional'
+  | '&:out-of-range'
+  | '&:paused'
+  | '&:picture-in-picture'
+  | '&:placeholder-shown'
+  | '&:playing'
+  | '&:read-only'
+  | '&:read-write'
+  | '&:required'
+  | '&:right'
+  | '&:target'
+  | '&:user-invalid'
+  | '&:user-valid'
+  | '&:valid'
+  | '&:visited';

package/dist/esm/css-map/pseudos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pseudos.js","sourceRoot":"","sources":["../../../src/css-map/pseudos.ts"],"names":[],"mappings":"AAAA,8DAA8D;AAC9D,uEAAuE;AACvE,+BAA+B"}

package/dist/esm/index.d.ts

@@ -6,6 +6,7 @@ export { keyframes } from './keyframes';
 export { styled } from './styled';
 export { ClassNames } from './class-names';
 export { default as css } from './css';
+export { default as cssMap } from './css-map';
 export declare const jsx: typeof createElement;
 export declare namespace jsx {
     namespace JSX {

package/dist/esm/index.js

@@ -3,6 +3,7 @@ export { keyframes } from './keyframes';
 export { styled } from './styled';
 export { ClassNames } from './class-names';
 export { default as css } from './css';
+export { default as cssMap } from './css-map';
 // Pass through the (classic) jsx runtime.
 // Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
 export const jsx = createElement;

package/dist/esm/index.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { CssFunction, CSSProps, CssType } from './types';
@@ -10,3 +10,4 @@ declare export { keyframes } from './keyframes';
 declare export { styled } from './styled';
 declare export { ClassNames } from './class-names';
 declare export { default as css } from './css';
+declare export { default as cssMap } from './css-map';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAOtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAOtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAC;AAE9C,0CAA0C;AAC1C,kGAAkG;AAClG,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAC"}

package/dist/esm/keyframes/index.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { BasicTemplateInterpolations, CSSProps } from '../types';

package/dist/esm/runtime/ac.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for ac
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 /**

package/dist/esm/runtime/ax.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for ax
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 /**

package/dist/esm/runtime/cache.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for cache
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 /**

package/dist/esm/runtime/css-custom-property.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for css-custom-property
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 /**

package/dist/esm/runtime/dev-warnings.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for dev-warnings
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 declare export var analyzeCssInDev: (sheet: string) => void;

package/dist/esm/runtime/index.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 declare export { default as CS } from './style';

package/dist/esm/runtime/is-server-environment.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for is-server-environment
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 /**

package/dist/esm/runtime/sheet.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for sheet
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { Bucket, StyleSheetOpts } from './types';

package/dist/esm/runtime/style-cache.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for style-cache
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { ProviderComponent, UseCacheHook } from './types';

package/dist/esm/runtime/style.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for style
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { StyleSheetOpts } from './types';

package/dist/esm/runtime/types.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for types
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 export interface StyleSheetOpts {

package/dist/esm/runtime.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for runtime
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 declare export { CC, CS, ax, ac, clearAcCache, ix } from './runtime/index';

package/dist/esm/styled/index.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { ComponentType } from 'react';

package/dist/esm/types.d.ts

@@ -13,8 +13,8 @@ export type CssType<TProps> = CSSProps<TProps> | CssObject<TProps> | FunctionInt
 /**
  * These are all the CSS props that will exist.
  */
-export type CSSProps<TProps> = CSS.Properties<CssFunction<TProps>>;
-export type CssObject<TProps> = {
+export type CSSProps<TProps> = Readonly<CSS.Properties<CssFunction<TProps>>>;
+export type CssObject<TProps> = Readonly<{
     [key: string]: CssFunction<TProps>;
-};
+}>;
 export type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | boolean | undefined;

package/dist/esm/types.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for types
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import * as CSS from 'csstype';
@@ -19,11 +19,11 @@ export type CssType<TProps> = CssObject<TProps> | FunctionInterpolation<TProps>
 /**
  * These are all the CSS props that will exist.
  */
-export type CSSProps<TProps> = CSS.Properties<CssFunction<TProps>>;
-export type CssObject<TProps> = {
+export type CSSProps<TProps> = $ReadOnly<CSS.Properties<CssFunction<TProps>>>;
+export type CssObject<TProps> = $ReadOnly<{
   ...CSSProps<TProps>,
   [key: string]: CssFunction<TProps>,
-};
+}>;
 export type CssFunction<TProps = mixed> =
   | CssType<TProps>
   | BasicTemplateInterpolations

package/dist/esm/utils/error.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for error
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 declare export var createSetupError: () => Error;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
@@ -72,13 +72,13 @@
     "jsx-dev-runtime"
   ],
   "dependencies": {
-    "csstype": "^3.1.1"
+    "csstype": "^3.1.2"
   },
   "devDependencies": {
     "@compiled/benchmark": "^1.1.0",
     "@testing-library/react": "^12.1.5",
     "@types/jsdom": "^16.2.15",
-    "@types/react-dom": "^17.0.19",
+    "@types/react-dom": "^17.0.20",
     "jsdom": "^19.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

package/src/class-names/index.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { Node } from 'react';

package/src/css/index.js.flow

@@ -1,7 +1,7 @@
 /**
  * Flowtype definitions for index
  * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.20.1
+ * Flowgen v1.21.0
  * @flow
  */
 import type { CSSProps, CssObject, CssFunction } from '../types';

package/src/css-map/__tests__/index.test.tsx

@@ -0,0 +1,52 @@
+/** @jsxImportSource @compiled/react */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { css, cssMap } from '@compiled/react';
+import { render } from '@testing-library/react';
+
+describe('css map', () => {
+  const styles = cssMap({
+    danger: {
+      color: 'red',
+    },
+    success: {
+      color: 'green',
+    },
+  });
+
+  it('should generate css based on the selected variant', () => {
+    const Foo = ({ variant }: { variant: keyof typeof styles }) => (
+      <div css={styles[variant]}>hello world</div>
+    );
+    const { getByText, rerender } = render(<Foo variant="danger" />);
+
+    expect(getByText('hello world')).toHaveCompiledCss('color', 'red');
+
+    rerender(<Foo variant="success" />);
+    expect(getByText('hello world')).toHaveCompiledCss('color', 'green');
+  });
+
+  it('should statically access a variant', () => {
+    const Foo = () => <div css={styles.danger}>hello world</div>;
+    const { getByText } = render(<Foo />);
+
+    expect(getByText('hello world')).toHaveCompiledCss('color', 'red');
+  });
+
+  it('should merge styles', () => {
+    const hover = css({ ':hover': { color: 'red' } });
+    const Foo = () => <div css={[hover, styles.success]}>hello world</div>;
+    const { getByText } = render(<Foo />);
+
+    expect(getByText('hello world')).toHaveCompiledCss('color', 'green');
+    expect(getByText('hello world')).toHaveCompiledCss('color', 'red', { target: ':hover' });
+  });
+
+  it('should conditionally apply variant', () => {
+    const Foo = ({ isDanger }: { isDanger: boolean }) => (
+      <div css={isDanger && styles.danger}>hello world</div>
+    );
+    const { getByText } = render(<Foo isDanger={true} />);
+
+    expect(getByText('hello world')).toHaveCompiledCss('color', 'red');
+  });
+});