Shorthand properties using JS object syntax

[SkylerLipthay]

Is it intentional that shorthand properties are not available when using JS objects to specify CSS rules? For example:

console.log(b('b 1').style);
console.log(b('b: 1').style);
console.log(b.b(1).style);
console.log(b({ b: 1 }).style);

Output:

{ bottom: '1px' }
{ bottom: '1px' }
{ bottom: '1px' }
{ b: '1px' }

[porsager]

Ah, no that's not intentional, thanks for finding that. I'll include the fix in v. 2 since it's kind of a breaking change ;)

[SkylerLipthay]

A couple more shortcomings with JS object syntax:

p(b`padding 0 7`)
p(b({ padding: '0 7' }))

b.helper('abc', `color red`)
p(b`fontSize 13; abc`)
p(b({ fontSize: 13, abc: true }))

Output:

{ style: { padding: '0px 7px' } }
{ style: { padding: '0 7' } }
{ style: { fontSize: '13px', color: 'red' } }
{ style: { fontSize: '13px', abc: 'truepx' } }

[porsager]

Very nice @SkylerLipthay thank you!

For the second issue, I hadn't considered that kind of helper usage.. You could also do:

b({ fontSize: 13 }).abc

but i can see the merit in being able to toggle a helper in an object like that...

[SkylerLipthay]

Ah of course, thanks. That's a cleaner work-around than b({ fontSize: 13}) + b`abc`. I can't think of any consequences of adding this toggle functionality to the object syntax, but then again I know little about bss's pipeline. Although I will mention that I'm interested why 'px' is appended to true there...

[porsager]

Yeah, so was I :D Apparently isNan(true | false | null) is false which I find a bit weird.. (it's used to figure out if we have a number and wan't to add px..) Guess I'll have to make a better check :)

I think the object setup is worth considering... true/false doesn't really have any sense in css, and if they did it should be strings 'true' / 'false', so it might lead somewhere interesting :)

Wrt. helpers the original thought actually came from tachyons so that you could do

b.rel.p6.b.white.ttu.tc