[idea] pseudo inline styles

[shama]

An idea for handling CSS:

var bel = require('bel')
var css = {
  position: 'absolute',
  top: 100,
  left: 200
}
var element = bel`<div style=${css}>Hello!</div>`

Which would detect the style key and use dom-css to set the .style[prop] directly on the elements (CSP safe). It will even do vendor prefixing.

[tunnckoCore]

@shama @yoshuawuyts could we revive that by adding really few bytes?

Very basic and almost enough support for this can be implemented in 2-4 lines

      // support style as object
      // both `fontSize` and `font-size` work that way
      if (key === 'style' && typeof val === 'object') {
        for (var k in val) {
          el.style[k] = val[k]
        }
        continue
      }

The cool thing is that DOM is smart enough, so it accepts el.style.fontSize and el.style['font-size'] by default.

[tunnckoCore]

@shama @yoshuawuyts could we revive that by adding really few bytes?

Very basic and almost enough support for this can be implemented in 2-4 lines

      // support style as object
      // both `fontSize` and `font-size` work that way
      if (key === 'style' && typeof val === 'object') {
        for (var k in val) {
          el.style[k] = val[k]
        }
        continue
      }

The cool thing is that DOM is smart enough, so it accepts el.style.fontSize and el.style['font-size'] by default.

[shama]

var bel = require('bel')
var css = require('dom-css')
var element = bel`<div>Hello!</div>`
css(element, {
  position: 'absolute',
  top: 100,
  left: 200
})

Is pretty much the same code but then you can control which version of dom-css you use or even use an entirely different CSS library. It's not about implementation difficultly but rather keeping this library generic.

[shama]

var bel = require('bel')
var css = require('dom-css')
var element = bel`<div>Hello!</div>`
css(element, {
  position: 'absolute',
  top: 100,
  left: 200
})

Is pretty much the same code but then you can control which version of dom-css you use or even use an entirely different CSS library. It's not about implementation difficultly but rather keeping this library generic.

[timwis]

That starts to be a lot less convenient when element is a tree and you want to style its children though. You'd have to use querySelector and such. :-/

[timwis]

That starts to be a lot less convenient when element is a tree and you want to style its children though. You'd have to use querySelector and such. :-/

[shama]

Maybe it's because I rarely use inline styles and when I do, it's almost always directly on the element. Non-inline CSS is far superior IMO so this convenience isn't useful to me.

But, if the overwhelming consensus is to add this back then we can.

[shama]

Maybe it's because I rarely use inline styles and when I do, it's almost always directly on the element. Non-inline CSS is far superior IMO so this convenience isn't useful to me.

But, if the overwhelming consensus is to add this back then we can.

[tunnckoCore]

Probably. But it cost nothing and DOM itself supports it. If anyone want more then he can use something like dom-css or such.

[tunnckoCore]

Probably. But it cost nothing and DOM itself supports it. If anyone want more then he can use something like dom-css or such.

[yoshuawuyts]

Agree with @shama. Yeah, also wouldn't use this, but not opposed tho if people want it. It would need to be ported to yo-yoify and tested on both projects before we could land it

…

On Sun, May 21, 2017, 19:20 Charlike Mike Reagent ***@***.***> wrote: Probably. But it cost nothing and DOM itself supports it. If anyone want more then he can use something like dom-css or such. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACWlek5rUUmWhrcR4TI9RwcZzo5OYudEks5r8HJIgaJpZM4Hnzkh> .

[yoshuawuyts]

Agree with @shama. Yeah, also wouldn't use this, but not opposed tho if people want it. It would need to be ported to yo-yoify and tested on both projects before we could land it

…

On Sun, May 21, 2017, 19:20 Charlike Mike Reagent ***@***.***> wrote: Probably. But it cost nothing and DOM itself supports it. If anyone want more then he can use something like dom-css or such. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACWlek5rUUmWhrcR4TI9RwcZzo5OYudEks5r8HJIgaJpZM4Hnzkh> .