convert fractions to percentage values

Lines 136 to 140 in 64d8d7f

    
           function formatValue(prop, value) { 
        
             return value in vendorValuePrefix 
        
               ? vendorValuePrefix[value] 
        
               : value + (isNaN(value) || value === null || typeof value === 'boolean' || cssVar(prop) ? '' : appendPx(prop)) 
        
           }

Would it make sense to automatically convert fractions to percentage values instead of adding px?

so instead of

b({ width: 1 / 3 }) // -> { style: { width: '0.3333333333333333px' } }

you'd get

b({ width: 1 / 3 }) // -> { style: { width: '33.3333333333333333%' } }

Or can you think of a situation where % would not be the desired outcome when working with Integer < 0

Hi Stefan. Yeah, I've thought about this, but with retina displays and what not these days, 0.5px isn't uncommon. I think it's one of these rules where there might be too many exceptions, so that it might end up being confusing instead.

Argh, didn't think of retina use case.
Agreed, makes everything too confusing, then.

One unrelated questing.
What is the most performant way to engage the b function ? Strings? Objects?, have you an estimate? I'm asking because I am about to set up a bunch of helpers. Probably makes a difference in that case...

Hi @smuemd ..

The fastest will be bypassing any bss sanitizing / handling by using

b({
  __style: {
    height: '100%'
  }
})

This won't allow you to use shorthands / autopx / helpers etc.

The fastest of the documented options by some hand tests I did a while back comes in this order:

b`height 100%` fastest
b({ height: '100%' }) almost twice as slow
b.height('100%') 3-4 times as slow

Now there are a lot of optimizations just ripe for the taking, but since I've never had performance issues, it hasn't been a priority yet.

Ahh!
That is good to know.

I am binge-creating these helpers (WIP). So I will just 'do the right thing' and use the b express version :-)

BTW I nicked a visual test setup from SuitCss and recreated it in flems. I am using this to test my helpers and the component factory itself. . Maybe you will find this useful, too. 👉 (Example)

Hi @smuemd .. I really hope I'll have time to dig in at some point :) Still swamped at work..

I'm going through issues this weekend, and wrt. converting fractions to percent, I don't think it's worth it, so I'm going to close this one ;)

	function formatValue(prop, value) {
	return value in vendorValuePrefix
	? vendorValuePrefix[value]
	: value + (isNaN(value) \|\| value === null \|\| typeof value === 'boolean' \|\| cssVar(prop) ? '' : appendPx(prop))
	}