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

Features

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

Installation

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

Usage

programing

1import postcss from 'postcss';
2import { writeFile, readFileSync } from 'fs';
3import { forgePluginPostcssPixel } from '@flatjs/forge-plugin-postcss-pixel';
4const css = readFileSync('/path/to/test.css', 'utf8');
5const options = {
6  replace: false,
7};
8const processedCss = postcss(forgePluginPostcssPixel(options)).process(css).css;
9
10writeFile('/path/to/test.rem.css', processedCss, err => {
11  if (err) throw err;
12  console.log('Rem file written.');
13});

Using with @flatjs/forge

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

Defaults Configuration

1const defaultOpts: Required<PixelOptions> = {
2  rootValue: { px: 100, rpx: 1 },
3  outputUnit: 'rem',
4  unitPrecision: 5,
5  selectorBlackList: [],
6  propWhiteList: [],
7  propBlackList: [],
8  replace: true,
9  mediaQuery: false,
10  minPixelValue: 0,
11  ignoreIdentifier: '',
12  exclude: null,
13};
14

Reference

• postcss playground