question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for CSS variables in `styles` property

See original GitHub issue

Issue Description

Expected behavior

When providing a CSS variable through the styles property. It is added to the style attribute of the tag.

h('div', {
  styles: {
    '--background-color': 'blue',
  }
}, [])

Should result in:

<div style="--background-color:blue;"></div>

Current behavior

CSS variables get ignored and are not rendered.

Demo

https://stackblitz.com/edit/maquette-starter-j1rjrw?file=main.ts

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
johan-gortercommented, Jan 10, 2021

Release 3.4.0 contains the fix.

1reaction
johan-gortercommented, Jan 8, 2021

@Dyljyn can you confirm that the patch I just committed fixes your issue and CSS variables in general? I will make a new release if it does.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using CSS custom properties (variables) - MDN Web Docs
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific ...
Read more >
CSS Variables (Custom Properties) | Can I use... Support ...
CSS Variables (Custom Properties). - CR. Permits the declaration and usage of cascading variables in stylesheets. Usage % of. all users, all tracked ......
Read more >
Browser Compatibility of CSS Variables (Custom Properties)
CSS Variables (Custom Properties) on Chrome is fully supported on 49-106, partially supported on None of the versions, and not supported on 4-48 ......
Read more >
A user's guide to CSS variables – Increment: Frontend
CSS variables are currently supported for 93 percent of users globally. CSS variables are currently supported for 93 percent of users globally. If...
Read more >
A Complete Guide to Custom Properties | CSS-Tricks
They help DRY up your CSS. That is “Don't Repeat Yourself.” Custom properties can make code easier to maintain because you can update...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found