Array.map в шаблонном литерале для отображения правил CSS для нескольких медиа-запросов?

Question

Здесь я пытаюсь перебрать реквизиты для отображения правил CSS для нескольких медиа-запросов.

Использование

<FlexContainerExperimental
    direction="column"
    mediaQueries={[
        {mediaQueryMinWidth: props.theme.minWidthLargeDevice, direction: 'row'},
        {mediaQueryMinWidth: props.theme.minWidthMediumDevice, direction: 'row', itemsPerLane: 2},
    ]}
>
    ...
</FlexContainerExperimental>

Стилизованный компонент

interface FlexContainerSettings {
    direction?: string;
    itemsPerLane?: number;
}

interface FlexContainerExperimentalProps extends FlexContainerSettings {
    // tslint:disable-next-line:no-any
    children: any;
    className?: string;
    mediaQueries?: MediaQuery[];
}

interface MediaQuery extends FlexContainerSettings {
    mediaQueryMinWidth: string;
}

// tslint:disable:no-any
const Container = styled.div<FlexContainerExperimentalProps>`
    display: flex;
    margin-left: -${props => props.theme.itemHorizontalMargin};
    margin-top: -${props => props.theme.itemVerticalMargin};

    flex-direction: ${props => props.direction};

    ${props => props.mediaQueries && props.mediaQueries.map((mediaQuery: MediaQuery) => `
        @media all and (min-width: ${mediaQuery.mediaQueryMinWidth}) {
            flex-direction: ${mediaQuery.direction};
            ${mediaQuery.itemsPerLane && `
                flex-wrap: wrap;
                & > * {
                    flex: 1 1 calc(${100 / mediaQuery.itemsPerLane}% - ${
                        mediaQuery.direction === 'column' || 
                        (!mediaQuery.direction && props.direction === 'column') 
                        ? props.theme.itemVerticalMargin 
                        : props.theme.itemHorizontalMargin}
                    );
                }
            `};
        };
    `).join()};
`;

function FlexContainerExperimental(props: FlexContainerExperimentalProps) {
    const { children, ...rest } = props;

    return (
        <Container {...rest}>
            {children}
        </Container>
    );
}

export { FlexContainerExperimental };
export * from './FlexItem';

Неожиданное поведение

Применяется только первый медиазапрос в моем массиве. Другими словами, я получаю различное поведение в зависимости от порядка объектов в массиве mediaQueries

mediaQueries={[
        {mediaQueryMinWidth: props.theme.minWidthMediumDevice, direction: 'row', itemsPerLane: 2},
        {mediaQueryMinWidth: props.theme.minWidthLargeDevice, direction: 'row'},
    ]}

Answer 1

Я разобрался с решением. Добавление новой строки после каждого медиазапроса.

const Container = styled.div<FlexContainerExperimentalProps>`
    display: flex;
    margin-left: -${props => props.theme.itemHorizontalMargin};
    margin-top: -${props => props.theme.itemVerticalMargin};

    flex-direction: ${props => props.direction};

    ${props => props.mediaQueries && props.mediaQueries.map((mediaQuery: MediaQuery) => `
        @media all and (min-width: ${mediaQuery.mediaQueryMinWidth}) {
            flex-direction: ${mediaQuery.direction};
            ${mediaQuery.itemsPerLane && `
                flex-wrap: wrap;
                & > * {
                    flex: 1 1 calc(${100 / mediaQuery.itemsPerLane}% - ${
                        mediaQuery.direction === 'column' || 
                        (!mediaQuery.direction && props.direction === 'column') 
                        ? props.theme.itemVerticalMargin 
                        : props.theme.itemHorizontalMargin}
                    );
                }
            `};
        }

    `).join('\n')};
`;