[csswg-drafts] [css-values]: Proposal – Add type conversion functions to mathematical expressions (#13550)

SetTrend has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values]: Proposal – Add type conversion functions to mathematical expressions ==
# Current Situation

Code like the following does not work:

```css
div
{
  --size: 2px;
  width: calc(1px * pow(var(--size), 2));
}
```

This is because the `--size` variable is declared as a length value, not a bare decimal value (see https://stackoverflow.com/questions/79894255/why-do-css-functions-like-pow-not-work-in-browsers).

# Desired Situation

It is desired to use "typed" values for variables rather than bare decimals, for them to have semantics. Moreover, the unit information is important information as using another unit can change the design dramatically.

CSS mathematical expressions, however, don't accept length or percentage values. They require bare decimal values.

## Improvement Suggestion

To keep things concise and to avoid introducing breaking changes, I propose to add two new conversion functions to the CSS spec.

|Function name|Description|
|-|-|
|`v(arg)`|Returns the decimal value from the specified argument unit value.|
|`u(arg)`|Replaces the decimal number value from the specified argument unit value with a `1` and returns the unit identity value.|
|`u(arg1, arg2)`|Replaces the decimal number value from the specified first argument unit value with the second argument decimal number and returns the corresponding unit value.|

## Synopsis

- The proposed conversion functions will be used quite often, so their name should be short (`u()` and `v()` in this case).

## Details

<dl>
  <dt>v(arg)</dt>
  <dd>
- `v(arg)` takes a single argument.
- The single argument may be any decimal number value with optional unit.
- The `v(arg)` function strips the unit and returns the decimal number value only.
- If the argument is a decimal number without unit, the `v()` function returns the decimal number without change.
</dd>

  <dt>u(arg)</dt>
  <dd>
- `u(arg)` takes a single argument.
- The single argument may be any CSS value with a unit.
- The `u(arg)` function replaces the decimal number with the constant value `1` and returns the typed identity unit value.
</dd>
</dl>

  <dt>u(arg1, arg2)</dt>
  <dd>
- `u(arg1, arg2)` takes two arguments.
- The first argument may be any CSS value with a unit.
- The second argument may be any CSS value; either a decimal number or a value with a unit.
- The `u(arg1, arg2)` function replaces the decimal number from the first argument with the decimal value from the second argument and returns the typed unit value.
</dd>
</dl>

## Examples

- `v(23px)` returns `23`
- `v(5%)` returns `5`
- `v(45deg)` returns `45`
- `v(789)` returns `789`
 
- `u(23px)` returns `1px`
- `u(1rem)` returns `1rem`
- `u(0%)` returns `1%`
- `u(-45deg)` returns `1deg`
 
- `u(23px, 5)` returns `5px`
- `u(1rem, 25px)` returns `25rem`
- `u(0%, 111deg)` returns `111%`
- `u(-45deg, -123)` returns `-123deg`

## Result

Using the proposed two new conversion functions, the [above described problem](#current-situation) could be solved like this:

### A
```css
div
{
  --size: 2px;
  width: calc(u(var(--size)) * pow(v(var(--size)), 2));
}
```

### B
```css
div
{
  --size: 2px;
  width: u(pow(v(var(--size)), 2), --size);
}
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13550 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 23 February 2026 16:02:24 UTC