style attribute syntax error with curly braces about svelte-intellij HOT 13 CLOSED

I was able to suppress this error cheaply with HighlightErrorFilter

Keep in mind there are more complicated cases than one word interpolation and they are still broken

from svelte-intellij.

<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">

This line from the official SvelteKit demo project results in a mis-parse, I'm assuming this is one of the more complex cases you were talking about. Is there any workaround for this currently?

from svelte-intellij.

Fixed in WEB-59773 Svelte: "mismatched parameters" error when using variables as function arguments in inline style

from svelte-intellij.

Oh my... this is actually parser error, not an inspection, which is even harder to fix.

This would require overriding at least CSS parsing only for inline styles

com.intellij.psi.css.impl.parsing.CssParser2#createTermExpectedErrorElement

from svelte-intellij.

Maybe Vue plugin will save us as always, I will try to find what they do with :style attributes

from svelte-intellij.

This is more complicated than that. As far as I know you can't interpolate string attributes in Vue. Attribute value is either JS expression or string, which is then handled specially by IntelliJ for style and event handler attributes.

In Svelte case you can do basically whatever you want, and CSS parser sees only opacity: . Try to write that inside normal CSS file and you'll get the same error.

from svelte-intellij.

I see, so inline styles parsing should be enhanced allowing arbitrary JS expressions inside {}

from svelte-intellij.

hmm, I see two options here, correct me if I'm wrong please, this is all guesswork.

1. We disable css parsing of style attributes, treat it as a normal attribute.
2. We try to interpolate the variable and pass it to the css parser? If this is even possible.

from svelte-intellij.

@shirotech

1. It could work for now. We could even detect interpolations and disable CSS parsing only when they are present to avoid conflict. I like to write inline styles from time to time and CSS parsing is valuable.
2. More like @AleksandrSl has said, disable parsing of curlies inside style tag on HTML level and override CSS parsing so curlies are handled there.
3. There's a flag strict inside CSS parser. It's set to true by default, changing it hides those errors, but AST will be still wrong so CSS inspections etc. may fail

1 & 2 will require a lot of if statements :)

from svelte-intellij.

Cool, @tomblachut can you show me where can I disable the strict flag in the code? I can help test it out to see any problems. Thanks.

from svelte-intellij.

@shirotech The short answer is that I don't know :)

It works like this: IntelliJ has decoupled lexing and parsing. Lexing is more basic, converts characters into tokens like keyword or number. What's interesing, there's something called lazy parseable tokens, or chameleons. CSS inside HTML is lazy parseable.

You need to check how SvelteHtmlLexer decides which classes to use when encountering style attribute. It's somewhere in superclasses. It's important to only change inline styles, not the style tags. Good starting point is com.intellij.lexer.HtmlLexer#ourInlineStyleElementType. It's private static so unfortunately it can't be just overriden.

Then you'll probably need to create dedicated element type, you can check SvelteJSLazyElementType for inspiration, or look for something that has CSS in the name. I think default is com.intellij.psi.css.impl.CssElementTypes.CssDeclarationBlockElementType

In said element you can define which parser class is used to parse inline CSS. By default it's very roundabout. Token has Language bound in constructor. Language has associated ParserDefiniton.

com.intellij.lang.css.CSSParserDefinition#createParser returns com.intellij.psi.css.impl.parsing.CssParser2. It needs to be replaced in lazy element type with something that ignores errors (check com.intellij.psi.css.impl.parsing.CssParser2#createErrorElement)

I know this is monumental work if it's your first time with IntelliJ SDK. Good luck. I realised even more how complicated is that after writing this comment.

from svelte-intellij.

I was able to suppress this error cheaply with HighlightErrorFilter

Keep in mind there are more complicated cases than one word interpolation and they are still broken

How does one go about using that Filter?

from svelte-intellij.

How does one go about using that Filter?

it works automatically but covers only simplest cases

from svelte-intellij.