Calc methods should support unitless values

[gkiely]

Describe the bug

export const ul = style({
  marginBottom: calc.subtract('3rem', 6),
});

// Should be converted to:
margin-bottom: calc(3rem - 6px);

// Actually coverts to:
margin-bottom: calc(3rem - 6);

Reproduction

https://codesandbox.io/s/quirky-grass-k0zvny?file=/src/styles.css.ts

System Info

System:
    OS: macOS 12.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 506.03 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.4.0 - ~/.volta/tools/image/node/18.4.0/bin/node
    Yarn: 1.22.18 - ~/.volta/tools/image/yarn/1.22.18/bin/yarn
    npm: 8.12.1 - ~/.volta/tools/image/node/18.4.0/bin/npm
    Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 105.0.5195.102
    Firefox: 103.0.2
    Safari: 15.3
  npmPackages:
    @vanilla-extract/css: ^1.7.4 => 1.7.4 
    @vanilla-extract/css-utils: ^0.1.2 => 0.1.2 
    @vanilla-extract/vite-plugin: ^3.3.1 => 3.3.1 
    vite: ^3.1.0 => 3.1.0

Used Package Manager

npm

Logs

No response

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[rothsandro]

calc can be used for non-pixel values like opacity or calc.multiply("5px", 2) which should not be converted to pixels.

[michaeltaranto]

Yes, this is not really something that can be inferred as it is perfectly valid to use unitless values in calculations.