postcss-pxtovw

A plugin for PostCSS that generates vw units from pixel units.

Install

npm i @lihaochen/postcss-pxtovw -D

Setup

// postcss.config.js
module.exports = {
  plugins: {
    '@lihaochen/postcss-pxtovw': {}
  }
}

Input/Output

/* input */
h1 {
  margin: 0 0 20px;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 1px;
}

/* output */
h1 {
  margin: 0 0 5.33333vw;
  font-size: 8.53333vw;
  line-height: 1.2;
  letter-spacing: 1px;
}

Options

• viewportWidth(number): The width of the viewport, default value is 375.
• unitPrecision(number): The decimal numbers to allow the vw units to grow to, default value is 5.
• minPixelValue(number): Set the minimum pixel value to replace, default value is 1.
• include(Rule[]): Only matching files will be converted, default value is [/.*/].
• exclude(Rule[]): Ignore matching files like 'node_modules', default value is [].
• includeProps(Rule[]): Only matching properies will be converted, default value is [/.*/].
• excludeProps(Rule[]): Ignore matching properies like 'font-size', default value is [].
• includeSelectors(Rule[]): Only matching selectors will be converted, default value is [/.*/].
• excludeSelectors(Rule[]): Ignore matching selectors like '.ignore', default value is [].
• mediaQuery(boolean): Allow px to be converted in media queries.

The type Rule is defined as type Rule = string | RegExp | Function.

• string: Include given value, like String.prototype.includes.
• RegExp: By regular matching.
• Function: When the return value is true, matching.

Examples

Set reference value

// postcss.config.js
module.exports = {
  plugins: {
    '@lihaochen/postcss-pxtovw': {
      viewportWidth: 750,
      unitPrecision: 3,
      minPixelValue: 1
    }
  }
}

Process specified file

// postcss.config.js
module.exports = {
  plugins: {
    '@lihaochen/postcss-pxtovw': {
      // Only process files containing the 'src/views/mobile' path.
      include: ['src/views/mobile'],
      // Do not process files containing the 'node_modules' path.
      exclude: ['node_modules']
    }
  }
}

Process specified properties

// postcss.config.js
module.exports = {
  plugins: {
    '@lihaochen/postcss-pxtovw': {
      // Only process properies containing the 'font' name, like 'font-size'.
      includeProps: ['font'],
      // Do not process properies containing the 'margin' name, like 'margin'/'margin-top'/'margin-bottom'.
      includeProps: ['margin']
    }
  }
}

Process specified selectors

// postcss.config.js
module.exports = {
  plugins: {
    '@lihaochen/postcss-pxtovw': {
      // Only process selectors containing the 'src/views/mobile' name, like '.mobile'/'.mobile-title'.
      includeSelectors: ['mobile'],
      // Do not process selectors containing the 'ignore' name, like '.ignore'/'.ignore-rule'.
      includeSelectors: ['node_modules']
    }
  }
}

Ignore by comment

Input

/* pxtovw-ignore */
.rule {
  width: 20px;
  height: 20px;
  font-size: 15px;
}
.rule {
  width: 20px;
  height: 20px;
  /* pxtovw-ignore */
  font-size: 15px;
}

Output

.rule {
  width: 20px;
  height: 20px;
  font-size: 15px;
}
.rule {
  width: 5.33333vw;
  height: 5.33333vw;
  font-size: 15px;
}

Thanks

• postcss-pxtorem
• postcss-px-to-viewport
• vite
• vitest