Debug class names do not work when styled function is reexported with macros

When importing styled and using it in the same file, debug class names work as expected.

// main.js
import styled from "styled-components/macro";
const Text = styled.div({ color: "red" });

---

When reexporting the styled function in another file, debug class names disappear

// css.js
import styled from "styled-components/macro";
export { styled }

// main.js
import { styled } from "./css.js";
const Text = styled.div({ color: "red" });

Perhaps this is limitation of the babel macros? If so maybe we should add limitations chapter in the docs (https://www.styled-components.com/docs/tooling#babel-macro).

---

Versions:

"styled-components": "4.1.3"
"react-scripts": "2.1.3"

[atdrago]

I ran into this issue because I was trying to import styled, provide it a theme interface, then reexport it as described here, but using the babel macro instead of the root package.

If this is your use case, I think I found a solution. Instead of having the extra styled-components.ts file mentioned in the docs, you can redeclare the "styled-components/macro" module using your Theme interface, then import styled from 'styled-components/macro' directly. This solves the file-only problem.

Here’s what I have in my global.d.ts (ITheme is my theme interface located in a different file):

declare module 'styled-components/macro' {
    import { ThemedStyledComponentsModule } from 'styled-components';
    import { ITheme } from 'typings';

    const ModuleInterface: ThemedStyledComponentsModule<ITheme>;

    export const createGlobalStyle: typeof ModuleInterface.createGlobalStyle;
    export const css: typeof ModuleInterface.css;
    export const keyframes: typeof ModuleInterface.keyframes;
    export const isStyledComponent: typeof ModuleInterface.isStyledComponent;
    export const ServerStyleSheet: typeof ModuleInterface.ServerStyleSheet;
    export const StyleSheetManager: typeof ModuleInterface.StyleSheetManager;
    export const ThemeConsumer: typeof ModuleInterface.ThemeConsumer;
    export const ThemeContext: typeof ModuleInterface.ThemeContext;
    export const ThemeProvider: typeof ModuleInterface.ThemeProvider;
    export const withTheme: typeof ModuleInterface.withTheme;
    export default ModuleInterface.default;
}

Then, make this change everywhere you imported styled previously:

- import styled from './styled-components.ts';
+ import styled from 'styled-components/macro';

I don’t know if the above could be achieved more elegantly, but would love feedback!

[chriserickson]

I spoke a little too soon – with the above solution, my props.theme value in any styled component is an any rather than ITheme.