postcss-transform-pxvw

The plugin allows you use exact pixels from a design markup and get in result a responsive layout. It's very helpful for pixel perfect.

There is new pxvw(val: number, pageWidth?: number) function. See example below:

Example

CSS in your source:

.selector {
  /* It means "At 1024 page width it should be exact 150 pixels" */
  width: pxvw(150, 1024);
  /* It means "At 1024 page width:
      margin-top: 100px;
      margin-bottom: 150px;
      margin-left: 249px;
      And on any width:
      margin-right: 21px"
   */
  margin: pxvw(100, 1024) 21px pxvw(150, 1024) pxvw(249, 1024);
}

CSS after transform:

.selector {
  width: 14.6484vw;
  margin: 9.7656vw 21px 14.6484vw 24.3164vw;
}

It also works with less and sass. Includes its variables.

See more examples at tests cases.

Installation

Download package

For NPM users:

npm i postcss-transform-pxvw --save-dev

or if you using Yarn:

yarn add postcss-transform-pxvw -D

Add to your toolchain

postcss([
  require("postcss-transform-pxvw")({
    // ...options here
  })
]);

See PostCSS docs for examples for your environment.

Options