babel-plugin-styled-components
babel-plugin-styled-components copied to clipboard
Bug with custom default import name + component selector
import React from 'react';
import { create as render } from 'react-test-renderer';
import styledSc, { ThemeProvider } from 'styled-components';
const Ancestor = styledSc.div`
color: red;
`;
const Child = styledSc.div`
background-color: ${p => p.theme.backgroundColor};
font-size: ${p => p.fontSize}px;
`;
const Parent = styledSc.div`
border: 1px solid ${p => p.theme.borderColor};
color: ${p => p.color};
${Child} {
font-family: monospace;
}
`;
const theme = {
backgroundColor: 'cornflowerblue',
borderColor: 'antiquewhite',
};
const themeVariant = {
backgroundColor: 'mistyrose',
borderColor: 'gainsboro',
};
const getVariant = useVariant => (
<ThemeProvider theme={useVariant ? themeVariant : theme}>
<Ancestor>
<Parent color={useVariant ? 'red' : 'black'}>
<Child fontSize={useVariant ? 10 : 12} />
</Parent>
</Ancestor>
</ThemeProvider>
);
const instance = render(getVariant());
Results in the error "TypeError: Cannot call a class as a function"
.
Changing styledSc
to styled
makes the error go away.
A dang, I had that fixed for a while but it seems like that code went missing somewhere!