The title is rewritten as: CSS variables for adding inline styles in Vue

Question

I use css variables in the component and set the width of the div based on the data calculated in setup()

setup(props) {
    const progressBar = PositionService.getProgressBar(props.position);
    const progressWidth = `${progressBar}%`;

    ...
    return { ..., progressWidth };
}

Then I use this variable as a css variable.

<style lang="scss" scoped>
.progress-bar-width {
  --progress-bar-width: v-bind("progressWidth");
  width: var(--progress-bar-width);
}
</style>

When rendering the page, I noticed that inline styles were added to the html parent component, causing

<a href="#/1070/applications/status/1" class="card position-relative border-gray-300 border-hover overflow-hidden h-500px" data-v-61475b35="" style="--61475b35-progressWidth:43.0613%;">.....</a>

CSP blocks inline styles, so this method will not work. How to use css variables without inline styles?

Answer 1

This is a hacky solution, but since there are no inline styles this is the only one I can think of:

Add the "style" component to your template. This will be replaced by the tag in the DOM. Inside the component add the required CSS variables to :root

<component :is="`style`">
    :root { --progress-bar-width: {{ progressWidth }}; }
</component>
<div class="progress-bar-width"></div>

<style lang="scss" scoped>
.progress-bar-width {
  width: var(--progress-bar-width);
}
</style>