artboard-deluxe / cssProperties

cssProperties()

const cssProperties: (options) => ArtboardPluginDefinition<{ element?: HTMLElement; precision?: number; properties: Property[]; restoreProperties?: boolean; unitless?: boolean; }, object>

Defined in: plugins/cssProperties/index.ts:18

Sets the artboard state as CSS custom properties/variables on the given element or root element.

Parameters

options

element?

HTMLElement

The element on which the CSS properties should be set. Falls back to the root element.

precision?

number

How precise the set values should be.

A value of 1 (default) means that only whole pixels are applied (e.g. 20px). A value of 0.5 means the values are rounded to the next 0.5 increment (e.g. 20.5px or 21px). A value of 10 would round to 20px, 30px, 0px, etc.

properties

Property[]

Define which CSS properties to set.

restoreProperties?

boolean

Restore original CSS properties on destroy.

If true, the plugin will restore the CSS properties to their value before the plugin was initialised.

unitless?

boolean

Adds unitless property values.

If true, instead of --artboard-offset-x: -582px it will set --artboard-offset-x: -582. Useful if you want to do CSS calculations with purely numeric values.

Returns

ArtboardPluginDefinition<{ element?: HTMLElement; precision?: number; properties: Property[]; restoreProperties?: boolean; unitless?: boolean; }, object>