{"id":15285921,"url":"https://github.com/meltifa/postcss-pixel-to-viewport","last_synced_at":"2025-04-13T02:41:37.378Z","repository":{"id":57328263,"uuid":"129039501","full_name":"meltifa/postcss-pixel-to-viewport","owner":"meltifa","description":"A CSS post-processor that converts px to viewport units.","archived":false,"fork":false,"pushed_at":"2018-04-19T22:22:48.000Z","size":16,"stargazers_count":12,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T09:21:34.058Z","etag":null,"topics":["pixel","postcss","postcss-plugin","px","vw"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/meltifa.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2018-04-11T05:35:12.000Z","updated_at":"2024-05-13T17:48:56.000Z","dependencies_parsed_at":"2022-09-18T17:22:49.675Z","dependency_job_id":null,"html_url":"https://github.com/meltifa/postcss-pixel-to-viewport","commit_stats":null,"previous_names":["meltifa/postcss-pixel-to-vw"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meltifa%2Fpostcss-pixel-to-viewport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meltifa%2Fpostcss-pixel-to-viewport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meltifa%2Fpostcss-pixel-to-viewport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meltifa%2Fpostcss-pixel-to-viewport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meltifa","download_url":"https://codeload.github.com/meltifa/postcss-pixel-to-viewport/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248182097,"owners_count":21060893,"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":["pixel","postcss","postcss-plugin","px","vw"],"created_at":"2024-09-30T15:08:29.838Z","updated_at":"2025-04-13T02:41:37.361Z","avatar_url":"https://github.com/meltifa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-pixel-to-viewport\n\nA plugin for [PostCSS](https://github.com/postcss/postcss) that generates viewport units (vw, vh, vmin, vmax) from pixel units.\n\n## Usage\n\nIf your project involves a fixed width, this script will help to convert pixels into viewport units.\n\n### Input/Output\n\n```css\n// input\n\n.class {\n  margin: -10px .5vh;\n  padding: 5vmin 9.5px 1px;\n  border: 3px solid black;\n  border-bottom-width: 1px;\n  font-size: 14px;/*on*/\n  line-height: 20px;/*off*/\n}\n\n.class2 {\n  border: 1px solid black;\n  margin-bottom: 1px;\n  font-size: 20px;\n  line-height: 30px;\n}\n\n@media (min-width: 750px) {\n  .class3 {\n    font-size: 16px;\n    line-height: 22px;\n  }\n}\n\n// output\n\n.class {\n  margin: -1.33333vmin .5vh;\n  padding: 5vmin 1.26667vmin 1px;\n  border: 0.4vmin solid black;\n  border-bottom-width: 1px;\n  font-size: 1.86667vmin;\n  line-height: 20px;\n}\n\n.class2 {\n  border: 1px solid black;\n  margin-bottom: 1px;\n  font-size: 2.66667vmin;\n  line-height: 4vmin;\n}\n\n@media (min-width: 750px) {\n  .class3 {\n    font-size: 2.13333vmin;\n    line-height: 2.93333vmin;\n  }\n}\n```\n\n### Example\n\n```js\n'use strict';\n\nvar fs = require('fs');\nvar postcss = require('postcss');\nvar px2viewport = require('..');\nvar css = fs.readFileSync('main.css', 'utf8');\nvar options = {\n  propertyBlacklist: ['font-size']\n};\nvar processedCss = postcss(px2viewport(options)).process(css).css;\n\nfs.writeFile('main-viewport.css', processedCss, function (err) {\n  if (err) {\n    throw err;\n  }\n  console.log('File with viewport units written.');\n});\n```\n\n### Options\n\nDefault:\n```js\n{\n  viewportWidth: 750,\n  viewportUnit: 'vmin',\n  propertyBlacklist: [],\n  minPixelValue: 2,\n  enableConvertComment: 'on',\n  disableConvertComment: 'off',\n  mediaQuery: false\n}\n```\n- `viewportWidth` (Number) The width of the viewport.\n- `viewportUnit` (String) Expected units.\n- `propertyBlacklist` (Array) The propertys to ignore and leave as px.\n    - If value is string, it checks to see if property contains the string.\n        - `['font']` will match `font-size`\n    - If value is regexp, it checks to see if the property matches the regexp.\n        - `[/^font$/]` will match `font` but not `font-size`\n- `minPixelValue` (Number) Set the minimum pixel value to replace.\n- `enableConvertComment` (String) content of comment for enable convert px unit before the declaration.\n- `disableConvertComment` (String) content of comment for disable convert px unit before the declaration.\n- `mediaQuery` (Boolean) Allow px to be converted in media queries.\n\n### Use comment to enable/disable convert px value for single declaration\n\n- `font-size: 14px;/*on*/` comment before the declaration will convert px to viewport unit, if `font-size` is in your property blacklist but you want to convert this single declaration.\n- `font-size: 14px;/*off*/` comment before the declaration will not convert px unit.\n\n### Use with gulp-postcss\n\n```js\nvar gulp = require('gulp');\nvar postcss = require('gulp-postcss');\nvar px2viewport = require('postcss-pixel-to-viewport');\n\ngulp.task('css', function () {\n  var processors = [\n    px2viewport({\n      viewportWidth: 750\n    })\n  ];\n  return gulp.src(['build/css/**/*.css'])\n    .pipe(postcss(processors))\n    .pipe(gulp.dest('build/css'));\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeltifa%2Fpostcss-pixel-to-viewport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeltifa%2Fpostcss-pixel-to-viewport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeltifa%2Fpostcss-pixel-to-viewport/lists"}