postcss-flextype

PostCSS plugin for use with flextype that converts --flextype declarations into hidden ::before pseudo-content to work with browsers that don't yet support CSS variables.

Example

Input:

.foo {
  --flextype: 5%;
}
.bar {
  --flextype: '{"100": 12, "500+": 18}';
}

Output:

.foo::before {
  content: '5%';
  display: none;
}
.bar::before {
  content: '{"100": 12, "500+": 18}';
  display: none;
}

Install

npm install postcss-flextype --save

Usage

const postcss = require('postcss');
const flextype = require('postcss-flextype');

postcss([flextype]);

Options

replace (type: Boolean, default: true)

If set to false postcss-flextype will leave the --flextype declarations in your CSS in addition to adding them as ::before content.