{"id":22879335,"url":"https://github.com/anthinkingcoder/gulp-viewport-units","last_synced_at":"2025-10-27T13:36:31.600Z","repository":{"id":96074703,"uuid":"141268800","full_name":"anthinkingcoder/gulp-viewport-units","owner":"anthinkingcoder","description":"Automatically append content property for viewport-units-buggyfill","archived":false,"fork":false,"pushed_at":"2018-07-18T08:41:05.000Z","size":153,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-31T14:45:45.762Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/anthinkingcoder.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-17T09:47:52.000Z","updated_at":"2018-12-12T10:30:41.000Z","dependencies_parsed_at":"2023-04-04T01:32:17.786Z","dependency_job_id":null,"html_url":"https://github.com/anthinkingcoder/gulp-viewport-units","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/anthinkingcoder/gulp-viewport-units","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthinkingcoder%2Fgulp-viewport-units","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthinkingcoder%2Fgulp-viewport-units/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthinkingcoder%2Fgulp-viewport-units/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthinkingcoder%2Fgulp-viewport-units/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anthinkingcoder","download_url":"https://codeload.github.com/anthinkingcoder/gulp-viewport-units/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anthinkingcoder%2Fgulp-viewport-units/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262044445,"owners_count":23249749,"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-12-13T16:38:58.410Z","updated_at":"2025-10-27T13:36:26.552Z","avatar_url":"https://github.com/anthinkingcoder.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gulp-viewport-units\nA gulp plugin, Automatically append content property for viewport-units-buggyfill.See [viewport-units-buggyfill](https://github.com/rodneyrehm/viewport-units-buggyfill)\n\n# Install\n\n```\nnpm install gulp-viewport-units --save-dev\n```\n\n# Basic Usage\n\n```javascript\n'use strict';\n\nconst gulp = require('gulp');\nconst viewportUnits = require('gulp-viewport-units')\n\ngulp.task('css', function () {\n    gulp.src('./css/**/*.css')\n        .pipe(viewportUnits())\n        .pipe(gulp.dest('./css/dist'));\n});\n```\nif only progress calc\n```javascript\n  gulp.task('css', function () {\n      gulp.src('./css/**/*.css')\n          .pipe(viewportUnits({onlyCalc:true}))\n          .pipe(gulp.dest('./css/dist'));\n  });\n```\nYou can choose to deal with the specified viewport units\n```javascript\n  gulp.task('css', function () {\n      gulp.src('./css/**/*.css')\n          .pipe(viewportUnits({viewportUnits:['vw']}))\n          .pipe(gulp.dest('./css/dist'));\n  });\n```\n\nYou can filter out selectors that do not need to be processed,like blacklist.\n```javascript\n  gulp.task('css', function () {\n      gulp.src('./css/**/*.css')\n          .pipe(viewportUnits({selectorBlackList:['.notSelector']}))\n          .pipe(gulp.dest('./css/dist'));\n  });\n```\nexamples:\n```css\n  /*before transform*/\n  \n  .notSelector {\n      width: 20vw;\n  }\n  .demo,.demo1 .notSelector{\n      background-color: red;\n      margin: 10vw;\n  }\n  \n  .notSelector .demo1 {\n      padding: 10vw;\n  }\n  /*after transform*/\n  \n  .notSelector {\n      width: 20vw;\n  }\n  .demo, .demo1 .notSelector {\n      background-color: red;\n      margin: 10vw;\n  }\n  .demo {\n      content: \"viewport-units-buggyfill;margin:10vw\";\n  }\n  .notSelector .demo1 {\n      padding: 10vw;\n      content: \"viewport-units-buggyfill;padding:10vw\";\n  }\n  \n```\n\n## options\n```javascript\n var defalutOptions = {\n    onlyCalc: false,                             //if true,only progress calc()\n    viewportUnits: ['vw', 'vh', 'vmax', 'vmin'], //viewport units array what viewport units can be progress\n    selectorBlackList: []                        //An Selector array that will not be processed\n }\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthinkingcoder%2Fgulp-viewport-units","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanthinkingcoder%2Fgulp-viewport-units","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthinkingcoder%2Fgulp-viewport-units/lists"}