[ { "path": ".gitignore", "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directory\nnode_modules\n\n# Optional npm cache directory\n.npm\n\n# Optional REPL history\n.node_repl_history\n\n# Others\n.DS_Store\n" }, { "path": ".travis.yml", "content": "language: node_js\nnode_js:\n- \"8\"\n" }, { "path": "README.md", "content": "# px2rem-loader\n\na [webpack](http://webpack.github.io/) loader for [px2rem](https://github.com/songsiqi/px2rem)\n\n[![NPM version][npm-image]][npm-url]\n[![Build status][travis-image]][travis-url]\n[![Downloads][downloads-image]][downloads-url]\n\n[npm-image]: https://img.shields.io/npm/v/px2rem-loader.svg\n[npm-url]: https://npmjs.org/package/px2rem-loader\n[travis-image]: https://img.shields.io/travis/Jinjiang/px2rem-loader.svg\n[travis-url]: https://travis-ci.org/Jinjiang/px2rem-loader\n[downloads-image]: http://img.shields.io/npm/dm/px2rem-loader.svg\n[downloads-url]: https://npmjs.org/package/px2rem-loader\n\n## Install\n\n`npm install px2rem-loader`\n\n## webpack config\n\n```\nmodule.exports = {\n // ...\n module: {\n rules: [{\n test: /\\.css$/,\n use: [{\n loader: 'style-loader'\n }, {\n loader: 'css-loader'\n }, {\n loader: 'px2rem-loader',\n // options here\n options: {\n remUnit: 75,\n remPrecision: 8\n }\n }]\n }]\n }\n}\n```\n\n\nPlease see [px2rem](https://github.com/songsiqi/px2rem) for more information about query parameters of px2rem.\n\n## Example\n\nSee an example [here](./examples).\n" }, { "path": "examples/.gitignore", "content": "node_modules\ndist\n" }, { "path": "examples/README.md", "content": "# px2rem-examples\n\nBased on webpack v4.\n\n## How to start\n\n``` bash\nnpm install\nnpm run build\nopen index.html\n```\n\n## Things should note\n\n* `webpack.config.js`: the way to config px2rem-loader and other webpack config.\n* `foo.css`: the way to use REM unit in CSS source file.\n* `index.html`: the way to include `lib.flexible`.\n" }, { "path": "examples/foo.css", "content": "h1 {\n width: 480px; /*px*/\n padding: 0.5em 1em;\n font-size: 64px;\n border: 1px solid #333; /*no*/\n background: #eeeeee;\n}\n" }, { "path": "examples/index.html", "content": "\n\n\n \n \n px2rem-loader example\n \n \n \n \n\n\n

Hello World

\n\n\n" }, { "path": "examples/main.js", "content": "import './foo.css'\n" }, { "path": "examples/package.json", "content": "{\n \"name\": \"px2rem-examples\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"webpack --watch\",\n \"build\": \"webpack\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"css-loader\": \"^2.1.0\",\n \"px2rem-loader\": \"^0.1.9\",\n \"style-loader\": \"^0.23.1\",\n \"webpack\": \"^4.28.1\",\n \"webpack-cli\": \"^3.2.1\"\n }\n}\n" }, { "path": "examples/webpack.config.js", "content": "module.exports = {\n\n mode: 'development',\n\n entry: './main.js',\n output: {\n filename: 'example.js'\n },\n\n module: {\n rules: [{\n test: /\\.css$/,\n use: [{\n loader: 'style-loader'\n },\n {\n loader: 'css-loader'\n },\n {\n loader: 'px2rem-loader',\n // // options here\n // options: {\n // remUnit: 75,\n // remPrecision: 8\n // }\n }]\n }]\n }\n}\n" }, { "path": "index.js", "content": "module.exports = require('./lib/px2rem-loader')\n" }, { "path": "lib/px2rem-loader.js", "content": "var loaderUtils = require('loader-utils')\nvar Px2rem = require('px2rem')\n\nmodule.exports = function (source) {\n var options = loaderUtils.getOptions(this)\n var px2remIns = new Px2rem(options)\n return px2remIns.generateRem(source)\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"px2rem-loader\",\n \"version\": \"0.1.9\",\n \"description\": \"css post loader for px2rem\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"mocha test.js --slow 2000\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/Jinjiang/px2rem-loader.git\"\n },\n \"keywords\": [\n \"webpack\",\n \"loader\"\n ],\n \"author\": \"Jinjiang\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/Jinjiang/px2rem-loader/issues\"\n },\n \"homepage\": \"https://github.com/Jinjiang/px2rem-loader\",\n \"dependencies\": {\n \"loader-utils\": \"^1.1.0\",\n \"px2rem\": \"^0.5.0\"\n },\n \"devDependencies\": {\n \"chai\": \"~3.0.0\",\n \"mocha\": \"~2.2.5\"\n }\n}\n" }, { "path": "test.js", "content": "var expect = require('chai').expect\nvar loader = require('./lib/px2rem-loader')\n\ndescribe('Loader', function () {\n\n it('should transform px value into rem', function () {\n var output = loader.call({}, 'body {width: 750px}')\n expect(output).is.a('string')\n expect(output).to.equal('body {\\n width: 10rem;\\n}')\n })\n})\n\ndescribe('Transform Value Comment', function () {\n\n it('should support `no` transform value comment', function () {\n var output = loader.call({}, 'body {width: 750px; /*no*/}')\n expect(output).is.a('string')\n expect(output).to.equal('body {\\n width: 750px;\\n}')\n })\n\n it('should support `px` transform value comment', function () {\n var output = loader.call({}, 'body {width: 750px; /*px*/}')\n expect(output).is.a('string')\n 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}')\n })\n})\n\ndescribe('Transform Media Query & Key Frames', function () {\n\n it('should support @media', function () {\n var output = loader.call({}, '@media only screen and (min-device-width: 360px) {body {width: 750px; height: 200px; /*px*/ border-width: 1px; /*no*/}}')\n expect(output).is.a('string')\n expect(output).to.equal('@media only screen and (min-device-width: 360px) {\\n body {\\n width: 10rem;\\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}')\n })\n\n it('should support @keyframes', function () {\n var output = loader.call({}, '@keyframes anim {0% {transform: none; height: 75px; border-width: 1px; /*no*/} 100% {transform: none; height: 150px; border-width: 2px; /*no*/}}')\n expect(output).is.a('string')\n expect(output).to.equal('@keyframes anim {\\n 0% {\\n transform: none;\\n height: 1rem;\\n border-width: 1px;\\n }\\n\\n 100% {\\n transform: none;\\n height: 2rem;\\n border-width: 2px;\\n }\\n}')\n })\n})\n\ndescribe('Loader Query', function () {\n\n it('should support `remUnit` query', function () {\n var output = loader.call({query: '?remUnit=64'}, 'body {width: 640px}')\n expect(output).is.a('string')\n expect(output).to.equal('body {\\n width: 10rem;\\n}')\n })\n\n it('should support `remUnit` query', function () {\n var output = loader.call({query: '?remUnit=112.5'}, 'body {width: 640px}')\n expect(output).is.a('string')\n expect(output).to.equal('body {\\n width: 5.688889rem;\\n}')\n })\n\n it('should support `remPrecision` query', function () {\n var output = loader.call({query: '?remPrecision=3'}, 'body {width: 1000px}')\n expect(output).is.a('string')\n expect(output).to.equal('body {\\n width: 13.333rem;\\n}')\n })\n\n it('should support `remUnit` & `remPrecision` query', function () {\n var output = loader.call({query: '?remUnit=112.5&remPrecision=3'}, 'body {width: 640px}')\n expect(output).is.a('string')\n expect(output).to.equal('body {\\n width: 5.689rem;\\n}')\n })\n})\n" } ]