import { transformSync } from '@babel/core' ; import babelPlugin from '../../index' ; const transform = ( code ) => { return transformSync ( code , { configFile : false , babelrc : false , compact : true , plugins : [ babelPlugin ] , } ) ?. code ; } ; describe ( 'styled component behaviour' , ( ) => { beforeAll ( ( ) => { process . env . AUTOPREFIXER = 'off' ; } ) ; afterAll ( ( ) => { delete process . env . AUTOPREFIXER ; } ) ; it ( 'should generate styled object component code' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const ListItem = styled.div({
        fontSize: '20px',
      });
    ` ) ; expect ( actual ) . toMatchInlineSnapshot ( `
      "/* File generated by @compiled/babel-plugin v0.0.0 */import{forwardRef}from'react';import*as React from'react';import{ax,ix,CC,CS}from\\"@compiled/react/runtime\\";const _=\\"._1wybgktf{font-size:20px}\\";const ListItem=forwardRef(({as:C=\\"div\\",style,...props},ref)=><CC>
            <CS>{[_]}</CS>
            <C{...props}style={style}ref={ref}className={ax([\\"_1wybgktf\\",props.className])}/>
          </CC>);if(process.env.NODE_ENV!=='production'){ListItem.displayName='ListItem';}"
    ` ) ; } ) ; it ( 'should generate styled template literal component code' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const ListItem = styled.div\`
        font-size: 20px;
      \`;
    ` ) ; expect ( actual ) . toMatchInlineSnapshot ( `
      "/* File generated by @compiled/babel-plugin v0.0.0 */import{forwardRef}from'react';import*as React from'react';import{ax,ix,CC,CS}from\\"@compiled/react/runtime\\";const _=\\"._1wybgktf{font-size:20px}\\";const ListItem=forwardRef(({as:C=\\"div\\",style,...props},ref)=><CC>
            <CS>{[_]}</CS>
            <C{...props}style={style}ref={ref}className={ax([\\"_1wybgktf\\",props.className])}/>
          </CC>);if(process.env.NODE_ENV!=='production'){ListItem.displayName='ListItem';}"
    ` ) ; } ) ; it ( 'should compose CSS from multiple sources' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const styles = { fontSize: 12 };

      const ListItem = styled.div([
        styles,
        \`color: blue;\`,
        { fontWeight: 500 }
      ]);
    ` ) ; expect ( actual ) . toInclude ( '{font-size:12px}' ) ; expect ( actual ) . toInclude ( '{color:blue}' ) ; expect ( actual ) . toInclude ( '{font-weight:500}' ) ; } ) ; it ( 'should not pass down invalid html attributes to the node' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';
      const ListItem = styled.div({
        fontSize: props => props.textSize,
      });
    ` ) ; expect ( actual ) . toInclude ( 'textSize,...props' ) ; expect ( actual ) . toInclude ( '"--_fb92co":ix(textSize)' ) ; } ) ; it ( 'should remove styled import' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';
      const ListItem = styled.div({
        fontSize: '20px',
      });
    ` ) ; expect ( actual ) . not . toInclude ( `import { styled } from '@compiled/react';` ) ; } ) ; it ( 'should replace string literal styled component with component' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';
      const ListItem = styled.div\`
        font-size: 20px;
      \`;
    ` ) ; expect ( actual ) . toMatchInlineSnapshot ( `
      "/* File generated by @compiled/babel-plugin v0.0.0 */import{forwardRef}from'react';import*as React from'react';import{ax,ix,CC,CS}from\\"@compiled/react/runtime\\";const _=\\"._1wybgktf{font-size:20px}\\";const ListItem=forwardRef(({as:C=\\"div\\",style,...props},ref)=><CC>
            <CS>{[_]}</CS>
            <C{...props}style={style}ref={ref}className={ax([\\"_1wybgktf\\",props.className])}/>
          </CC>);if(process.env.NODE_ENV!=='production'){ListItem.displayName='ListItem';}"
    ` ) ; } ) ; it ( 'should add an identifier nonce to the style element' , ( ) => { const actual = transformSync ( `
      import { styled } from '@compiled/react';

      const ListItem = styled.div\`
        font-size: \${props => props.color}px;
      \`;
      ` , { configFile : false , babelrc : false , compact : true , plugins : [ [ babelPlugin , { nonce : '__webpack_nonce__' } ] ] , } ) ?. code ; expect ( actual ) . toInclude ( '<CS nonce={__webpack_nonce__}' ) ; } ) ; it ( 'should shortcircuit props with suffix to a empty string to avoid undefined in css' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const ListItem = styled.div\`
        font-size: \${props => props.color}px;
      \`;
    ` ) ; expect ( actual ) . toInclude ( '"--_1p69eoh":ix(props.color,"px")' ) ; } ) ; it ( 'should prefix interpolation' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const ListItem = styled.div\`
        font-size: -\${props => props.color}px;
      \`;
    ` ) ; expect ( actual ) . toInclude ( '"--_1p69eoh":ix(props.color,"px","-")' ) ; } ) ; it ( 'should spread down props to element' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const ListItem = styled.div\`
        font-size: 20px;
      \`;
    ` ) ; expect ( actual ) . toInclude ( '<C{...props}' ) ; } ) ; it ( 'should compose a component using template literal' , ( ) => { const actual = transform ( `
      import React from 'react';
      import { styled } from '@compiled/react';

      const Component = () => null;

      const ListItem = styled(Component)\`
        font-size: 20px;
      \`;
    ` ) ; expect ( actual ) . toInclude ( 'as:C=Component' ) ; } ) ; it ( 'should compose a component using object literal' , ( ) => { const actual = transform ( `
      import React from 'react';
      import { styled } from '@compiled/react';

      const Component = () => null;

      const ListItem = styled(Component)({
        fontSize: 20
      });
    ` ) ; expect ( actual ) . toInclude ( 'as:C=Component' ) ; } ) ; it ( 'should concat class name prop if defined' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';
      const ListItem = styled.div\`
        font-size: 20px;
      \`;
    ` ) ; expect ( actual ) . toInclude ( `className={ax([\"_1wybgktf\",props.className])}` ) ; } ) ; it ( 'should inline constant identifier string literal' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const fontSize = '20px';

      const ListItem = styled.div\`
        font-size: \${fontSize};
      \`;
    ` ) ; expect ( actual ) . toInclude ( '{font-size:20px}' ) ; } ) ; it ( 'should transform an arrow function with a body into an IIFE' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const ListItem = styled.div({
        color: props => { return props.color; },
      });
    ` ) ; expect ( actual ) . toInclude ( '{color:var(--_1poneq5)}' ) ; expect ( actual ) . toInclude ( '"--_1poneq5":ix((()=>{return props.color;})())' ) ; } ) ; it ( 'should transform an arrow function with a body into an IIFE by preventing passing down invalid html attributes to the node' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const ListItem = styled.div({
        fontSize: props => { return props.textSize; },
      });
    ` ) ; expect ( actual ) . toInclude ( '{font-size:var(--_1j0t240)}' ) ; expect ( actual ) . toInclude ( '({as:C="div",style,textSize,...props},ref)' ) ; expect ( actual ) . toInclude ( '"--_1j0t240":ix((()=>{return textSize;})())' ) ; } ) ; it ( 'should move suffix and prefix of a dynamic arrow function with a body into an IIFE' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const ListItem = styled.div({
        content: \`"$\{props => { return props.color; }}"\`
      });
    ` ) ; expect ( actual ) . toInclude ( '{content:var(--_1poneq5)}' ) ; expect ( actual ) . toInclude ( '"--_1poneq5":ix((()=>{return props.color;})(),"\\"","\\"")' ) ; } ) ; it ( 'should move suffix and prefix of a dynamic arrow function with a body into an IIFE by preventing passing down invalid html attributes to the node' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const ListItem = styled.div({
        content: \`"$\{props => { return props.textSize; }}"\`
      });
    ` ) ; expect ( actual ) . toInclude ( '{content:var(--_1j0t240)}' ) ; expect ( actual ) . toInclude ( '({as:C="div",style,textSize,...props},ref)' ) ; expect ( actual ) . toInclude ( '"--_1j0t240":ix((()=>{return textSize;})(),"\\"","\\"")' ) ; } ) ; it ( 'should collect args as styles' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const ListItem = styled.div(
        { color: 'darkorchid' },
        { fontSize: 12 },
      );
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '{color:darkorchid}' , '{font-size:12px}' , 'ax(["_syaz1paq _1wyb1fwx",props.className])' , ] ) ; } ) ; it ( 'should not throw when template literal CSS has no terminating semi colon' , ( ) => { expect ( ( ) => { transform ( `
      import { styled } from '@compiled/react';

      const ListItem = styled.div(
        \`color: red\`,
        { fontSize: 20 }
      );
    ` ) ; } ) . not . toThrow ( ) ; } ) ; it ( 'should handle destructuring in interpolation functions' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';
      import colors from 'colors';

      export const BadgeSkeleton = styled.span\`
        background-color: \${({ isLoading }) => (isLoading ? colors.N20 : colors.N40)};
        color: \${({ loading: l }) => (l ? colors.N50 : colors.N10)};
        border-color: \${(propz) => (propz.loading ? colors.N100 : colors.N200)};
      \`;
    ` ) ; expect ( actual ) . toMatchInlineSnapshot ( `
      "/* File generated by @compiled/babel-plugin v0.0.0 */import{forwardRef}from'react';import*as React from'react';import{ax,ix,CC,CS}from\\"@compiled/react/runtime\\";import colors from'colors';const _3=\\"._1h6dk60n{border-color:var(--_8sf962)}\\";const _2=\\"._syaz1g46{color:var(--_xru1br)}\\";const _=\\"._bfhk14r0{background-color:var(--_3rbzda)}\\";export const BadgeSkeleton=forwardRef(({as:C=\\"span\\",style,isLoading,loading,...props},ref)=><CC>
            <CS>{[_,_2,_3]}</CS>
            <C{...props}style={{...style,\\"--_3rbzda\\":ix(isLoading?colors.N20:colors.N40),\\"--_xru1br\\":ix(loading?colors.N50:colors.N10),\\"--_8sf962\\":ix(props.loading?colors.N100:colors.N200)}}ref={ref}className={ax([\\"_bfhk14r0 _syaz1g46 _1h6dk60n\\",props.className])}/>
          </CC>);if(process.env.NODE_ENV!=='production'){BadgeSkeleton.displayName='BadgeSkeleton';}"
    ` ) ; } ) ; it ( 'should handle an animation that references an inline @keyframes' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const ListItem = styled.div\`
        @keyframes fadeOut {
          from {
            opacity: 1;
          }
          50% {
            opacity: 0.5;
          }
          to {
            opacity: 0;
          }
        }

        animation: fadeOut 2s ease-in-out;
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ 'const _2="._y44vk4ag{animation:fadeOut 2s ease-in-out}"' , 'const _="@keyframes fadeOut{0%{opacity:1}50%{opacity:0.5}to{opacity:0}}"' , '<CS>{[_,_2]}</CS>' , 'className={ax(["_y44vk4ag",props.className])}' , ] ) ; } ) ; it ( 'should not blow up with an expanding property' , ( ) => { expect ( ( ) => transform ( `
        import { styled } from '@compiled/react';

        export const BoardContent = styled.span\`
          flex: 1;
        \`;
    ` ) ) . not . toThrow ( ) ; } ) ; it ( 'should apply conditional CSS with ternary operator' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.button\`
        color: \${(props) => (props.isPrimary ? 'blue' : 'red')};
        font-size: 30px;
        border: 2px solid blue;
        padding: 8px;
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._19bvftgi{padding-left:8px}' , '._n3tdftgi{padding-bottom:8px}' , '._u5f3ftgi{padding-right:8px}' , '._ca0qftgi{padding-top:8px}' , '._19itlf8h{border:2px solid blue}' , '._1wyb1ul9{font-size:30px}' , '._syazmuvv{color:var(--_b3bzwz)}' , ] ) ; expect ( actual ) . toInclude ( `<C{...props}style={{...style,"--_b3bzwz":ix(isPrimary?'blue':'red')}}ref={ref}className={ax(["_syazmuvv _1wyb1ul9 _19itlf8h _ca0qftgi _u5f3ftgi _n3tdftgi _19bvftgi",props.className])}/>` ) ; } ) ; it ( 'should apply conditional CSS with ternary operator and tagged templates branches' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.button\`
        color: \${(props) => (props.isPrimary ? \`blue\` : \`red\`)};
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._syazcoia{color:var(--_1k1hsek)' , `<C{...props}style={{...style,"--_1k1hsek":ix(isPrimary?\`blue\`:\`red\`)}}ref={ref}className={ax(["_syazcoia",props.className])}/>` , ] ) ; } ) ; it ( 'should apply conditional CSS with ternary operators, template literal branches containing props' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';
      import { CUSTOM_WIDTH } from './constants';

      const ListItem = styled.div\`
        width: \${(props) => props.useCustomWidth ? \`\${CUSTOM_WIDTH}px)\` : '100%'};
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._1bsb1rvt{width:var(--_yklgxf)}' , `<C{...props}style={{...style,\"--_yklgxf\":ix(useCustomWidth?\`\${CUSTOM_WIDTH}px)\`:'100%')}}ref={ref}className={ax([\"_1bsb1rvt\",props.className])}/>` , ] ) ; } ) ; it ( 'should apply conditional CSS with ternary operators, template literal branches containing destructured props' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';
      import { CUSTOM_WIDTH } from './constants';

      const ListItem = styled.div\`
        width: \${({useCustomWidth}) => useCustomWidth ? \`\${CUSTOM_WIDTH}px)\` : '100%'};
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._1bsb1ydh{width:var(--_hilss9)}' , `<C{...props}style={{...style,\"--_hilss9\":ix(useCustomWidth?\`\${CUSTOM_WIDTH}px)\`:'100%')}}ref={ref}className={ax([\"_1bsb1ydh\",props.className])}/>` , ] ) ; } ) ; it ( 'should apply conditional CSS with multiple ternary operators' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.button\`
        color: \${(props) => (props.isPrimary ? 'blue' : 'red')};
        border: \${(props) => (props.isPrimary ? '1px solid blue' : '1px solid red')};
        font-size: 30px;
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._1wyb1ul9{font-size:30px}' , '._19it1hus{border:var(--_ubmxli)}' , '._syazmuvv{color:var(--_b3bzwz)}' , ] ) ; expect ( actual ) . toInclude ( `<C{...props}style={{...style,\"--_b3bzwz\":ix(isPrimary?'blue':'red'),\"--_ubmxli\":ix(isPrimary?'1px solid blue':'1px solid red')}}ref={ref}className={ax([\"_syazmuvv _19it1hus _1wyb1ul9\",props.className])}/>` ) ; } ) ; it ( 'should apply conditional CSS with nested ternary operators' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.button\`
        color: \${(props) => (props.isPrimary ? props.isDisabled ? 'black' : 'blue' : 'red')};
        font-size: 30px;
        border: 2px solid blue;
        padding: 8px;
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._19bvftgi{padding-left:8px}' , '._n3tdftgi{padding-bottom:8px}' , '._u5f3ftgi{padding-right:8px}' , '._ca0qftgi{padding-top:8px}' , '._19itlf8h{border:2px solid blue}' , '._1wyb1ul9{font-size:30px}' , '._syaz1xo0{color:var(--_13kr4bd)}' , `<C{...props}style={{...style,"--_13kr4bd":ix(isPrimary?isDisabled?'black':'blue':'red')}}ref={ref}className={ax(["_syaz1xo0 _1wyb1ul9 _19itlf8h _ca0qftgi _u5f3ftgi _n3tdftgi _19bvftgi",props.className])}/>` , ] ) ; } ) ; it ( 'should apply conditional CSS with template literal' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div\`
        color: red;
        background: white;
        border: 3px solid yellow;
        \${props => props.isPrimary && ({ color: 'blue' })};
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._syaz13q2{color:blue}' , '._19it7fe6{border:3px solid yellow}' , '._bfhk1x77{background-color:white}' , '._syaz5scu{color:red}' , ] ) ; expect ( actual ) . toInclude ( 'className={ax(["_syaz5scu _bfhk1x77 _19it7fe6",props.isPrimary&&"_syaz13q2",props.className])}' ) ; } ) ; it ( 'should apply conditional CSS with template literal and nested ternary operators' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div\`
        background: white;
        \${props => props.isPrimary ? props.isDisabled ? { color: 'black' } : { color: 'blue' } : { color: 'red' }};
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._bfhk1x77{background-color:white}' , '._syaz11x8{color:black}' , '._syaz13q2{color:blue}' , '._syaz5scu{color:red}' , 'className={ax(["_bfhk1x77",props.isPrimary?props.isDisabled?"_syaz11x8":"_syaz13q2":"_syaz5scu",props.className])}' , ] ) ; } ) ; it ( 'should apply conditional CSS with template literal, nested ternary operators, and different types' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div\`
        background: white;
        \${props => props.isPrimary ? props.isDisabled ? { color: 'black' } : 'color: blue' : \`color: red\`};
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._bfhk1x77{background-color:white}' , '._syaz11x8{color:black}' , '._syaz13q2{color:blue}' , '._syaz5scu{color:red}' , 'className={ax(["_bfhk1x77",props.isPrimary?props.isDisabled?"_syaz11x8":"_syaz13q2":"_syaz5scu",props.className])}' , ] ) ; } ) ; it ( 'should apply conditional CSS with template literal and multiple props lines' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div\`
        color: red;
        \${props => props.isPrimary && ({ color: 'blue' })};
        \${props => props.isBolded && ({ fontWeight: 'bold' })};
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._k48p8n31{font-weight:bold}' , '._syaz13q2{color:blue}' , '._syaz5scu{color:red}' , ] ) ; expect ( actual ) . toInclude ( 'className={ax(["_syaz5scu",props.isPrimary&&"_syaz13q2",props.isBolded&&"_k48p8n31",props.className])}' ) ; } ) ; it ( 'should not allow a logical statement with a conditional right-hand side' , ( ) => { expect ( ( ) => transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div\`
        \${props => props.isShown && (props.isPrimary ? { color: 'blue' } : { color: 'green' })};
      \`;
    ` ) ) . toThrow ( "ConditionalExpression isn't a supported CSS type" ) ; } ) ; it ( 'should apply conditional CSS when using "key: value" in string form' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div\`
        \${props => props.isPrimary ? 'color: green' : \`color: red\`};
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._syazbf54{color:green}' , '._syaz5scu{color:red}' , 'className={ax(["",props.isPrimary?"_syazbf54":"_syaz5scu",props.className])}' , ] ) ; } ) ; it ( 'should apply nested conditional CSS when using "key: value" in string form' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div\`
        \${props => props.isPrimary ? 'color: blue' :  props.isGreen ? 'color: green' : 'color: red'};
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._syazbf54{color:green}' , '._syaz13q2{color:blue}' , '._syaz5scu{color:red}' , 'className={ax(["",props.isPrimary?"_syaz13q2":props.isGreen?"_syazbf54":"_syaz5scu",props.className])}' , ] ) ; } ) ; it ( 'should apply conditional CSS when using "key: value; key: value; ..." in string form' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div\`
        \${props => props.isPrimary ? 'color: green; font-size: 12px;' : \`color: red; font-size: 16px;\`};
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._syazbf54{color:green}' , '._syaz5scu{color:red}' , '._1wyb1fwx{font-size:12px}' , '._1wybexct{font-size:16px}' , 'className={ax(["",props.isPrimary?"_syazbf54 _1wyb1fwx":"_syaz5scu _1wybexct",props.className])}' , ] ) ; } ) ; it ( 'should apply conditional CSS when using inline mixins' , ( ) => { const actual = transform ( `
      import { styled, css } from '@compiled/react';

      const Component = styled.div\`
        \${props => props.isPrimary ? css\`color: green\` : css({ color: 'red' })};
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._syazbf54{color:green}' , '._syaz5scu{color:red}' , 'className={ax(["",props.isPrimary?"_syazbf54":"_syaz5scu",props.className])}' , ] ) ; } ) ; it ( 'should apply unconditional before and after a conditional css rule with template literal' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div\`
        color: red;
        background: white;
        \${props => props.isPrimary && ({ color: 'blue' })};
        border: 3px solid yellow;
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._syaz13q2{color:blue}' , '._19it7fe6{border:3px solid yellow}' , '._bfhk1x77{background-color:white}' , '._syaz5scu{color:red}' , ] ) ; expect ( actual ) . toInclude ( '{ax(["_syaz5scu _bfhk1x77 _19it7fe6",props.isPrimary&&"_syaz13q2",props.className])}' ) ; } ) ; it ( 'should apply unconditional after a conditional css rule with template literal' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div\`
        \${props => props.isPrimary && ({ color: 'blue' })};
        border: 3px solid yellow;
        color: red;
        background: white;
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._syaz13q2{color:blue}' , '._bfhk1x77{background-color:white}' , '._syaz5scu{color:red}' , '._19it7fe6{border:3px solid yellow}' , ] ) ; expect ( actual ) . toInclude ( '{ax(["_19it7fe6 _syaz5scu _bfhk1x77",props.isPrimary&&"_syaz13q2",props.className])}' ) ; } ) ; it ( 'should apply conditional CSS with object styles' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div(
        { color: 'red' },
        props => props.isPrimary && ({ color: 'blue' }),
      );
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._syaz13q2{color:blue}' , '._syaz5scu{color:red}' ] ) ; expect ( actual ) . toInclude ( 'className={ax(["_syaz5scu",props.isPrimary&&"_syaz13q2",props.className])}' ) ; } ) ; it ( 'should apply conditional CSS with object styles and multiple props lines' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div(
        { color: 'red' },
        props => props.isPrimary && ({ color: 'blue' }),
        props => props.isBolded && ({ fontWeight: 'bold' }),
      );
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._k48p8n31{font-weight:bold}' , '._syaz13q2{color:blue}' , '._syaz5scu{color:red}' , ] ) ; expect ( actual ) . toInclude ( 'className={ax(["_syaz5scu",props.isPrimary&&"_syaz13q2",props.isBolded&&"_k48p8n31",props.className])}' ) ; } ) ; it ( 'should apply unconditional before and after a conditional css rule with object styles' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div(
        { color: 'red' },
        props => props.isPrimary && ({ color: 'blue' }),
        { border: '1px solid black'},
      );
    ` ) ; expect . toIncludeMultiple ( [ '._syaz13q2{color:blue}' , '._19it97hw{border:1px solid black}' , '._syaz5scu{color:red}' , ] ) ; expect ( actual ) . toInclude ( '{ax(["_syaz5scu _19it97hw",props.isPrimary&&"_syaz13q2",props.className])}' ) ; } ) ; it ( 'should apply conditional CSS with object styles regardless declaration order' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div(
        props => props.isPrimary && ({ color: 'red' }),
        { color: 'blue' },
      );
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._syaz5scu{color:red}' , '._syaz13q2{color:blue}' ] ) ; expect ( actual ) . toInclude ( 'className={ax(["_syaz13q2",props.isPrimary&&"_syaz5scu",props.className])}' ) ; } ) ; it ( 'should apply multi conditional logical expression' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div(
        { color: 'red' },
        props => (props.isPrimary || props.isMaybe) && ({ color: 'blue' }),
      );
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._syaz13q2{color:blue}' , '._syaz5scu{color:red}' ] ) ; expect ( actual ) . toInclude ( '{ax(["_syaz5scu",(props.isPrimary||props.isMaybe)&&"_syaz13q2",props.className])}' ) ; } ) ; it ( 'should apply multi conditional logical expression with different props lines and syntax styles' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div(
        { color: 'red' },
        (props) => props.isPrimary && { color: 'blue' },
        { fontWeight: (props) => (props.isBolded ? 'bold' : 'normal')}
      );
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._k48phkfe{font-weight:var(--_1aan5t)}' , '._syaz13q2{color:blue}' , '._syaz5scu{color:red}' , ] ) ; expect ( actual ) . toInclude ( `<C{...props}style={{...style,\"--_1aan5t\":ix(isBolded?'bold':'normal')}}ref={ref}className={ax([\"_syaz5scu _k48phkfe\",props.isPrimary&&\"_syaz13q2\",props.className])}/>` ) ; } ) ; it ( 'should apply the same CSS property with unconditional as default and multiple logical expressions' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div(
        { color: 'red' },
        props => props.isPrimary && (props.isBolded || props.isFoo) && ({ color: 'blue' }),
      );
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._syaz13q2{color:blue}' , '._syaz5scu{color:red}' ] ) ; expect ( actual ) . toInclude ( '{ax(["_syaz5scu",props.isPrimary&&(props.isBolded||props.isFoo)&&"_syaz13q2",props.className])}' ) ; } ) ; it ( 'should apply conditional CSS with ternary and boolean in the same line' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div(
        { fontSize: '20px' },
        props => props.isPrimary && props.isBolded ? ({ color: 'blue' }) : ({ color: 'red'}),
      );
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._syaz13q2{color:blue}' , '._syaz5scu{color:red}' , '._1wybgktf{font-size:20px}' , 'className={ax(["_1wybgktf",props.isPrimary&&props.isBolded?"_syaz13q2":"_syaz5scu",props.className])}/' , ] ) ; } ) ; it ( 'should only evaluate the last unconditional CSS rule for each property' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div(
        { color: 'red' },
        { color: 'white', background: 'black' },
        { color: 'orange'},
        { background: 'white'},
      );
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._bfhk1x77{background-color:white}' , '._syazruxl{color:orange}' , ] ) ; expect ( actual ) . toInclude ( 'className={ax(["_syazruxl _bfhk1x77",props.className])}' ) ; } ) ; it ( 'should only add falsy condition when truthy condition has no value' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div(
        props => props.isPrimary ? undefined : { color: 'green', background: 'black' },
      );
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._syazbf54{color:green}' , '._bfhk11x8{background-color:black}' , 'className={ax(["",!props.isPrimary&&"_syazbf54 _bfhk11x8",props.className])}' , ] ) ; } ) ; it ( 'should only add truthy condition when falsy condition has no value' , ( ) => { const actual = transform ( `
      import { styled } from '@compiled/react';

      const Component = styled.div(
        props => props.isPrimary ? { color: 'green', background: 'black' } : undefined,
      );
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._syazbf54{color:green}' , '._bfhk11x8{background-color:black}' , 'className={ax(["",props.isPrimary&&"_syazbf54 _bfhk11x8",props.className])}' , ] ) ; } ) ; it ( 'should conditionally apply CSS mixins' , ( ) => { const actual = transform ( `
      import { styled, css } from '@compiled/react';

      const dark = css\`
        background-color: black;
        color: white;
      \`;

      const light = css({
        'background-color': 'white',
        color: 'black',
      });

      const Component = styled.div\`
        \${(props) => (props.isDark ? dark : light)};
        font-size: 30px;
      \`;
    ` ) ; expect ( actual ) . toIncludeMultiple ( [ '._syaz11x8{color:black}' , '._bfhk1x77{background-color:white}' , '._syaz1x77{color:white}' , '_bfhk11x8{background-color:black}' , '_1wyb1ul9{font-size:30px}' , 'className={ax(["_1wyb1ul9",props.isDark?"_bfhk11x8 _syaz1x77":"_bfhk1x77 _syaz11x8",props.className])}' , ] ) ; } ) ; } ) ;