Level 2

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

Forum|Forum|10 months ago
March 27, 2025
2 replies
645 views

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

Community Advisor

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>

Arun Patidar

V

vhochsteinTefAuthor

Level 2

Hi Arun,

thanks a lot for your suggestion.

Your version generates the following errors:

Unfortuently, it s not solving the issue. 😞

--

volker

kautuk_sahni

Community Manager

@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!

Kautuk Sahni

AmitVishwakarma

Community Advisor

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded