postcss-px-conversion

This is a PostCSS plugin that converts pixel units to viewport units (vw, vh, vmin, vmax). The code has been migrated from the original project evrone/postcss-px-to-viewport, as it is no longer maintained. This migrated code is compatible with the latest version of PostCSS.

Installation

To use this plugin, you'll need to have PostCSS set up in your project. If you haven't already, you can install PostCSS by running:

npm install postcss --save

Next, install the postcss-px-conversion plugin:

npm install postcss-px-conversion --save

Usage

To use this plugin in your PostCSS configuration, add it to your PostCSS plugins list, along with the desired configuration options.

Here's an example configuration in your postcss.config.js:

// postcss.config.js

module.exports = {
  plugins: {
    "postcss-px-conversion": {
      unitType: "px", // The unit to convert from (default is 'px')
      viewportWidth: 375,
      // Other configuration options...
    },
  },
};

Configuration Options

You can configure this plugin using various options:

• unitType: The unit to convert from (default is 'px').
• viewportWidth: The width of the viewport.
• unitPrecision: The number of decimal places for vw units.
• allowedProperties: List of CSS properties to convert to vw.
• excludedProperties: List of CSS properties to exclude from conversion.
• viewportUnit: The expected viewport unit (vw, vh, vmin, vmax).
• fontViewportUnit: The expected font viewport unit.
• selectorBlacklist: Selectors to ignore (strings or regular expressions).
• minPixelValue: Minimum pixel value to replace.
• allowMediaQuery: Allow px to vw conversion in media queries.
• replaceRules: Replace rules containing vw instead of adding fallbacks.
• excludeFiles: Files to ignore (as an array of regular expressions).
• includeFiles: Only convert matching files (as an array of regular expressions).
• enableLandscape: Add @media (orientation: landscape) for landscape mode.
• landscapeUnit: The expected unit for landscape mode.
• landscapeViewportWidth: Viewport width for landscape orientation.

Please adjust these options according to your project's requirements.

Example

Here's an example configuration that converts pixel values to vw units for a viewport width of 750 pixels:

// postcss.config.js

module.exports = {
  plugins: {
    "postcss-px-conversion": {
  		unitType: "px",
  		viewportWidth: 375,
  		unitPrecision: 5,
  		allowedProperties: ["*"],
  		excludedProperties: [],
  		viewportUnit: 'vw',
  		fontViewportUnit: 'vw',
  		selectorBlacklist: [],
  		minPixelValue: 1,
  		allowMediaQuery: false,
  		replaceRules: true,
  		excludeFiles: [],
  		includeFiles: [],
  		enableLandscape: false,
  		landscapeUnit: 'vw',
  		landscapeViewportWidth: 568,
    },
  },
};

With this configuration, any pixel values in your CSS will be automatically converted to viewport units during PostCSS processing.

Credits

Original code migrated from evrone/postcss-px-to-viewport.

If you have any questions or issues, please report them on GitHub Issues.

Happy coding!

License

MIT License © 2023-PRESENT Kirk Lin