styled-components / vscode-styled-components

Syntax highlighting for styled-components
MIT License
917 stars 117 forks source link

Wrapping styled components causes styling issues #405

Open garthtee opened 1 year ago

garthtee commented 1 year ago

Describe the bug (including copyable syntax) Wrapping styled components is causing style issues. If I remove the theme wrapper the stling returns to the expected

Expected styles (see the CustomerNameWidth const is blue)

image

Screenshot
Unexpected styles (see the CustomerNameWidth const is yellow)

image

To Reproduce

const theme = (Component) => {
  const ThemedComponent = (props) => <Component {...props} theme="dark" />;

  return ThemedComponent;
};

const getTableHeaderColor = ({theme}: any): string => theme === "dark" ? "gray" : "white";

const TableHeader = theme(styled.div`
  width: 100%;
  background-color: ${getTableHeaderColor};
  display: flex;
  padding: 10px 50px;
  margin-bottom: 10px;
`);

const CustomerNameWidth = styled.div`
  flex-basis: 90%;
`;

Build environment (please complete the following information):

Extensions
styled-components.vscode-styled-components

Additional context
Add any other context about the problem here.