pantoken / plugins/postcss/flatten-property/src / flattenProperty

Variable: flattenProperty

const flattenProperty: {(options?): 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

FlattenPropertyOptions.

Returns

Plugin

A PostCSS Plugin.

postcss

postcss: true

Required PostCSS plugin marker.

Examples

Default injection into :root

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)

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

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

Preserve