├── index.js ├── .travis.yml ├── lib └── px2rpx-loader.js ├── .gitignore ├── package.json ├── README.md └── test.js /index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./lib/px2rpx-loader') 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "4.0" 4 | - "0.12" 5 | - "0.11" 6 | - "0.10" 7 | -------------------------------------------------------------------------------- /lib/px2rpx-loader.js: -------------------------------------------------------------------------------- 1 | var loaderUtils = require('loader-utils') 2 | var Px2rpx = require('px2rpx') 3 | 4 | module.exports = function (source) { 5 | var query = loaderUtils.parseQuery(this.query) 6 | var px2rpxIns = new Px2rpx(query) 7 | return px2rpxIns.generaterpx(source) 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directory 27 | node_modules 28 | 29 | # Optional npm cache directory 30 | .npm 31 | 32 | # Optional REPL history 33 | .node_repl_history 34 | 35 | # Others 36 | .DS_Store 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "px2rpx-loader", 3 | "version": "0.1.8", 4 | "description": "css post loader for px2rpx", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "mocha test.js --slow 2000" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/aOrz/px2rpx-loader.git" 12 | }, 13 | "keywords": [ 14 | "webpack", 15 | "loader" 16 | ], 17 | "author": "Jinjiang", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/aOrz/px2rpx-loader/issues" 21 | }, 22 | "homepage": "https://github.com/aOrz/px2rpx-loader", 23 | "dependencies": { 24 | "px2rpx": "~0.5.2", 25 | "loader-utils": "^0.2.7" 26 | }, 27 | "devDependencies": { 28 | "chai": "~3.0.0", 29 | "mocha": "~2.2.5" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # px2rpx-loader 2 | 3 | a [webpack](http://webpack.github.io/) loader for [px2rpx](https://github.com/aOrz/px2rpx) 4 | 5 | [![NPM version][npm-image]][npm-url] 6 | [![Downloads][downloads-image]][downloads-url] 7 | 8 | [npm-image]: https://img.shields.io/npm/v/px2rpx-loader.svg 9 | [npm-url]: https://npmjs.org/package/px2rpx-loader 10 | [travis-image]: https://img.shields.io/travis/Jinjiang/px2rpx-loader.svg 11 | [travis-url]: https://travis-ci.org/Jinjiang/px2rpx-loader 12 | [downloads-image]: http://img.shields.io/npm/dm/px2rpx-loader.svg 13 | [downloads-url]: https://npmjs.org/package/px2rpx-loader 14 | 15 | ## Install 16 | 17 | `npm install px2rpx-loader` 18 | 19 | ## webpack config 20 | 21 | ``` 22 | { 23 | loaders: [{ test: /\.css$/, loader: 'style!css!px2rpx?rpxUnit=75&rpxPrecision=8' }] 24 | } 25 | ``` 26 | 27 | Please see [px2rpx](https://github.com/aOrz/px2rpx) for more information about query parameters of px2rpx. 28 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | var expect = require('chai').expect 2 | var loader = require('./lib/px2rpx-loader') 3 | 4 | describe('Loader', function () { 5 | 6 | it('should transform px value into rpx', function () { 7 | var output = loader.call({}, 'body {width: 750px}') 8 | expect(output).is.a('string') 9 | expect(output).to.equal('body {\n width: 10rpx;\n}') 10 | }) 11 | }) 12 | 13 | describe('Transform Value Comment', function () { 14 | 15 | it('should support `no` transform value comment', function () { 16 | var output = loader.call({}, 'body {width: 750px; /*no*/}') 17 | expect(output).is.a('string') 18 | expect(output).to.equal('body {\n width: 750px;\n}') 19 | }) 20 | 21 | it('should support `px` transform value comment', function () { 22 | var output = loader.call({}, 'body {width: 750px; /*px*/}') 23 | expect(output).is.a('string') 24 | expect(output).to.equal('[data-dpr="1"] body {\n width: 375px;\n}\n\n[data-dpr="2"] body {\n width: 750px;\n}\n\n[data-dpr="3"] body {\n width: 1125px;\n}') 25 | }) 26 | }) 27 | 28 | describe('Transform Media Query & Key Frames', function () { 29 | 30 | it('should support @media', function () { 31 | var output = loader.call({}, '@media only screen and (min-device-width: 360px) {body {width: 750px; height: 200px; /*px*/ border-width: 1px; /*no*/}}') 32 | expect(output).is.a('string') 33 | expect(output).to.equal('@media only screen and (min-device-width: 360px) {\n body {\n width: 10rpx;\n border-width: 1px;\n }\n\n [data-dpr="1"] body {\n height: 100px;\n }\n\n [data-dpr="2"] body {\n height: 200px;\n }\n\n [data-dpr="3"] body {\n height: 300px;\n }\n}') 34 | }) 35 | 36 | it('should support @keyframes', function () { 37 | var output = loader.call({}, '@keyframes anim {0% {transform: none; height: 75px; border-width: 1px; /*no*/} 100% {transform: none; height: 150px; border-width: 2px; /*no*/}}') 38 | expect(output).is.a('string') 39 | expect(output).to.equal('@keyframes anim {\n 0% {\n transform: none;\n height: 1rpx;\n border-width: 1px;\n }\n\n 100% {\n transform: none;\n height: 2rpx;\n border-width: 2px;\n }\n}') 40 | }) 41 | }) 42 | 43 | describe('Loader Query', function () { 44 | 45 | it('should support `rpxUnit` query', function () { 46 | var output = loader.call({query: '?rpxUnit=64'}, 'body {width: 640px}') 47 | expect(output).is.a('string') 48 | expect(output).to.equal('body {\n width: 10rpx;\n}') 49 | }) 50 | 51 | it('should support `rpxUnit` query', function () { 52 | var output = loader.call({query: '?rpxUnit=112.5'}, 'body {width: 640px}') 53 | expect(output).is.a('string') 54 | expect(output).to.equal('body {\n width: 5.688889rpx;\n}') 55 | }) 56 | 57 | it('should support `rpxPrecision` query', function () { 58 | var output = loader.call({query: '?rpxPrecision=3'}, 'body {width: 1000px}') 59 | expect(output).is.a('string') 60 | expect(output).to.equal('body {\n width: 13.333rpx;\n}') 61 | }) 62 | 63 | it('should support `rpxUnit` & `rpxPrecision` query', function () { 64 | var output = loader.call({query: '?rpxUnit=112.5&rpxPrecision=3'}, 'body {width: 640px}') 65 | expect(output).is.a('string') 66 | expect(output).to.equal('body {\n width: 5.689rpx;\n}') 67 | }) 68 | }) 69 | --------------------------------------------------------------------------------