The flatjs plugin @flatjs/forge-plugin-postcss-pixel

Features

A plugin for PostCSS that generates rpx/rem units from px/rpx units

Installation

$ npm i --save @flatjs/forge-plugin-postcss-pixel

Usage

programing

import postcss from 'postcss';
import { writeFile, readFileSync } from 'fs';
import { forgePluginPostcssPixel } from '@flatjs/forge-plugin-postcss-pixel';
const css = readFileSync('/path/to/test.css', 'utf8');
const options = {
  replace: false,
};
const processedCss = postcss(forgePluginPostcssPixel(options)).process(css).css;

writeFile('/path/to/test.rem.css', processedCss, err => {
  if (err) throw err;
  console.log('Rem file written.');
});

Using with @flatjs/forge

Please see samples of @flatjs/forge-plugin-styling

Defaults Configuration

const defaultOpts: Required<PixelOptions> = {
  rootValue: { px: 100, rpx: 1 },
  outputUnit: 'rem',
  unitPrecision: 5,
  selectorBlackList: [],
  propWhiteList: [],
  propBlackList: [],
  replace: true,
  mediaQuery: false,
  minPixelValue: 0,
  ignoreIdentifier: '',
  exclude: null,
};

Reference

• postcss playground