{"_id":"@alicd/cone-postcss-pxtorem","_rev":"4-28866a1c16ddf1b94ccfd89a653be597","name":"@alicd/cone-postcss-pxtorem","dist-tags":{"latest":"5.1.2"},"versions":{"5.1.2":{"name":"@alicd/cone-postcss-pxtorem","version":"5.1.2","keywords":["css","rem","pixel","px","postcss","postcss-plugin"],"author":{"name":"juntao.wjt"},"license":"MIT","_id":"@alicd/cone-postcss-pxtorem@5.1.2","maintainers":[{"name":"cismous","email":"251250076@qq.com"},{"name":"juntao.wjt","email":"juntao.wjt@alibaba-inc.com"},{"name":"xiongqi","email":"xiongqi.me@foxmail.com"},{"name":"mingche_286130","email":"guoli.ygl@cainiao.com"},{"name":"joshuasui","email":"joshuasui@163.com"},{"name":"mmpc","email":"maopengcheng1994@gmail.com"},{"name":"0little","email":"littlehmy@163.com"},{"name":"yf871020","email":"yf871020@163.com"},{"name":"zyy7259","email":"zyy7259@gmail.com"},{"name":"later_7","email":"tony7leek@gmail.com"},{"name":"qijian1990","email":"775710651@qq.com"},{"name":"gepik","email":"xiekaif@163.com"},{"name":"jimmyxuster","email":"yanzhe.xyz@alibaba-inc.com"},{"name":"helloljq","email":"laijianqing@gmail.com"},{"name":"rentj1","email":"rentj1@163.com"},{"name":"js8zq332","email":"zhangqing332@live.com"},{"name":"xiaobc","email":"527710279@qq.com"}],"homepage":"https://github.com/cuth/postcss-pxtorem#readme","bugs":{"url":"https://github.com/cuth/postcss-pxtorem/issues"},"dist":{"shasum":"b62b295bd7a53db9df0e7e33af1ab6d83be7247e","tarball":"https://registry.npmjs.org/@alicd/cone-postcss-pxtorem/-/cone-postcss-pxtorem-5.1.2.tgz","fileCount":8,"integrity":"sha512-VUoMlGA+T/xzAeLUbAUoYHuvdhTYqaLOA136IcHVxiV2OL/vMc/YyiQAYG2d59CeU9uTmDbngjx/sP89DRRXKQ==","signatures":[{"sig":"MEQCIHTpvA8J3SavcNYuwZxAu5910HXmktY+1vHzOxaVh7M6AiBf1eoxo63InEWEvU/RAvgzFnBTA07/UVQ0EuJQXlRQBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":29455},"main":"index.js","husky":{"hooks":{"pre-commit":"lint-staged"}},"gitHead":"a609b10748a46576afba1bfa79210c95c98983d7","scripts":{"lint":"eslint .","test":"jasmine-node spec"},"_npmUser":{"name":"juntao.wjt","email":"juntao.wjt@alibaba-inc.com"},"repository":{"url":"git+ssh://git@github.com/cuth/postcss-pxtorem.git","type":"git"},"_npmVersion":"8.19.4","description":"A CSS post-processor that converts px to rem.","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write"]},"_nodeVersion":"16.20.0","dependencies":{"postcss":"^7.0.27"},"publishConfig":{"registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^4.2.3","eslint":"^6.8.0","prettier":"^1.19.1","lint-staged":"^10.0.8","jasmine-node":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/cone-postcss-pxtorem_5.1.2_1684489718429_0.7692946430716587","host":"s3://npm-registry-packages"}}},"time":{"created":"2023-05-19T09:48:38.366Z","modified":"2024-07-15T07:13:57.128Z","5.1.2":"2023-05-19T09:48:38.570Z"},"bugs":{"url":"https://github.com/cuth/postcss-pxtorem/issues"},"author":{"name":"juntao.wjt"},"license":"MIT","homepage":"https://github.com/cuth/postcss-pxtorem#readme","keywords":["css","rem","pixel","px","postcss","postcss-plugin"],"repository":{"url":"git+ssh://git@github.com/cuth/postcss-pxtorem.git","type":"git"},"description":"A CSS post-processor that converts px to rem.","maintainers":[{"email":"hahaiwin@163.com","name":"hahaiwin"},{"email":"1149518004@qq.com","name":"snowden_"},{"email":"1312065793@qq.com","name":"vincent.ljq"},{"email":"595620510@qq.com","name":"zhen.hz"},{"email":"251250076@qq.com","name":"cismous"},{"email":"juntao.wjt@alibaba-inc.com","name":"juntao.wjt"},{"email":"xiongqi.me@foxmail.com","name":"xiongqi"},{"email":"guoli.ygl@cainiao.com","name":"mingche_286130"},{"email":"joshuasui@163.com","name":"joshuasui"},{"email":"maopengcheng1994@gmail.com","name":"mmpc"},{"email":"littlehmy@163.com","name":"0little"},{"email":"yf871020@163.com","name":"yf871020"},{"email":"zyy7259@gmail.com","name":"zyy7259"},{"email":"tony7leek@gmail.com","name":"later_7"},{"email":"775710651@qq.com","name":"qijian1990"},{"email":"xiekaif@163.com","name":"gepik"},{"email":"yanzhe.xyz@alibaba-inc.com","name":"jimmyxuster"},{"email":"laijianqing@gmail.com","name":"helloljq"},{"email":"rentj1@163.com","name":"rentj1"},{"email":"zhangqing332@live.com","name":"js8zq332"},{"email":"527710279@qq.com","name":"xiaobc"}],"readme":"# postcss-pxtorem [![NPM version](https://badge.fury.io/js/postcss-pxtorem.svg)](http://badge.fury.io/js/postcss-pxtorem)\n\nA plugin for [PostCSS](https://github.com/ai/postcss) that generates rem units from pixel units.\n\n## Install\n\n```shell\n$ npm install postcss-pxtorem --save-dev\n```\n\n## Usage\n\nPixels are the easiest unit to use (*opinion*). The only issue with them is that they don't let browsers change the default font size of 16. This script converts every px value to a rem from the properties you choose to allow the browser to set the font size.\n\n\n### Input/Output\n\n*With the default settings, only font related properties are targeted.*\n\n```css\n// input\nh1 {\n    margin: 0 0 20px;\n    font-size: 32px;\n    line-height: 1.2;\n    letter-spacing: 1px;\n}\n\n// output\nh1 {\n    margin: 0 0 20px;\n    font-size: 2rem;\n    line-height: 1.2;\n    letter-spacing: 0.0625rem;\n}\n```\n\n### Example\n\n```js\nvar fs = require('fs');\nvar postcss = require('postcss');\nvar pxtorem = require('postcss-pxtorem');\nvar css = fs.readFileSync('main.css', 'utf8');\nvar options = {\n    replace: false\n};\nvar processedCss = postcss(pxtorem(options)).process(css).css;\n\nfs.writeFile('main-rem.css', processedCss, function (err) {\n  if (err) {\n    throw err;\n  }\n  console.log('Rem file written.');\n});\n```\n\n### options\n\nType: `Object | Null`  \nDefault:\n```js\n{\n    rootValue: 16,\n    unitPrecision: 5,\n    propList: ['font', 'font-size', 'line-height', 'letter-spacing'],\n    selectorBlackList: [],\n    replace: true,\n    mediaQuery: false,\n    minPixelValue: 0,\n    exclude: /node_modules/i\n}\n```\n\n- `rootValue` (Number | Function) Represents the root element font size or returns the root element font size based on the [`input`](https://api.postcss.org/Input.html) parameter\n- `unitPrecision` (Number) The decimal numbers to allow the REM units to grow to.\n- `propList` (Array) The properties that can change from px to rem.\n    - Values need to be exact matches.\n    - Use wildcard `*` to enable all properties. Example: `['*']`\n    - Use `*` at the start or end of a word. (`['*position*']` will match `background-position-y`)\n    - Use `!` to not match a property. Example: `['*', '!letter-spacing']`\n    - Combine the \"not\" prefix with the other prefixes. Example: `['*', '!font*']` \n- `selectorBlackList` (Array) The selectors to ignore and leave as px.\n    - If value is string, it checks to see if selector contains the string.\n        - `['body']` will match `.body-class`\n    - If value is regexp, it checks to see if the selector matches the regexp.\n        - `[/^body$/]` will match `body` but not `.body`\n- `replace` (Boolean) Replaces rules containing rems instead of adding fallbacks.\n- `mediaQuery` (Boolean) Allow px to be converted in media queries.\n- `minPixelValue` (Number) Set the minimum pixel value to replace.\n- `exclude` (String, Regexp, Function) The file path to ignore and leave as px.\n    - If value is string, it checks to see if file path contains the string.\n        - `'exclude'` will match `\\project\\postcss-pxtorem\\exclude\\path`\n    - If value is regexp, it checks to see if file path matches the regexp.\n        - `/exclude/i` will match `\\project\\postcss-pxtorem\\exclude\\path`\n    - If value is function, you can use exclude function to return a true and the file will be ignored.\n        - the callback will pass the file path as  a parameter, it should returns a Boolean result.\n        - `function (file) { return file.indexOf('exclude') !== -1; }`\n\n### Use with gulp-postcss and autoprefixer\n\n```js\nvar gulp = require('gulp');\nvar postcss = require('gulp-postcss');\nvar autoprefixer = require('autoprefixer');\nvar pxtorem = require('postcss-pxtorem');\n\ngulp.task('css', function () {\n\n    var processors = [\n        autoprefixer({\n            browsers: 'last 1 version'\n        }),\n        pxtorem({\n            replace: false\n        })\n    ];\n\n    return gulp.src(['build/css/**/*.css'])\n        .pipe(postcss(processors))\n        .pipe(gulp.dest('build/css'));\n});\n```\n\n### A message about ignoring properties\nCurrently, the easiest way to have a single property ignored is to use a capital in the pixel unit declaration.\n\n```css\n// `px` is converted to `rem`\n.convert {\n    font-size: 16px; // converted to 1rem\n}\n\n// `Px` or `PX` is ignored by `postcss-pxtorem` but still accepted by browsers\n.ignore {\n    border: 1Px solid; // ignored\n    border-width: 2PX; // ignored\n}\n```\n","readmeFilename":"README.md"}