@liuwenkiii/postcss-px2vw

PostCSS Px2vw

NOTE: The project is in the testing stage, if you need more stable functionality, see postcss-px-to-viewport

PostCSS plugin convert px to viewport.

.foo {
  width: 100px;
}

.foo {
  /* viewport width = 1080px */
  width: 9.259259vw;
}

Usage

Step 1: Install plugin:

npm install --save-dev postcss postcss-px2vw

Step 2: Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Step 3: Add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-px2vw'),
    require('autoprefixer')
  ]
}

Options

// These are the default options
{
  viewportWidth: 1080,
  precision: 6,
  minPixelValue: 1,
  excludeProp: [],
  excludeFile: [],
  specific: [],
}

• viewportWidth (Number) The width of the viewport.
• precision (Number) The decimal numbers to allow the vw units to grow to.
• minPixelValue (Number) Set the minimum pixel value to replace.
• excludeProp (Array of String) Expected css props.
• excludeFile (Array of Regexp) Expected files.
• specific (Array) A list that allows you to use regular expressions to match file paths to set a special viewport width.