wrIsSafeCssValue

import { wrIsSafeCssValue } from 'ngwr/utils';

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.

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`	`-`

Installation

Usage

API

See also