FR: Reactive CSS variables

[richardtallent]

What problem does this feature solve?

Often, it's desirable for a component to expose properties the caller can use to customize the style. But if these take arbitrary values rather than just, say, class names, the child component then must use style attributes to apply the values. Unfortunately, this litters the <template> markup with style information. Also, the style attribute cannot be used to assign CSS properties to pseudo-elements like :hover and :before, which significantly limits the properties a component can expose to the caller for custom styling.

The only workaround is for the parent's CSS to override the child's CSS, but that requires the parent's CSS to be coupled to the child's implementing markup. The same value (or variants based on it, such as lighter or darker shades of a color) may be used in a number of selectors, complicating this effort, and if the component uses scoped CSS or highly-specific selectors, it may be even more difficult to override.

CSS variables are now fully supported by every common browser other than IE11. So, I'm proposing that Vue support mustache syntax in the <style> block of SFCs where CSS variables are declared, and that Vue set and react to changes to these values by using the DOM's style.setProperty method.

This will allow component authors to provide props for more styling decisions, in a way that is still as reactive as using the style attribute, but with more capabilities (for pseudo-elements) and a tidier template. Internally, components can also use this to make styling decisions, including for pseudo-elements, based on computed values, all fully reactive.

Here's an example of a component that does support CSS variables as properties, but has to wire it up manually with a watcher:

https://github.com/richardtallent/vue-stars/blob/master/src/VueStars.vue

It may be possible to support IE <= 11 by replacing variables in the style with values and replacing the generated style tag as needed.

What does the proposed API look like?

The API would simply be that the <style> block accepts mustache syntax in the declaration of CSS variables, and that behind the scenes, it reacts to changes by using the style.setProperty() method to update the CSS variable's value.

From the component author's perspective:

<template>
  <h1>{{ title }}</h1>
</template>
<script>
export default {
  name: "ColorHeader",
  props: {
    bg: { type: String, default: "inherit", required: false },
    bgHover: { type: String, default: "inherit", required: false },
    title: { type: String, default: "(Untitled)", required: false },
  }
}
</script>
<style>
:root {
   --bg-color: {{ bg }};
   --bg-hover-color: {{ bgHover }};
}
  h1 { background-color: var(--bg-color); }
  h1:hover { background-color: var(--bg-hover-color); }  
</style>

One down side I see is that this would require Vue's compiler to parse the CSS so it recognizes the variable name before the mustache, which could be a problem when using CSS that needs a pre-processor. So here's an alternative implementation:

• Vue supports mustache syntax anywhere within the style block, but it is understood that it should only be used for CSS values, not the names of properties or selectors.
• Vue makes no attempt to parse the CSS other than to find the mustaches.
• For each discrete mustache expression, Vue replaces the mustache syntax with a CSS variable declaration at the top (auto-named) and var(--auto-named-variable) where the mustache syntax appeared.
• Vue then just needs to update the value for the names it created reactively.
• This would be compatible with any CSS variant that allows CSS variable syntax (and that doesn't replace it or the mustache syntax with something else).

If mustache syntax causes too much of a headache with linters, IDEs, etc. (since curly braces are important to CSS), a third alternative would be for the component author to use the CSS variable syntax, and require that if you want Vue to reactively set and update that variable, you simply use the kebab-case version of one of your data, prop, or computed attributes (i.e., no complex expressions or direct use of methods). Example:

<template>
  <h1>{{ title }}</h1>
</template>
<script>
export default {
  name: "ColorHeader",
  props: {
    bgColor: { type: String, default: "inherit", required: false },
    bgHover: { type: String, default: "inherit", required: false },
    title: { type: String, default: "(Untitled)", required: false },
  }
}
</script>
<style>
  h1 { background-color: var(--bg-color); }
  h1:hover { background-color: var(--bg-hover); }  
</style>

To prevent collisions between real legacy variables and same-named component features, this could be opt-in with an attribute on the style element (like "scoped" operates).

[Justineo]

In fact Vue supported interpolation inside <style> tags back to v0.x & v1.x (see this fiddle). This issue seems to be quite similar to #4879. Like @yyx990803 mentioned in #4879 (comment), it's inefficient when style needs to be recalculated on each updated back then.

But as CSS custom properties are becoming more widely supported, we can just inject custom property declarations into the scope of component root elements rather than interpolate the whole style tag content thus style recalculation can be optimized inside rendering engines. If we are gonna limit reactivity to only affect custom properties, we only need a way to map custom property names to our reactive data, not necessarily writing custom property declarations directly inside <style> tags.

[HerringtonDarkholme]

Thank @richardtallent for a detailed proposal!

I would argue that we should limit reactivity within custom properties, and thus it would be totally doable in userland. Actually this example can be extracted as a standalone Vue plugin 😄

[richardtallent]

I tested and realized last night that Vue's existing :style attributes can be used to set custom CSS properties reactively, and those properties are used for child and pseudo-element selectors as one would expect:

https://codepen.io/richardtallent/pen/yvpERW/

I thought about auto-wiring CSS variables in the style block during compilation if the match a hyphenated/prefixed prop/data/computed element, but that feels a bit too convention-based, and could cause issues if the variable is intended to be defined or modified only for a child of the component's root tag (since the Vue compiler would just be doing a naive regex search for --prop-names).

So, since there's a reasonable solution already, I'll go ahead and close this issue... thanks everyone for making Vue awesome!

ie11 not working ㅜㅜ

[Naasi]

Same as @danbeeai.

Someone found any solution on ie11?

[meduzen]

@danbeeai @Naasi IE11 doesn’t support CSS Custom Properties.

[fabd]

On a tangent (it's really hard to find relevant thread on Google):

It seems not possible to set custom properties using camelCase or PascalCase via style or :style in a Vue component. They somehow get transformed to kebab-case.

  <card style="--Card-padding: 20px" />...</card>

With postcss-bem-linter + suitCss convention, the card's css would look like this to pass linting:

<style>
/* @define Card */
.Card {
  padding: var(--Card-padding, 10px);
}
</style>

After running in the browser, the custom property's case has been changed to kebab-case (and hence the var() statement in the styles doesn't work as expected):

   <div class="Card ..." style="--card-padding:20px;">...

Put simply --camelCaseProp: 20px is transformed to --camel-case-prop:20px. Does it make sense to change the case of custom properties though?

The w3c specs specifically mentions --FOO and --foo are not the same variables for example.

Is this a bug? Is this intended? Can this behaviour of the Vue compiler be configured?

[sirlancelot]

@fabd That could possibly be a bug with the way Vue handles css properties. Please create a bug report.

[ReubenRahul]

here is the solution how you can assign the dynamic css value for the pseudo-elements.

<div class ="... divider"> <span> and </span></div>

<script>
export default {
 name: "component-name",
  props: {
    cutomBorderColor:{},
   },

data() {
   return {
     cutomBorderColor : '#c73e3e' , // can make it dynamic
  }
},

mounted () {
   this.assignPseduElementStyle();
},

methods : {
   assignPseduElementStyle () {
// this will not work in IE
      document.documentElement.style.setProperty('--border-color-var ', this.cutomBorderColor)
     }
  },//end of methods
}
</script>


<style>
.divider > span:before, .divider > span:after {
    border:1px solid var(--border-color-var) !important;
  }
</style>```