Linaria: Class styling interpolation does not style non-imported styled components when using with imported styled components

[jog1t]

Environment

"linaria": "^1.4.0-alpha.1",
"react": "^16.9.0",
"classnames": "^2.2.6",
"react-dom": "^16.9.0",

Description

In example below, NonWorkingWrapper does not gets styling from exampleClass.
The solution was to move NotWorkingWrapper to sharedComponents file.

Reproducible Demo

src/sharedComponents.js:

import { styled } from 'linaria/react';

const colors = {
    hollywoodCerise: '#EC008C'
};

const WorkingWrapper = styled.div`
    height: 40px;
    width: 40px;
`;

src/ExampleComponent:

import React from 'react';
import classNames from 'classnames';
import { styled } from 'linaria/react';
import { css } from 'linaria';
import { WorkingWrapper } from './sharedComponents';

const NotWorkingWrapper = styled.div`
    height: 40px;
    width: 40px;
`;

const exampleClass = css`
    flex-wrap: wrap;
    height: auto;
    padding: 0;
    ${WorkingWrapper} {
        background-color: red;
    }
    ${NotWorkingWrapper} {
        background-color: pink;
    }
`;

export default function ExampleComponent({isContainer}) {
    const headerWrapperClasses = classNames({
        [`container`]: isContainer,
    }, exampleClass);

    return (
        <div className={exampleClass}
            <WorkingWrapper>
                This should have red background
            </WorkingWrapper>
            <NotWorkingWrapper>
                This should have pink background
            </NotWorkingWrapper>
        </div>
    );
}

[jayu]

related feature request #492

[jayu]

Problem is solved at least in 1.4.0-beta.4 :)