vscode-styled-components icon indicating copy to clipboard operation
vscode-styled-components copied to clipboard

Published 20 hours ago • verified publisher icon styled-components

Highlight conflict with PostCSS Extension

Open Evaldo-JR opened this issue 3 years ago • 1 comments

I'm having problems using 2 extensions together: PostCSS and Styled-Components. If both are enabled, highlighted colors give priority to PostCSS even if I write with Styled-Components syntax.

Is there any way I can configure the VSCode not to make this switch? Or some way for him to understand when I'm writing styles with Styled-Components in ".ts" files and PostCSS in ".css", ".sass" files?

Both enabled: image

Only Styled-components enabled: image

Build environment (please complete the following information):

  • OS: Windows 10
  • VSCode Version: 1.69.1
  • Styled-components: 1.71.1
  • PostCSS: 1.0.9

Additional context image

Evaldo-JR avatar Jul 14 '22 22:07 Evaldo-JR

Or some way for him to understand when I'm writing styles with Styled-Components in ".ts" files and PostCSS in ".css", ".sass" files?

You should really be using .tsx for any files which have styled component syntax in, this may help you with your conflict. This is mentioned on the readme

.ts is telling VSCode this is a typescript file, .tsx is telling VSCode “this file may have some jsx/tsx syntax in it”

apart from that I can’t really help with PostCSS overriding things, that would be for them to change.

jasonwilliams avatar Jul 15 '22 08:07 jasonwilliams