Duplicated import declarations

[kcmr]

Hi,

I'm facing an issue when I import two style files. The import declaration is added for each of the files, producing an error due to the duplicated import name (css).

The following code:

import styles from './styles.css';
import another from './another.css';

Produces this result:

import { css as _css } from "lit-element";
const styles = _css`:host {
  display: block;
}
`;
import { css as _css } from "lit-element";
const another = _css`:host {
  display: block;
}
`;

I'm happy to contribute with a PR, but I have a question. Why do you want to rename the import identifier? Can we just use the provided name from the plugin options? (import { tagged } from 'module')

[unlight]

Why do you want to rename the import identifier?

Yes, why not. But we need to make sure that this variable will not be shadowed in all scopes of the file.

[kcmr]

I think is more difficult to have a variable called like a tagged function that you know you're using (css) because you provided it as an option for the Babel plugin. If you rename it to something that the user isn't aware of, there is the possibility that a variable _css exists in the transformed file.

My idea is:

• check if the module already exists in the file
  • if true
    • check if the tagged function is already imported
      • if true
        • transform the CSS, etc.
      • else
        • import the function from the existing module import
  • else
    • import the function from the module

[kcmr]

Forget it. Just tried and checked that Babel takes care of that.