Compatibility

Here is where the compatibility of this plugin is documented. If a plugin is not listed here, then it most likely hasn't been tested or the incompatibility is too unlikely.

Strategy

Since this plugin targets properties, it should be compatible if placed near the top.

The syntax is customisable so one can change the syntax to make this plugin even more compatible if required.

Plugins

postcss-simple-vars

When using the default options, the postcss-define-property plugin must appear before postcss-simple-vars as the latter will see the use of the $ as a variable.

It will ignore any variables within a custom property definition if they are not parameters. The following is taken from one of the test cases:

/* Input */
$zero: 0;

squashed: $width {
  height: $zero;
  width: $width;
}

$anchor-width: 100px;

a {
  squashed: $anchor-width;
}

/* Output */
$zero: 0;
$anchor-width: 100px;

a {
  height: $zero;
  width: $anchor-width;
}