Not working with wildcard imports

[mateusrachid]

It doesn't work when importing the component through the wildcard import syntax (import * as).

Suppose we the file styles.js containing this anchor component:

import styled from 'styled-components';

const Anchor = styled.a``;

The eslint rule jsx-a11y/anchor-is-valid warning appears if the Anchor component is used this way:

import { Anchor } from './styles';

export default function App {
   return <Anchor />;
}

But no warning is shown when using a wildcard import:

import * as Styles from './styles';

export default function App {
   return <Styles.Anchor />;
}

This pattern is useful when importing all exported components of a single file, so you don't have to explicitly import them one by one. It also has the added benefit of not polluting the file namespace with all component names.

[mateusrachid]

Great work on this plugin, by the way. It's very useful.

[brendanmorrell]

Hello, mateus. Not a direct answer to your issue, but I do not think the example you listed first would fire any of the linter warnings due to this issue, which I believe is possible to do, but would be relatively difficult and has not been implemented yet. Basically, eslint by default runs the parser only on a single file, and thus any cross-file checking requires additional logic for traversing the import/export declarations to find their initial declaration. I looked into it briefly but have been too busy to pursue it further for a while. I would love for it to be implemented eventually, though.

If I'm wrong and you actually can get an error from our plugin for the first example, could you show me either a codesandbox or an image of the linter error in code? Thanks

[brendanmorrell]

I'm closing this issue as it has been documented elsewhere, and unless I hear from the poster that I'm missing something, it is already a task item on the roadmap