vscode-styled-components

vscode-styled-components copied to clipboard

This is an extremely obscure edge case, as I'm sure hardly anybody has had a need to do this. But I'm in the middle of writing a library and have a line which looks like this

const Bounds = styled(Stylable("div"))`
  box-sizing: border-box;
  display: flex;
`;

and the highlighting does not work. If I remove the ("div") it works.

I'm a bit busy atm (otherwise I'd fix it now), but tomorrow or sometime later this week I'll try and fix this issue. Just wanted to open an issue so that there's a documented record of it.

Don't know if it's related, but also it does not work when specifying the props type (Typescript)

const Button = styled.a<{ first?: boolean }>`
  padding: 15px 50px;
  margin-right: ${p => p.first ? '50px' : '0'};
`;

Although, it works correctly when defining them inline for the function parameter:

interface IButtonProps {
  first?: boolean;
}

const Button = styled.a`
  padding: 15px 50px;
  margin-right: ${(p: IButtonProps) => p.first ? '50px' : '0'};
`;

@patrikmolsson you should open a separate issue for that, unfortunately not related to this one.

I see this issue when using a library like Poser with styled-components.

This code will not be seen as a styled component:

const AnimatedComponent = styled(posed.div({
  open: {},
  closed: {}
}))`
  width: 300px;
  ...
`

But the inverse does work:

const AnimatedComponent= posed(styled.div`
  width: 300px;
  ...
`)({
  open: {...},
  closed: {...}
});

I confirm the same thing here, example :

Do you this can be fixed ? Would be amazing :) thanks

@garetmckinley @radlantern Do you know how to activate emmet tab completion in VSCODE when you use CSS in the result of the function please ?

I confirm the same thing here, example :

Do you this can be fixed ? Would be amazing :) thanks

I can reproduce this as well