Collision of nested css variables when using v-bind in css

[hellishcz]

Hi,
I am building a component library in Vue 3, and I am utilizing v-bind in CSS. I have an issue when I nest the same component.

Example: I have a component, Stack. It is a layout component whose only purpose is to set a distance between the “stack” of elements. The simplified version would look like this:

<template>
    <div class="stack">
        <slot />
    </div>
</template>

<script setup>
const props = defineProps({"space"})
</script>

<style lang="css" scoped>
.stack>:deep(*) {
    margin-bottom: v-bind(props.space);
}
</style>

The problem is, that when nested, all components have the same ID and therefore the CSS variable is being overwritten:

<div class="stack" data-v-1e6edf1f="" style="--0e1a8256:48px;" data-v-bd1d8502="">
  <div class="stack" data-v-1e6edf1f="" style="--0e1a8256:20px;" data-v-bd1d8502="">
  </div>
</div>

As you can see above, both nested divs are using the same CSS variable name --0e1a8256 so it is overwritten. Is there a way how to prevent this from happening? Can I somehow force Vue to use a different ID for every new component instance? Or is there a better way?

Thank you for any advice

[seahindeniz]

According to docs, you are using an incorrect syntax. You have to wrap JS expression in quotes

margin-bottom: v-bind('props.space');

[hellishcz]

Yes, you are right. I simplified the component to make the example short, and made few typos by doing that.

However, even with your fix, that does not solve the problem of css variables being overwritten.

[seahindeniz]

From what I can tell, you are using the same component recursively. That is an expected behavior because according to the HTML output, they don't have anything that makes it different from another. However, when you pass the variable "space" with a valid size value, it should add a style attribute with the property value to pass it into the CSS property that is beign used and nested override should not happen,

Here https://stackblitz.com/edit/vitejs-vite-eemlts?file=src/App.vue

Output HTML

<div data-v-2069ff04="" class="stack" style="--2069ff04-props\.space: 10px">
  <div data-v-2069ff04="" class="stack" style="--2069ff04-props\.space: 20px">
    <div
      data-v-2069ff04=""
      class="stack"
      style="--2069ff04-props\.space: 30px"
    >
      <div
        data-v-2069ff04=""
        class="stack"
        style="--2069ff04-props\.space: 40px"
      >
        <div
          data-v-2069ff04=""
          class="stack"
          style="--2069ff04-props\.space: 50px"
        ></div>
      </div>
    </div>
  </div>
</div>

[hellishcz]

Yes, this is the same html output as in my example. The css variables are created correctly, with different values. However, with the same name. And because they share the same name, if you use it in style, e.g. in this case for margin-bottom, it does not render properly, because the css variable value overwrites itself.

One solution would be to force Vue to use different ID for every component instance. But I don't know how to do that in Vue 3.

[hellishcz]

See this example: https://stackblitz.com/edit/vitejs-vite-d2ffto?file=src%2FApp.vue,src%2FStack.vue

The goal is to have two stacks with 100px space between them. Each stack item contains another stack that should have items 10px apart. But the result is that everything is just 10px apart.

[matthew-dean]

It shouldn't matter that they have the same generated name. In fact, you want them to. The CSS for the component should be static i.e. with the same generated variable names. In contrast, the values should be dynamic, which is what the style injection does.

If it's not doing what you want, it's not because of the v-bind behavior.

[hellishcz]

You are saying that this is intended and correct behavior. If so, is there a way how to create such Stack component in Vue? I did not find any :( And layout components, like the Stack one, are core part of any design system. It would be pitty if Vue would not provide any way how to create them.

[hellishcz]

Just to clarify - Stack component is simple layout component that adds spacing between its children components. And they can be nested with different spacing.

E.g.: https://seek-oss.github.io/braid-design-system/components/Stack

[matthew-dean]

No, I’ve made Stack components a few times, and recently in Vue 3. The easiest is to combine flexbox with a column flex direction and use the gap property.

[hellishcz]

Good tip, that would work. Thanks.

Just wondering if using flexbox so heavily (almost on all page elements) won't affect the page performance negatively?