# wrResolveCssSize

> Turns a size into a CSS value and, when it can, a pixel number.

Source: https://ngwr.dev/reference/utils/wr-resolve-css-size  
Kind: Util  
Updated in v16  
Optional

## Usage

Only a number or numeric string, `px` and `rem` give a `pxValue`; anything else gives `null`, so check it before doing maths.

```angular-ts
import { wrResolveCssSize } from 'ngwr/utils';

wrResolveCssSize(48);       // { cssValue: '48px',  pxValue: 48 }
wrResolveCssSize('3rem');   // { cssValue: '3rem',  pxValue: 3 * rootFont }
wrResolveCssSize('80%');    // { cssValue: '80%',   pxValue: null }
wrResolveCssSize(null, { defaultValue: '6rem' }); // uses the default
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `wrResolveCssSize(raw, options?)` | Resolves `48`, `"12px"`, `"3rem"` or `"80%"` to a CSS value and, when it can, pixels. | `(raw, options?) => WrResolvedCssSize` | `—` |
| `WrResolvedCssSize` | Return shape: `{ cssValue: string; pxValue: number \| null }`. | `interface` | `—` |
| `WrResolveCssSizeOptions` | `{ defaultValue?: unknown }`, used when `raw` is `null` or `undefined`. | `interface` | `—` |

## See also

- [wrGetRootFontSize](https://ngwr.dev/reference/utils/wr-get-root-font-size) — Reads the root font size in pixels, for converting rem to px.
- [Avatar](https://ngwr.dev/reference/components/avatar) — A user's picture, with initials as the fallback.
- [wrNumAttr](https://ngwr.dev/reference/utils/wr-num-attr) — Input transform that coerces a bound value to a number, with a fallback.