'0px' vars are compiled to '0' which leads to error at best, unpredicatable results at worst

[olivierpascal]

Describe the issue

'0px' vars are compiled to '0' which leads to error at best, unpredicatable results at worst

Expected behavior

'0px' vars to be compiled to '0px'

Steps to reproduce

// Test.stylex
import stylex from '@stylexjs/stylex';

export const vars = stylex.defineVars({
  thickness: '1px',
});

// Test.tsx
import stylex from '@stylexjs/stylex';
import { vars } from './Test.stylex';

const styles = stylex.create({
  container: {
    // [vars.thickness]: '10px', // compiled to '10px'
    [vars.thickness]: '0px', // compiled to '0' which makes calc not valid

    borderStyle: 'solid',
    borderWidth: `calc(${vars.thickness})`,
  },
});

export const Test: React.FC = () => (
  <div {...stylex.props(styles.container)}>Hello World!</div>
);

Test case

No response

Additional comments

No response

[necolas]

Values of vars should not be transformed by the compiler, so let's check it's not just the 0px -> 0 transform that's being applied. Previously, there was a bug internally where variable values that were unitless were being transformed to add the px unit.

[nmn]

A PR has recently been merged that fixes this issue for fr and % units. I'll make the change to ensure that the unit isn't dropped for any 0 values.