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.

Server side issue with inline styles

See original GitHub issue

Hi, I’m trying to use inline styles using bel and also trying the new server-side rendering capability.

When I compile this template

bel`<h1 style="color: red">Hey ${name.toUpperCase()}, <span style="color: blue">This</span> is a card!!!</h1>`

It returns the following string

<h1 style="0:c;1:o;2:l;3:o;4:r;5::;6: ;7:r;8:e;9:d;">Hey JOHN,
    <span style="0:c;1:o;2:l;3:o;4:r;5::;6: ;7:b;8:l;9:u;10:e;">This</span> is a card!!!</h1>

Also if you know how can I use react-like inline styles using objects instead of just strings it will be awesome.

Thanks for this tool!

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

shamacommented, Mar 16, 2016

Whoa that is a weird issue. Is this with v4.2.0?

At one point we had inline style objects built-in: <div style=${cssprops}>hey</div> but removed them to give the user the choice on how to handle it.

Here is what I do for inline styles now:

var domcss = require('dom-css')
var bel = require('bel')

var element = bel`<div>hey</div>`
domcss(element, { color: 'red' })

This way the properties get set directly on instead of compiled as a string into style="" making it less susceptible to XSS attacks. dom-css will even do vendor prefixing.

shamacommented, Aug 3, 2016

Thanks @juliangruber!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can CSS be inlined in the server-rendered pages ? · Issue #962
The inline styles being loaded seems to have been a bug in Vite. It fails with 3.1.x, but works with 3.2.x. Updating to...
Read more >
Dynamically Inlining Critical CSS with Server-side JavaScript
To solve this problem, PageSpeed recommends adding inline CSS to the HTML document. This doesn't mean we want to embed the entire stylesheet ......
Read more >
inline styles - What's so bad about in-line CSS? - Stack Overflow
You're missing something re: latency. A much bigger problem, really: Embedding the CSS means every page request must contain that CSS, whereas otherwise,...
Read more >
Improve site performance by inlining your CSS - LogRocket Blog
Once you understand how CSS can impact your site performance, you can then look for opportunities to inline your CSS — the right...
Read more >
How do we make “styles in components” play nicely with ...
The last question I need answered before getting on board with the craziest “all-in” JavaScript movement I've seen yet.
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 Post

No results found

github_iconTop Related Hashnode Post

No results found