import { transform } from '../../test-utils' ; describe ( 'ClassNames used with a css call expression' , ( ) => { describe ( 'transforms an object expression that contains' , ( ) => { it ( 'inlined values' , ( ) => { const actual = transform ( `
        import { ClassNames } from '@compiled/react';

        const ListItem = () => (
          <ClassNames>
            {({ css, style }) => (
              <div
                className={css({ color: 'red', marginTop: 0 })}
                style={style}
              >
                hello, world!
              </div>
            )}
          </ClassNames>
        );
      ` ) ; expect ( actual ) . toIncludeMultiple ( [ '{color:red}' , '{margin-top:0}' ] ) ; } ) ; it ( 'an inlined psuedo-class object expression' , ( ) => { const actual = transform ( `
        import { ClassNames } from '@compiled/react';

        const ListItem = () => (
          <ClassNames>
            {({ css, style }) => (
              <div
                className={css({ ':hover': { color: 'red', marginTop: 0 } })}
                style={style}
              >
                hello, world!
              </div>
            )}
          </ClassNames>
        );
      ` ) ; expect ( actual ) . toIncludeMultiple ( [ ':hover{color:red}' , ':hover{margin-top:0}' ] ) ; } ) ; it ( 'a declared psuedo-class object expression' , ( ) => { const actual = transform ( `
        import { ClassNames } from '@compiled/react';

        const hover = { color: 'red' };

        const ListItem = () => (
          <ClassNames>
            {({ css }) => (
              <div className={css({ fontSize: '20px', ':hover': hover })}>
                hello, world!
              </div>
            )}
          </ClassNames>
        );
      ` ) ; expect ( actual ) . toIncludeMultiple ( [ ':hover{color:red}' , '{font-size:20px}' ] ) ; } ) ; it ( 'a declared string literal' , ( ) => { const actual = transform ( `
        import { ClassNames } from '@compiled/react';

        const color = 'red';

        const ListItem = () => (
          <ClassNames>
            {({ css, style }) => (
              <div className={css({ color, margin: 0 })} style={style}>
                hello, world!
              </div>
            )}
          </ClassNames>
        );
      ` ) ; expect ( actual ) . toIncludeMultiple ( [ '{color:red}' , '{margin-top:0}' ] ) ; } ) ; it ( 'a spread element that references an object expression' , ( ) => { const actual = transform ( `
        import { ClassNames } from '@compiled/react';

        const mixin = { color: 'red' };

        const ListItem = () => (
          <ClassNames>
            {({ css, style }) => (
              <div className={css({ color: 'blue', ...mixin })} style={style}>
                hello, world!
              </div>
            )}
          </ClassNames>
        );
      ` ) ; expect ( actual ) . toIncludeMultiple ( [ '{color:red}' ] ) ; } ) ; it ( 'a dynamic property value using inline styles' , ( ) => { const code = `
        import { ClassNames } from '@compiled/react';
        import { useState } from 'react';

        const [fontSize] = useState('10px');

        const ListItem = () => (
          <ClassNames>
            {({ css, style }) => (
              <div className={css({ fontSize })} style={style}>
                hello, world!
              </div>
            )}
          </ClassNames>
        );
      ` ; const actual = transform ( code , { pretty : false } ) ; expect ( actual ) . toIncludeMultiple ( [ 'style={{"--_1j2e0s2":ix(fontSize)}}' , 'font-size:var(--_1j2e0s2)' , ] ) ; } ) ; it ( 'a dynamic property value and suffix using inline styles' , ( ) => { const code = `
        import { ClassNames } from '@compiled/react';
        import { useState } from 'react';

        const fontSize = useState(20);

        const ListItem = () => (
          <ClassNames>
            {({ css, style }) => (
              <div className={css({ fontSize: \`\${fontSize}px\` })} style={style}>
                hello, world!
              </div>
            )}
          </ClassNames>
        );
      ` ; const actual = transform ( code , { pretty : false } ) ; expect ( actual ) . toIncludeMultiple ( [ 'style={{"--_1j2e0s2":ix(fontSize,"px")}}' , 'font-size:var(--_1j2e0s2)' , ] ) ; } ) ; it ( 'a spread element call expression referencing an arrow function that returns an object expression' , ( ) => { const actual = transform ( `
        import { ClassNames } from '@compiled/react';

        const color1 = 'black';
        const mixin = ({ color1, color2: c }, color3, radius) => ({
          color: color1,
          backgroundColor: c,
          borderColor: color3 ,
          borderRadius: radius,
        });

        const color = { red: 'red' };
        const greenColor = 'green';

        const Component = (props) => {
          const color2 = 'black';

          return (
            <ClassNames>
              {({ css }) => (
                <div className={css({ ...mixin({ color1: color.red, color2: 'blue' }, greenColor, 10) })} />
              )}
            </ClassNames>
          );
        };
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '{color:red}' , '{background-color:blue}' , '{border-color:green}' , '{border-radius:10px}' , ] ) ; } ) ; it ( 'a member call expression referencing an arrow function that returns an object expression' , ( ) => { const actual = transform ( `
        import { ClassNames } from '@compiled/react';

        const mixin = {
          value: (color1, r, color2) => ({
            color: color1,
            borderRadius: r,
            borderColor: color2,
          })
        };

        const radius = 10;

        const Component = (props) => (
          <ClassNames>
            {({ css, style }) => (
              <div
                className={css({ ...mixin.value(props.color1, radius, 'red') })}
                style={style}
              />
            )}
          </ClassNames>
        );
      ` ) ; expect ( actual ) . toIncludeMultiple ( [ '"--_zo7lop": ix(props.color1)' , '{border-radius:10px}' , '{border-color:red}' , ] ) ; } ) ; it ( 'a call expression with unresolved arguments' , ( ) => { const actual = transform ( `
        import { ClassNames } from '@compiled/react';

        const radius = 10;
        const mixin = (color1, radius, size, weight) => ({
          color: color1,
          borderRadius: radius,
          fontSize: size,
          fontWeight: weight
        });

        const Component = (props) => (
          <ClassNames>
            {({ css, style }) => (
              <div
                className={css({ ...mixin(props.color1, radius) })}
                style={style}
              />
            )}
          </ClassNames>
        );
      ` ) ; expect ( actual ) . toIncludeMultiple ( [ '{color:var(--_zo7lop)}' , '"--_zo7lop": ix(props.color1)' , '{border-radius:10px}' , '{font-weight:var(--_u6vle4)}' , '"--_u6vle4": ix()' , '{font-size:var(--_kre2x8)}' , '"--_kre2x8": ix()' , ] ) ; } ) ; } ) ; } ) ;