Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
au5ton opened this issue Sep 5, 2023 · 1 comment · May be fixed by #320
Open

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

au5ton opened this issue Sep 5, 2023 · 1 comment · May be fixed by #320

Comments

@au5ton
Copy link

au5ton commented Sep 5, 2023

Related to #30

Currently, the only colors that can be matched and that can use the color picker are hex based:

lit-analyzer/packages/vscode-lit-plugin/src/color-provider.ts

Line 117 in 9659154

const colorMatches = getRegexMatches(COLOR_HEX_REGEX, taggedTemplateText);

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
Copy link
Author

au5ton commented Sep 5, 2023

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

au5ton added a commit to au5ton/lit-analyzer that referenced this issue Sep 5, 2023
@au5ton
Fixes runem#319
d79905c
@au5ton au5ton linked a pull request Sep 5, 2023 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Adds support for color picker in css`` blocks au5ton/lit-analyzer
1 participant
@au5ton