{"id":15285933,"url":"https://github.com/skyvow/postcss-pxtorem-exclude","last_synced_at":"2025-10-07T01:30:27.864Z","repository":{"id":57328388,"uuid":"218930087","full_name":"skyvow/postcss-pxtorem-exclude","owner":"skyvow","description":"Convert pixel units to rem (root em) units using PostCSS","archived":false,"fork":true,"pushed_at":"2019-11-01T07:21:39.000Z","size":58,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-01-14T18:58:49.916Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"cuth/postcss-pxtorem","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skyvow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-01T06:53:59.000Z","updated_at":"2023-03-04T06:05:12.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/skyvow/postcss-pxtorem-exclude","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyvow%2Fpostcss-pxtorem-exclude","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyvow%2Fpostcss-pxtorem-exclude/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyvow%2Fpostcss-pxtorem-exclude/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyvow%2Fpostcss-pxtorem-exclude/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skyvow","download_url":"https://codeload.github.com/skyvow/postcss-pxtorem-exclude/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235569499,"owners_count":19011184,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-30T15:08:36.456Z","updated_at":"2025-10-07T01:30:22.538Z","avatar_url":"https://github.com/skyvow.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-pxtorem-exclude [![NPM version](https://badge.fury.io/js/postcss-pxtorem-exclude.svg)](http://badge.fury.io/js/postcss-pxtorem-exclude)\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-exclude --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-exclude');\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    exclude: null,\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}\n```\n\n- `exclude` (RegExp) Files to exclude. Example: `/node_modules|folder_name/i`\n- `rootValue` (Number) The root element font size.\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\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-exclude');\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-exclude` but still accepted by browsers\n.ignore {\n    border: 1Px solid; // ignored\n    border-width: 2PX; // ignored\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskyvow%2Fpostcss-pxtorem-exclude","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskyvow%2Fpostcss-pxtorem-exclude","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskyvow%2Fpostcss-pxtorem-exclude/lists"}