Dynamic styling of CSS using Style Tag Visual studio Code css-identifierexpected warning

[vhochsteinTef]

Hi,

I ve got the following code in one of my custom component html templates:

<style data-sly-test="${formInput.getGrowFactor}">
        #${formInput.name @ context="styleString"}Id${formInput.uniqueId @ context="styleString"}Wrapper {
          flex-grow: ${formInput.getGrowFactor @ context="styleString"};
        }
    </style>

the code itself is working, but my IDE Visual Studio Code is generating the following errors:
css-identifierexpected
css-propertyvalueexpected

Looks like htl  ${} syntax is not compliant with some other validation tool.

Anybody knows how I may get rid of these errors ?

Thanks a lot for your support in advance.

--

volker
 

[arunpatidar]

Hi @vhochsteinTef 

You can create the whole CSS rule as string in Sling Model and return it to HTL to make whole logic simplified

Sling Model

return String.format(
                "#%sId%sWrapper { flex-grow: %s; }",
                name,
                uniqueId,
                growFactor
            );

HTL

<style data-sly-test="${formInput.generatedStyle}">
    ${formInput.generatedStyle @ context='styleString'}
</style>

[vhochsteinTef]

Hi Arun,

thanks a lot for your suggestion.

Your version generates the following errors:

Unfortuently, it s not solving the issue.

--

volker

[kautuk_sahni]

@vhochsteinTef Did you find the suggestions helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!

[vhochsteinTef]

Hi,

nothing helped so far...

[AmitVishwakarma]

Hi @vhochsteinTef ,

The issue arises because HTL expressions (${}) inside the <style> tag are not recognized as valid CSS by Visual Studio Code’s CSS validation engine.

Even though your code works fine in AEM, VS Code is treating it as invalid because the ${} syntax is not standard in CSS.

Solution 1: Disable CSS Validation in VS Code

Since this is a false positive, you can disable CSS validation for your workspace:

Open VS Code Settings (Cmd + , on Mac or Ctrl + , on Windows).
Search for css validate.
Find CSS › Validate: Enable and uncheck the box (or set to false in settings.json):

"css.validate": false

Restart VS Code.
This will prevent VS Code from marking your HTL syntax as an error.

Solution 2: Use a data-sly-use Helper for CSS
Instead of embedding dynamic values directly inside <style>, generate the full CSS rule in Sling Model and return it to HTL.

Sling Model (Java)

public String getGeneratedStyle() {
    return String.format(
        "#%sId%sWrapper { flex-grow: %s; }",
        name,
        uniqueId,
        growFactor
    );
}
​

HTL (HTML)

<style data-sly-test="${formInput.generatedStyle}">
    ${formInput.generatedStyle @ context='styleString'}
</style>

Why?
Keeps logic cleaner
Avoids inline HTL inside CSS
Reduces VS Code warnings

Solution 3: Wrap HTL Inside a data-sly-element

If you must keep inline CSS, wrap it inside a data-sly-element="style" to prevent VS Code from treating it as a CSS block.

HTL Code

<style data-sly-element="style" data-sly-test="${formInput.getGrowFactor}">
    #${formInput.name @ context="styleString"}Id${formInput.uniqueId @ context="styleString"}Wrapper {
        flex-grow: ${formInput.getGrowFactor @ context="styleString"};
    }
</style>
​

This prevents VS Code from misinterpreting it as invalid CSS.

Regards,
Amit