Extending of files with the same name produced wrong class names (displayName enabled)

[Ky6uk]

./Section.js

import styled from 'styled-components';

export const Section = styled.div`
  color: red;
`;

./A/Section.js

import styled from 'styled-components';
import { Section as BaseSection } from './Section.js'; 

export const Section = styled(BaseSection)`
  color: green;
`;

./B/Section.js

import styled from 'styled-components';
import { Section as BaseSection } from './A/Section.js'; 

export const Section = styled(BaseSection)`
  color: blue;
`;

App.jsx

import React, { Component } from 'react';
import { Section } from './B/Section.js';

class App extends Component {
  render() {
    return (
      <Section>
        Bork
      </Section>
    );
  }
}

export default App;

---

So Bork should be in blue color here (and it is without this plugin). But with this plugin the color of Bork is red because class names are the same when "displayName": true.

[Ky6uk]

That issue can be related to styled-components/styled-components#1715

[Ky6uk]

Fixed in SC v3.3.3