Repository: Jinjiang/px2rem-loader
Branch: master
Commit: d1a85cc45aab
Files: 14
Total size: 7.4 KB
Directory structure:
gitextract_717fc_tc/
├── .gitignore
├── .travis.yml
├── README.md
├── examples/
│ ├── .gitignore
│ ├── README.md
│ ├── foo.css
│ ├── index.html
│ ├── main.js
│ ├── package.json
│ └── webpack.config.js
├── index.js
├── lib/
│ └── px2rem-loader.js
├── package.json
└── test.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
node_modules
# Optional npm cache directory
.npm
# Optional REPL history
.node_repl_history
# Others
.DS_Store
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- "8"
================================================
FILE: README.md
================================================
# px2rem-loader
a [webpack](http://webpack.github.io/) loader for [px2rem](https://github.com/songsiqi/px2rem)
[![NPM version][npm-image]][npm-url]
[![Build status][travis-image]][travis-url]
[![Downloads][downloads-image]][downloads-url]
[npm-image]: https://img.shields.io/npm/v/px2rem-loader.svg
[npm-url]: https://npmjs.org/package/px2rem-loader
[travis-image]: https://img.shields.io/travis/Jinjiang/px2rem-loader.svg
[travis-url]: https://travis-ci.org/Jinjiang/px2rem-loader
[downloads-image]: http://img.shields.io/npm/dm/px2rem-loader.svg
[downloads-url]: https://npmjs.org/package/px2rem-loader
## Install
`npm install px2rem-loader`
## webpack config
```
module.exports = {
// ...
module: {
rules: [{
test: /\.css$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'px2rem-loader',
// options here
options: {
remUnit: 75,
remPrecision: 8
}
}]
}]
}
}
```
Please see [px2rem](https://github.com/songsiqi/px2rem) for more information about query parameters of px2rem.
## Example
See an example [here](./examples).
================================================
FILE: examples/.gitignore
================================================
node_modules
dist
================================================
FILE: examples/README.md
================================================
# px2rem-examples
Based on webpack v4.
## How to start
``` bash
npm install
npm run build
open index.html
```
## Things should note
* `webpack.config.js`: the way to config px2rem-loader and other webpack config.
* `foo.css`: the way to use REM unit in CSS source file.
* `index.html`: the way to include `lib.flexible`.
================================================
FILE: examples/foo.css
================================================
h1 {
width: 480px; /*px*/
padding: 0.5em 1em;
font-size: 64px;
border: 1px solid #333; /*no*/
background: #eeeeee;
}
================================================
FILE: examples/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>px2rem-loader example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- https://github.com/amfe/lib-flexible/tree/master#依赖库 -->
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
<script src="./dist/example.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
================================================
FILE: examples/main.js
================================================
import './foo.css'
================================================
FILE: examples/package.json
================================================
{
"name": "px2rem-examples",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "webpack --watch",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "ISC",
"devDependencies": {
"css-loader": "^2.1.0",
"px2rem-loader": "^0.1.9",
"style-loader": "^0.23.1",
"webpack": "^4.28.1",
"webpack-cli": "^3.2.1"
}
}
================================================
FILE: examples/webpack.config.js
================================================
module.exports = {
mode: 'development',
entry: './main.js',
output: {
filename: 'example.js'
},
module: {
rules: [{
test: /\.css$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'px2rem-loader',
// // options here
// options: {
// remUnit: 75,
// remPrecision: 8
// }
}]
}]
}
}
================================================
FILE: index.js
================================================
module.exports = require('./lib/px2rem-loader')
================================================
FILE: lib/px2rem-loader.js
================================================
var loaderUtils = require('loader-utils')
var Px2rem = require('px2rem')
module.exports = function (source) {
var options = loaderUtils.getOptions(this)
var px2remIns = new Px2rem(options)
return px2remIns.generateRem(source)
}
================================================
FILE: package.json
================================================
{
"name": "px2rem-loader",
"version": "0.1.9",
"description": "css post loader for px2rem",
"main": "index.js",
"scripts": {
"test": "mocha test.js --slow 2000"
},
"repository": {
"type": "git",
"url": "https://github.com/Jinjiang/px2rem-loader.git"
},
"keywords": [
"webpack",
"loader"
],
"author": "Jinjiang",
"license": "MIT",
"bugs": {
"url": "https://github.com/Jinjiang/px2rem-loader/issues"
},
"homepage": "https://github.com/Jinjiang/px2rem-loader",
"dependencies": {
"loader-utils": "^1.1.0",
"px2rem": "^0.5.0"
},
"devDependencies": {
"chai": "~3.0.0",
"mocha": "~2.2.5"
}
}
================================================
FILE: test.js
================================================
var expect = require('chai').expect
var loader = require('./lib/px2rem-loader')
describe('Loader', function () {
it('should transform px value into rem', function () {
var output = loader.call({}, 'body {width: 750px}')
expect(output).is.a('string')
expect(output).to.equal('body {\n width: 10rem;\n}')
})
})
describe('Transform Value Comment', function () {
it('should support `no` transform value comment', function () {
var output = loader.call({}, 'body {width: 750px; /*no*/}')
expect(output).is.a('string')
expect(output).to.equal('body {\n width: 750px;\n}')
})
it('should support `px` transform value comment', function () {
var output = loader.call({}, 'body {width: 750px; /*px*/}')
expect(output).is.a('string')
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}')
})
})
describe('Transform Media Query & Key Frames', function () {
it('should support @media', function () {
var output = loader.call({}, '@media only screen and (min-device-width: 360px) {body {width: 750px; height: 200px; /*px*/ border-width: 1px; /*no*/}}')
expect(output).is.a('string')
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}')
})
it('should support @keyframes', function () {
var output = loader.call({}, '@keyframes anim {0% {transform: none; height: 75px; border-width: 1px; /*no*/} 100% {transform: none; height: 150px; border-width: 2px; /*no*/}}')
expect(output).is.a('string')
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}')
})
})
describe('Loader Query', function () {
it('should support `remUnit` query', function () {
var output = loader.call({query: '?remUnit=64'}, 'body {width: 640px}')
expect(output).is.a('string')
expect(output).to.equal('body {\n width: 10rem;\n}')
})
it('should support `remUnit` query', function () {
var output = loader.call({query: '?remUnit=112.5'}, 'body {width: 640px}')
expect(output).is.a('string')
expect(output).to.equal('body {\n width: 5.688889rem;\n}')
})
it('should support `remPrecision` query', function () {
var output = loader.call({query: '?remPrecision=3'}, 'body {width: 1000px}')
expect(output).is.a('string')
expect(output).to.equal('body {\n width: 13.333rem;\n}')
})
it('should support `remUnit` & `remPrecision` query', function () {
var output = loader.call({query: '?remUnit=112.5&remPrecision=3'}, 'body {width: 640px}')
expect(output).is.a('string')
expect(output).to.equal('body {\n width: 5.689rem;\n}')
})
})
gitextract_717fc_tc/ ├── .gitignore ├── .travis.yml ├── README.md ├── examples/ │ ├── .gitignore │ ├── README.md │ ├── foo.css │ ├── index.html │ ├── main.js │ ├── package.json │ └── webpack.config.js ├── index.js ├── lib/ │ └── px2rem-loader.js ├── package.json └── test.js
Condensed preview — 14 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (9K chars).
[
{
"path": ".gitignore",
"chars": 549,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generated by jscov"
},
{
"path": ".travis.yml",
"chars": 33,
"preview": "language: node_js\nnode_js:\n- \"8\"\n"
},
{
"path": "README.md",
"chars": 1167,
"preview": "# px2rem-loader\n\na [webpack](http://webpack.github.io/) loader for [px2rem](https://github.com/songsiqi/px2rem)\n\n[![NPM "
},
{
"path": "examples/.gitignore",
"chars": 18,
"preview": "node_modules\ndist\n"
},
{
"path": "examples/README.md",
"chars": 326,
"preview": "# 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## Thi"
},
{
"path": "examples/foo.css",
"chars": 127,
"preview": "h1 {\n width: 480px; /*px*/\n padding: 0.5em 1em;\n font-size: 64px;\n border: 1px solid #333; /*no*/\n background: #eee"
},
{
"path": "examples/index.html",
"chars": 482,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <titl"
},
{
"path": "examples/main.js",
"chars": 19,
"preview": "import './foo.css'\n"
},
{
"path": "examples/package.json",
"chars": 397,
"preview": "{\n \"name\": \"px2rem-examples\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"webpack --watch\",\n "
},
{
"path": "examples/webpack.config.js",
"chars": 439,
"preview": "module.exports = {\n\n mode: 'development',\n\n entry: './main.js',\n output: {\n filename: 'example.js'\n },\n\n module:"
},
{
"path": "index.js",
"chars": 48,
"preview": "module.exports = require('./lib/px2rem-loader')\n"
},
{
"path": "lib/px2rem-loader.js",
"chars": 235,
"preview": "var loaderUtils = require('loader-utils')\nvar Px2rem = require('px2rem')\n\nmodule.exports = function (source) {\n var opt"
},
{
"path": "package.json",
"chars": 663,
"preview": "{\n \"name\": \"px2rem-loader\",\n \"version\": \"0.1.9\",\n \"description\": \"css post loader for px2rem\",\n \"main\": \"index.js\",\n"
},
{
"path": "test.js",
"chars": 3041,
"preview": "var expect = require('chai').expect\nvar loader = require('./lib/px2rem-loader')\n\ndescribe('Loader', function () {\n\n it("
}
]
About this extraction
This page contains the full source code of the Jinjiang/px2rem-loader GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 14 files (7.4 KB), approximately 2.6k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.