microsoft / microsoft/vscode-css-languageservice
Show color box even for modern CSS RGB, HSL, OKLCH values
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 384
- Forks
- 217
- Avg merge
- 3d 16h
- Merged PRs (30d)
- 14
Description
Example:
--color-deep-navy: #0b1f50;
--color-deep-navy-rgb: 11 31 80;
Shows as:
As using modern, space separate CSS RGB values becomes more and more used due to ability to use transparency with rgb() as e.g. background: rgb(255 255 255 / 80%), it would be nice to be able to define variables as:
--color-deep-navy-rgb: 11 31 80;
--color-deep-navy-rgb-80: 11 31 80 / 80%;
etc. to show a color wheel as well. oklch should also be supported as that is most likely the defacto standard going forward.
Other issues around modern CSS coloring:
https://github.com/microsoft/vscode-css-languageservice/issues/413
https://github.com/microsoft/vscode-css-languageservice/issues/314
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the CSS color parsing and color-box entry points in the language service; the payload does not name specific files or tests. Compare handling of space-separated RGB, HSL, and OKLCH values with the related css-languageservice issues, then verify that supported custom-property values render a color box, including alpha syntax.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100