---
url: /api/plugins/postcss/flatten-property/src.md
---
[pantoken-root](../../../../index.md) / flatten-property

# flatten-property

Beta

`@pantoken/plugin-flatten-property` — convert `@property` at-rules to plain custom-property
declarations.

`@property` at-rules register typed CSS custom properties with `syntax`, `inherits`, and
`initial-value` descriptors. They carry significant byte overhead — ~60 bytes of boilerplate per
property — and are unnecessary when the stylesheet is a self-contained bundle where type
registration provides no runtime benefit. This plugin replaces each `@property` block with a
simple `--name: value` declaration inside a chosen selector, recovering all that overhead.

**Semantic note:** removing `@property` loses CSS type registration. Typed transitions/animations,
`@starting-style`, and the CSS Typed OM depend on it. Only apply to bundles where those semantics
are not needed.

## Example

```ts
import postcss from "postcss";
import { flattenProperty } from "@pantoken/plugin-flatten-property";
const out = postcss([flattenProperty()]).process(css, { from: undefined }).css;
```

## Interfaces

* [FlattenPropertyOptions](interfaces/FlattenPropertyOptions.md)

## Variables

* [flattenProperty](variables/flattenProperty.md)