Weird issue with scoped styling and global CSS variables

[daanvanham]

Hi there,

I'm not sure wether it is me who did something stupid or if this is a bug, but here's my story;

I have a global stylesheet where color variables are set with CSS variables like so:

:root {
  --color-primary: red;
}

In my component I use this color to set a background for a button:

<template>
  <button>Hi there!</button>
</template>

<style lang="scss" scoped>
  button {
    background-color: var(--color-primary);
</style>

Now when I add a Story to my Histoire, I get this as the output for the css:

[data-v-8c28f772]:root{
  --color-primary: red;
}

button[data-v-8c28f772] {
  background-color: var(--color-primary);
}

Because of the data-attribute which is added before :root, I now don't have access to the CSS variable and my button doesn't have the right background color.

When I add another style block to my component which doesn't have scoped set, it does work, even if I add it with only a comment:

<template>
  <button>Hi there!</button>
</template>

<style lang="scss">
  // just a comment here
</style>

<style lang="scss" scoped>
  button {
    background-color: var(--color-primary);
  }
</style>

Now there's an extra <style> block in the iframe in Histoire where the :root variables are set without the data-attribute.

Am I missing something here or is this a bug?

[Akryum]

I have a global stylesheet where color variables are set with CSS variables like so:

How is this set/imported? Do you have a reproduction we can take a look at?

[daanvanham]

https://github.com/daanvanham/histoire-reproduce

Made a repo for reproduction of how we currently have it set up. If you run it locally with yarn story:dev you'll see that the WorkingButton story has a background color and the BrokenButton doesn't.

[daanvanham]

@Akryum Any update on this?

[Akryum]

You should not use sass additionalData for this as it will get included in the component style, thus inheriting the scoping. Use a normal import in the setupFile.

// setup file
import './global.scss'