---
url: /api/plugins/postcss/props-minify/src/variables/flattenProperty.md
---
[pantoken-root](../../../../../index.md) / [plugins/postcss/props-minify/src](../index.md) / flattenProperty

# Variable: flattenProperty

> `const` **flattenProperty**: {(`options?`): [`Plugin`](https://postcss.org/api/#plugin); `postcss`: `true`; }

Beta

Create the flatten-`@property` PostCSS plugin.

Walks all `@property` at-rules in the stylesheet, extracts each `initial-value` descriptor, removes
the at-rule, and prepends a single `injectSelector { --name: value; … }` rule containing all
extracted declarations. Empty rules and `@layer` blocks left behind after removal are dropped.

## Type Declaration

## Parameters

### options?

[`FlattenPropertyOptions`](../interfaces/FlattenPropertyOptions.md)

[FlattenPropertyOptions](../interfaces/FlattenPropertyOptions.md).

## Returns

[`Plugin`](https://postcss.org/api/#plugin)

A PostCSS [Plugin](https://postcss.org/api/#plugin).

### postcss

> **postcss**: `true`

Required PostCSS plugin marker.

## Examples

**Default injection into :root**

```ts
import postcss from "postcss";
import { flattenProperty } from "@pantoken/plugin-flatten-property";

const out = postcss([flattenProperty()]).process(css, { from: undefined }).css;
```

**Inject into :scope (for use inside scope blocks)**

```ts
import postcss from "postcss";
import { flattenProperty } from "@pantoken/plugin-flatten-property";

const out = postcss([flattenProperty({ injectSelector: ":scope" })]).process(css, { from: undefined }).css;
```

```ts
Preserve
```