# wrIsSafeCssValue

> Answers whether a CSS value can be put inside a larger expression, such as a colour inside a `linear-gradient()` you build, without breaking out of its slot.

Source: https://ngwr.dev/reference/utils/wr-is-safe-css-value  
Kind: Util  
Updated in v16  
Optional

## Installation

Import the class. This entry point has no stylesheet.

```typescript
import { wrIsSafeCssValue } from 'ngwr/utils';
```

## Usage

Check a value that comes from outside before you compose it. Fall back to your default when it fails: do not repair it.

```angular-ts
import { computed, input } from '@angular/core';
import { wrIsSafeCssValue } from 'ngwr/utils';

readonly from = input('var(--wr-color-primary)');
readonly to = input('var(--wr-color-success)');

protected readonly background = computed(() => {
  const from = wrIsSafeCssValue(this.from()) ? this.from() : 'var(--wr-color-primary)';
  const to = wrIsSafeCssValue(this.to()) ? this.to() : 'var(--wr-color-success)';
  return `linear-gradient(90deg, ${from}, ${to})`;
});
```

| Value | Safe | Why |
| --- | --- | --- |
| `var(--wr-color-primary)` | Yes | One value, an allowed function. |
| `color-mix(in srgb, red 50%, blue)` | Yes | The commas are inside the function. |
| `red 20%` | Yes | Whitespace is fine: a gradient stop. |
| `red, blue` | No | A top-level comma reaches the next slot. |
| `red), url(//x.test/a), linear-gradient(red` | No | A closing parenthesis it never opened. |
| `url(//x.test/a)` | No | An image function: it fetches. |
| `red; position: fixed` | No | A semicolon ends the declaration. |

- A containment check, not a colour parser: a safe value can still be one no browser accepts.
- Allowed functions: the colour functions, `color-mix()`, `light-dark()`, `var()`, `calc()`, `min()`, `max()` and `clamp()`.
- A value longer than 256 characters is refused.
- A value bound straight to `[style.background]` needs no check: there is nothing to break out of.

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `wrIsSafeCssValue` | `true` when the value stays inside the slot it is composed into. `false` for an empty string and for anything that is not a string. | `(value: string) => boolean` | `-` |

## See also

- [wrResolveCssColor](https://ngwr.dev/reference/utils/wr-resolve-css-color) — Resolves a CSS colour, such as a var() or light-dark(), to a value a canvas can paint with.
- [wrResolveCssSize](https://ngwr.dev/reference/utils/wr-resolve-css-size) — Turns a size into a CSS value and, when it can, a pixel number.
- [Content Security Policy](https://ngwr.dev/guides/csp) — Run ngwr under a strict Content Security Policy.
- [Theming](https://ngwr.dev/guides/theming) — Load the theme, switch light and dark, and rebrand the palette.