Setup

Install with NPM or Yarn.

Yarn

yarn add @aesthetic/addon-vendor

NPM

npm install @aesthetic/addon-vendor

Integration

There are 2 ways to configure the addon. The first is through an integration (like React) that relies on the @aesthetic/core package internally. The vendor prefixer can be defined with the configure() method.

import vendorPrefixer from '@aesthetic/addon-vendor';

import { configure } from '@aesthetic/<integration>';

configure({

vendorPrefixer,

});

The second way is through the CSS-in-JS engine directly (if not using an integration). The vendor prefixer is set during instantiation of createClientEngine() or createServerEngine().

import vendorPrefixer from '@aesthetic/addon-vendor';

import { createClientEngine } from '@aesthetic/style';

const engine = createClientEngine({

vendorPrefixer,

});

Usage

If using an integration, vendor prefixing will be automatically applied to all rendered style sheets if the vendorPrefixer setting is configured. No additional work is required here.

However, if using the engine directly, the vendorPrefixer setting must be configured, and the vendor option must be true when calling a render method. If this option is not passed, or is false, prefixes will not be applied.

engine.renderRule(styles, { vendor: true });