only work if es6-string-html is also installed?

[daKmoR]

it definitely should work - if not - it's a bug... you have an example?

that get's highlighted fine for me

const foo = css`
    div {
      padding: ${size};
      margin: 10px;
    }
  `;
  const bar = html`
    <div>
      <p>hey there ${name}</p>
    </div>
  `;

Lars:
not for me, perhaps it's because I have both plugins installed?
I'll try it out
Ah, very interesting
If I install only es6-string-css then any CSS within one CSS block following a variable is not highlighted properly, so in your example margin: 10px would not get highlighted
Also, if the last css block in the template literal has a variable inside, then any highlighting of the regular JS (or html) code that comes after is broken
however, when I also install es6-string-html everything works fine

[LarsDenBakker]

Thanks. I couldnt find the issue button on this repo...

[bashmish]

For now I would recommend to install VS Code plugin for styled-components. Looks like they support css literals. And not only highlighting, but full IntelliSense for CSS.

The only difference is that they also support declaration blocks, which makes it harder to see that you are doing wrong things with the lit-css. So I'm currently thinking about forking it instead and building new one with their features and extra constraints on top of it for us. So es6-string-css will likely be deprecated soon.

If you want to continue using this plugin, please feel free to investigate and provide a MR with fixes.

[LarsDenBakker]

Ill check it out, thanks!