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

Add special "conservative" highlighting for style attribute values #1317

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

Monkatraz
Copy link
Contributor

Was part of my old PR. Quoting myself:

This adds a form of syntax highlighting inside of CSS style attributes as requested by #381. This also adds a slight "fix" to attribute value number strings, which allows them to be quoted (pictures below).

Syntax highlighting is done "conservatively", as in the actual source.css grammar is not included. Instead, I wrote an "adequate" grammar, which should look fairly similar to how CSS normally looks in themes and is plenty good enough for Svelte's purposes. The primary reason I did it this way was to avoid any 'break-out' bugs. This addition, therefore, should actually avoid those bugs - however, because we don't really have a good test suite yet, I haven't been able to test this thoroughly.

What is actually highlighted in the grammar is very minimal - selectors, media blocks, etc. are not handled because, afaik, they won't ever appear in a style string. Additionally, the highlighting won't actually "check" for valid expressions (forgetting a semi-colon) because it doesn't parse the CSS using begin-end blocks. It uses match pretty much exclusively except for functions and strings.

Due to the lack of a test suite, I'd recommend caution when merging this - I can't see how my additions can go too wrong, but I don't know for sure. Textmate grammar definitions are cursed.

One issue I do know of is that any themes that specifically handle source.css may highlight interpolated Svelte expressions slightly wrong - e.g. in my theme, CSS variables are red, so Svelte variables become red inside the interpolated expression. This is a tradeoff, as I'd have to make things either very messy or complex to fix this. This isn't too common in themes.

Some screenshots:

My theme
image

Dark+
image

Light+
image

This extends/requires #1315. That PR should be merged first, or this one merged and that one closed.

@dummdidumm
Copy link
Member

Thanks! I'm not 100% sure if I would want this as a user. That amount of different highlighting inline of an attribute could get confusing to me. I'll wait a little to give others the possibility to comment.

@blaumeise20
Copy link

I really like this feature, but it seems like you removed the orange quotes, right?

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.

3 participants