number-maniputation for percent / px values?

[devdoomari]

I'm converting a sass-style to typestyle, so this might be a 'sass-minded' mode of thinking...

Here's an old code that uses 'variables' in sass:

.someClass {
   $baseXpos: 108%;
   ....
   &.class2 {
       width: $baseXpos * 2;
   }
}

as you can see, $baseXpos is in 'percent', and it's multiplication-able.

What do you think about having an extra-api for value manipulation? e.g:

const $baseXpos = variablePercent(108);
const widthOfClass2 = $baseXpos.multiplyBy(2).toValue(); // returns CSSLength type
// or:
const widthOfClass3 = $baseXPos.calc(value => value * 2).toValue();

[notoriousb1t]

The way I would write that is:

import { style } from 'typestyle';
import { percent } from 'csx';

const $baseXpos = 108; 
const class2 = style({
  width: percent($baseXpos *2)
});

We have helpers that suffix with the right unit. I think it might be overkill to do a fluent api when straightforward TypeScript can do the same thing.

[devdoomari]

@notoriousb1t I wondered if that would be ok for the original writer of code, who might have intended $baseXpos to be of 'percent'... (e.g. cannot be used in a wrong context)

but I guess that's ok - think I can persuade him if he complains :+1: