search

corneliusio / svelte-sublime

💡Sublime Text syntax highlighting for Svelte components
MIT License
59 stars 6 forks source link

Rendering issue with custom components #38

Open ildella opened 1 month ago

ildella commented 1 month ago

My custom component has a custom attribute "style" where I pass the classes for the underlying actual html

corneliusio commented 1 month ago

@ildella Will dig into this asap. May simply come down to not having CSS source in style attributes, but hopefully I can get a working extension of the base CSS syntax highlighting that works with Svelte's brackets.

That said, technically style is a native html attribute that is being "misused" in this example. Though frankly it's somewhat moot since there are still cases where you'd want to interpolate component variables into an inline style. That said, you can work around the highlighting by doing something like this:

style={`flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-200 ${chatActionsHidden}`}

At the very least it would get ride of the error highlighting.

deathaxe commented 5 days ago

Supporting plain curly interpolation {...} in CSS might be cumbersome as you can't really distinguish them from normal rule block punctuation. So it is barely possible to distinguish them or decide, whether curlies are part of a selector, property-name or value.

Do components support inline styles? If not, that attribute could be excluded or just use tag-generic-attributes for them.