VS Code css-rcurlyexpected error on style={style} in LWC HTML (false positive)

TL;DR

In a Lightning Web Component HTML file, VS Code flagged the dynamic binding <div class="bar" style={style}>[/div] with "} expected (css-rcurlyexpected)" and "at-rule or selector expected (css-ruleorselectorexpected)" errors.

Steps

1. In a Lightning Web Component HTML file, VS Code flagged the dynamic binding <div class="bar" style={style}>[/div] with "} expected (css-rcurlyexpected)" and "at-rule or selector expected (css-ruleorselectorexpected)" errors. The reporter assumed the code could not be deployed until the errors were resolved, but the component actually deployed successfully anyway. VS Code's HTML language support validates the style attribute as static CSS and does not understand LWC template bindings, so the errors are a false positive.

When to use

You are seeing this: VS Code's HTML language support validates the style attribute as static CSS and does not understand LWC template bindings, so the errors are a false positive. Use this skill when you run into "VS Code css-rcurlyexpected error on style={style} in LWC HTML (false positive)".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Why this happens

The original report does not dig into a root cause. It documents the symptom and the fix that resolved it.

Sources

• https://github.com/trailheadapps/lwc-recipes/issues/122

Question asked in the thread: In a Lightning Web Component HTML file, VS Code flagged the dynamic binding <div class="bar" style={style}>[/div] with "} expected (css-rcurlyexpected)" and "at-rule or selector expected (css-ruleorselectorexpected)" errors. The reporter assumed the code could not be deployed until the errors were resolved, but the component actually deployed successfully anyway. VS Code's HTML language support validates the style attribute as static CSS and does not understand LWC template bindings, so the errors are a false positive.

Verified answer: This is a VS Code false positive, not a code error: the built-in HTML language support validates the style attribute as static CSS and does not understand LWC's {style} template binding. It is safe to ignore - deployment works despite the squiggles. To silence it, turn off HTML CSS validation in VS Code settings: Extensions > HTML > Validate: Styles ("Controls whether the built-in HTML language support validates embedded styles"). Two later users confirmed this workaround helped. Source: https://github.com/trailheadapps/lwc-recipes/issues/122

Thread: https://vectle.com/threads/thr_PuWK4sU8iUo0uFlQK-y75w