Highlight support

[eugeneross]

Hey there!

So, I really think I can get some good use out of your library. However, highlighting is unfortunately not supported for your methods (at least in VScode).

Any idea on how to support proper syntax highlighting? I really enjoy having the ability to do:

${is('outline')`
    background: transparent;
    color: ${colors.primary};
    box-shadow: inset 0px 0px 0px 1px;
  `}

instead of:

${props => props.outline && css`
    background: transparent;
    color: ${colors.primary};
    box-shadow: inset 0px 0px 0px 1px;
  `}

[SaraVieira]

Hey!

I get that too, I can try to fork the vscode plugin for styled components and see where that leads me

[eugeneross]

@SaraVieira Awesome 😃

[VdeVentura]

Hey @SaraVieira ! did u manage to make any progress on supporting highlighting for this?

[SaraVieira]

I'mma be honest I completly forgot about this but I will now take a look at the vscode plugin for styled components

[SaraVieira]

The main idea would be to pick up this: https://github.com/styled-components/vscode-styled-components and extend it

[luke-john]

As an alternative you could use typescript-styled-plugin,

by adding to a tsconfig.json with the following contents

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-styled-plugin",
        "tags": ["styled", "css", "sty", "is", "isNot", "isOr", "isSomeNot" ]
      }
    ]
  }
}

This doesn't require the rest of your project to be typescript, and works for javascript files.

[eugeneross]

@luke-john I've added what you suggested in a jsconfig.json file but I still can't seem to see any highlighting when referencing is like so:

 ${is('red')`
    background: red;
  `}