Skip to content

A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. supports escaping from compiling specific files.

License

Notifications You must be signed in to change notification settings

nikli2009/postcss-px-to-viewport

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

postcss-px-to-viewport-nl

NPM Version NPM Downloads

A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units.

Installation

Via NPM

npm install postcss-px-to-viewport-nl -S

Usage

If your project involves a fixed width, this script will help to convert pixels into viewport units.

Use in Nuxt.js

build: {
    postcss: {
      plugins: {
        'postcss-px-to-viewport-nl': {
          unitToConvert: 'px',
          viewportWidth: 375,
          // viewportHeight: 568, // not now used; TODO: need for different units and math for different properties
          unitPrecision: 5,
          viewportUnit: 'vw',
          fontViewportUnit: 'vw',  // vmin is more suitable.
          filePathBlackList: ['index/sections', 'pages/index.vue'],
          minPixelValue: 1,
          mediaQuery: false
        }
      }
    }
}

Input/Output

// input

.class {
  margin: -10px .5vh;
  padding: 5vmin 9.5px 1px;
  border: 3px solid black;
  border-bottom-width: 1px;
  font-size: 14px;
  line-height: 20px;
}

.class2 {
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 20px;
  line-height: 30px;
}

@media (min-width: 750px) {
  .class3 {
    font-size: 16px;
    line-height: 22px;
  }
}

// output

.class {
  margin: -3.125vw .5vh;
  padding: 5vmin 2.96875vw 1px;
  border: 0.9375vw solid black;
  border-bottom-width: 1px;
  font-size: 4.375vw;
  line-height: 6.25vw;
}

.class2 {
  border: 1px solid black;
  margin-bottom: 1px;
  font-size: 6.25vw;
  line-height: 9.375vw;
}

@media (min-width: 234.375vw) {
  .class3 {
    font-size: 5vw;
    line-height: 6.875vw;
  }
}

Example

'use strict';

var fs = require('fs');
var postcss = require('postcss');
var pxToViewport = require('..');
var css = fs.readFileSync('main.css', 'utf8');
var options = {
    replace: false
};
var processedCss = postcss(pxToViewport(options)).process(css).css;

fs.writeFile('main-viewport.css', processedCss, function (err) {
  if (err) {
    throw err;
  }
  console.log('File with viewport units written.');
});

Options

Default:

{
  unitToConvert: 'px',
  viewportWidth: 320,
  viewportHeight: 568, // not now used; TODO: need for different units and math for different properties
  unitPrecision: 5,
  viewportUnit: 'vw',
  fontViewportUnit: 'vw',  // vmin is more suitable.
  filePathBlackList: [],
  minPixelValue: 1,
  mediaQuery: false
}
  • unitToConvert (String) unit to convert, by default, it is px.

  • viewportWidth (Number) The width of the viewport.

  • viewportHeight (Number) The height of the viewport.

  • unitPrecision (Number) The decimal numbers to allow the REM units to grow to.

  • viewportUnit (String) Expected units.

  • fontViewportUnit (String) Expected units for font.

  • filePathBlackList (Array) The selectors to ignore and leave as px.

    • ['/home/', '/contact-us/']
      • [/home/ will match every file which filepath contains '/home/', like '/your-repository/project/src/home/index.vue' or '/your-repository/project/src/home/index.scss'
  • minPixelValue (Number) Set the minimum pixel value to replace.

  • mediaQuery (Boolean) Allow px to be converted in media queries.

Use with gulp-postcss

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtoviewport = require('postcss-px-to-viewport');

gulp.task('css', function () {

    var processors = [
        pxtoviewport({
            viewportWidth: 320,
            viewportUnit: 'vmin'
        })
    ];

    return gulp.src(['build/css/**/*.css'])
        .pipe(postcss(processors))
        .pipe(gulp.dest('build/css'));
});

About

A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. supports escaping from compiling specific files.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 79.7%
  • CSS 20.3%