Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@megalo/px2rpx

0.1.0 • Public • Published

px2rpx

According to one stylesheet, generate rpx version.

NPM version Build status Test coverage Downloads

Usage

The raw stylesheet only contains @2x style, and if you

  • don't intend to transform the original value, eg: 1px border, add /*no*/ after the declaration

Attention: Dealing with SASS or LESS, only /*...*/ comment can be used, in order to have the comments persisted

API

var Px2rpx = require('@megalojs/px2rpx');
var px2rpxIns = new Px2rpx({
  {rpxUnit: 0.5}
});
var originCssText = '...';
var newCssText = px2rpxIns.generateRpx(originCssText); // generate rpx version stylesheet

Example

Pre processing:

One raw stylesheet: test.css

.selector {
  width: 350px;
  height: 60px; 
  font-size: 20px; 
  border: 1px solid #ddd; /*no*/
}

After processing:

Rpx version: test.debug.css

.selector {
  width: 750rpx;
  height: 120rpx;
  font-size: 40rpx;
  border: 1px solid #ddd;
}

Technical proposal

comment hook + css parser

Change Log

0.0.1

License

MIT

Keywords

Install

npm i @megalo/px2rpx

DownloadsWeekly Downloads

4

Version

0.1.0

License

MIT

Unpacked Size

8.42 kB

Total Files

5

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar