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.

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

Completion kind Color for color keywords and hex 4 / hex 8 #346

Merged
merged 6 commits into from
May 26, 2023

Conversation

romainmenke
Copy link
Contributor

This builds upon and is directly related to : #315

My initial intention was to verify those changes but I quickly ran into issues.

Having a match for rgb in completionItem.documentation doesn't actually mean that the value is a color. This becomes more apparent when considering new color functions like lab which can easily be part of a larger word or can be used in a sentence.

A documentation string can also contain multiple values :

--border: 1px solid rgb(255 0 0);

Screenshot 2023-04-30 at 13 11 02

I started writing regexp's to match actual color functions, but this exploded in complexity and would only cover the most simplistic of cases. I don't think it is ideal to have parser functions and regexp matchers for all the color functions.


However I do think it is valuable to add support for color keywords transparent and currentColor and to extend hex support to hex 4 and hex 8.

I also moved some regexp constructors outside of functions.

@@ -168,11 +172,15 @@ export const colors: { [name: string]: string } = {
yellowgreen: '#9acd32'
};

const colorsRegExp = new RegExp(`^(${Object.keys(colors).join('|')})$`, "i");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a huge regex. We can just do a lookup in the colors object instead

Copy link
Contributor Author

@romainmenke romainmenke May 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be checked ascii case insensitive.
https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-invalid-named-color.html#L32

// Not a real upper case `K`
'blacK' === 'black'
// false
'blacK'.toLowerCase() === 'black'
// true -> incorrect
/black/i.test('blacK')
// false

vs.

// Real upper case `K`
'blacK' === 'black'
// false
'blacK'.toLowerCase() === 'black'
// true
/black/i.test('blacK')
// true

But maybe it's fine to be a little bit less strict here?

Copy link
Contributor

@aeschli aeschli May 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, I didn't know that toLowerCase does that. We use it over the place to do case insensitive comparisons.
I suggest to ignore that for now.

@aeschli aeschli merged commit 5c90cfe into microsoft:main May 26, 2023
@romainmenke romainmenke deleted the color-completion-non-hex branch May 26, 2023 16:56
@aeschli
Copy link
Contributor

aeschli commented May 26, 2023

Does this make #315 obsolte?

@romainmenke
Copy link
Contributor Author

I think so.

imho the remaining functionality from that PR is not possible with the current available API's'. It requires a way to assign a color attribute through a different field than completionItem.documentation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants