eslint-plugin-css-custom-properties/docs/rules/no-unknown.md

lint css custom properties in javascript strings

# `css-custom-properties/no-unknown`

With css-in-js and tailwind custom property names are frequently used in javascript
strings where current linting solutions can not validate the the properties
are actually set

## Rule Details

This rule aims to identify usage of unknown css properties

Examples of **incorrect** code for this rule:

With Options: `[{ allow: ['test'] }]`

```js
const test = "var(--test2)";
```

Examples of **correct** code for this rule:

With Options: `[{ allow: ['test'] }]`

```js
const test = "var(--test)";
```

### Options

This rule takes an object as option with the following properties

#### `allow` (`string[]`) [Default: `[]`]

a list of custom css property names that are explicitly allowed

```json
{ "allow": ["my-custom-prop"] }
```

#### `allowUnknownWithFallback` (`boolean`) [Default: `true`]

When set to true, will not complain for an unknown property when it has a fallback

Examples of **correct** code for this option:

With Options: `[{ allowUnknownWithFallback: true }]`

```js
const test = "var(--test, blue)";
```

#### `allowUnknownWithPrefix` (`string[]`) [Default: `[]`]

Will not complain about unknown properties when they start with one of the given prefixes

Examples of **correct** code for this option:

With Options: `[{ allowUnknownWithPrefix: ['x-'] }]`

```js
const test = "var(--x-test)";
```

#### `allowUnlessPrefixed` (`string[]`) [Default: `[]`]

Will only check properties that start with one of the given prefixes

Examples of **correct** code for this option:

With Options: `[{ allowUnlessPrefixed: ['x-'] }]`

```js
const test = "var(--test)";
```

## When Not To Use It

When you do not use css-variables within javascript or do not care when they are unknown.