runem / lit-analyzer

Monorepository for tools that analyze lit-html templates
MIT License
314 stars 35 forks source link

[vscode-lit-plugin] Non-hex color formats aren't recognized for color picker #319

Open au5ton opened 10 months ago

au5ton commented 10 months ago

Related to #30

Currently, the only colors that can be matched and that can use the color picker are hex based: https://github.com/runem/lit-analyzer/blob/9659154904fd2010de3749fc5e904e8c3dfe684b/packages/vscode-lit-plugin/src/color-provider.ts#L117

With an HTML file: image

With a TS file: image

Reproduce:

import { LitElement, css, html } from 'lit'
import { customElement } from 'lit/decorators.js'

@customElement('foo-element')
export class FooElement extends LitElement {
  render() {
    return html`<p>hello</p>`;
  }

  static styles = css`
    .foo {
      background: white;
      background-color: rgb(234, 238, 242);
      color: hsl(120deg, 75%, 25%);
      color: hsla(120deg, 75%, 25%, 0.5);
      color: #fff;
    }
  `
}
au5ton commented 10 months ago

I don't know if this is related or not, but this seems to be how VSCode does it:

https://github.com/microsoft/vscode/blob/7ead2078eb2a097119e66bd8272155bcc1580667/src/vs/editor/common/languages/defaultDocumentColorsComputer.ts#L101-L138