search

styled-components / vscode-styled-components

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

No intellisense on nested css blocks. #282

Open jesus-pacheco opened 3 years ago

jesus-pacheco commented 3 years ago

Describe the bug (including copyable syntax) When creating new blocks of CSS code based on props we don't get any intelissense or validation at all. i.e. 

const Header = styled.header`
   width: 100%;
   text-align: center;
   ${(props) => props.isHighlighted && `
      color: blue; // This CSS block won't provide any intelissense
      font-weight: 500;
  `}
`;

To Reproduce Create a regular styled component and add a whole CSS block based on a prop.

Expected behavior I will get intelissense and rule validation in the nested CSS block.

Build environment (please complete the following information):

jasonwilliams commented 3 years ago

Possibly related to https://github.com/microsoft/typescript-styled-plugin/issues/113

rkingon commented 3 years ago

+1

Screen Shot 2021-05-06 at 8 54 45 AM
ernestrudziec commented 3 years ago

Same problem here with breakpoint-styled-components:

image

jasonwilliams commented 2 years ago

Does anybody want to fix this? It should be a case of adjusting the regex https://github.com/styled-components/vscode-styled-components/blob/master/CONTRIBUTING.md

nmaillet commented 2 months ago

I believe this issue can be closed. As discussed in #21 this can be solved using css.

image