CSS syntax highlighting for lit-element styles?

[chase-moskal]

✔️ i've found that the extension works great to bring syntax highlighting to my lit-html render blocks:

render() {
  return html`<div awesome>cool!</div>`
}

❓ however i was surprised that we don't have syntax highlighting for lit-element css styles

get styles() {
  return css`.system { display: flex; }`
}

is there a way i can get the syntax highlighting for lit-element styles?

👋 cheers

[chase-moskal]

i find it very interesting that github markdown has highlighted the above html code, but not the css code

[wolojo]

Maybe not the answer you were waiting for, but if you include your styles in HTML the syntax highlighting will work:

get styles() {
  return html`
     <style>
         .system { display: flex; }
     </style>

}`

[chase-moskal]

@wolojoli — hey that's a nice workaround :)

since the css tagged-template function comes with lit-html, i say it's in-scope for this extension

@mjbvz — let us know if you have any advice on how we might implement this css-highlighting feature

[nalply]

However lit-element says in https://lit-element.polymer-project.org/guide/styles#add-styles: "For optimal performance, define scoped styles in a static styles property."

[PeteX]

Another workaround if you are using Webpack is to put your styles in a separate file, then use raw-loader to bring them in as a string. This also has the advantage that you can use Sass or other preprocessors on the styles if you want.

webpack.config.js:

module: {
  rules: [
    {
      test: /\.css$/,
      loader: 'raw-loader'
    }, {
      test: /\.s[ac]ss$/,
      use: [
        'raw-loader',
        'sass-loader'
      ]
    }
  ]
}

whatever.ts:

import styles from './whatever.scss';

...

export class Whatever extends LitElement {
  static styles = unsafeCSS(styles);

  ...
}

[pepoospina]

VScode has https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin

[realh]

I'm using lit-plugin, which does include css support. However, it seems to make Code lag noticeably more than when using lit-html, and I can't turn off certain unwanted warnings, so it would be good if lit-html could support css.

[muleyprasad]

VScode has https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin

Thanks for posting this! Intellisense for css is working as well.

[rwalle]

This can be easily supported by adding a file in syntaxes/ folder and adding the info the package.json. Basically you take what is in lit-html-svg.json, tweak a few things for css and you have it. I would love to create a pull request, but given that the author does not seem to be actively reviewing and merging requests, not sure I should bother that.

Alternatively, one is able to patch the installed version of the extension (under ~/.vscode/extensions/bierner.lit-html-1.11.1) get this feature. I can write down some instructions