PostCSS configuration.

css-utilities.js

module.exports = {
  /**
   * Convert pixel values to rem values.
   *
   * @param {number} pixelValue
   *
   * @returns {string}
   */
  px2rem: (pixelValue) => {
    const remValue = pixelValue / 16;
    return `${remValue}rem`;
  },

  /**
   * Convert pixel values to em values.
   *
   * @param {number} pixelValue
   *
   * @returns {string}
   */
  px2em: (pixelValue) => {
    const emValue = pixelValue / 16;
    return `${emValue}em`;
  },
};

css-variables.js

const { px2em, px2rem } = require("./utilities/css-utilities");

module.exports = {
};

package.json

{
  "private": true,
  "devDependencies": {",
    "autoprefixer": "^9.8.6",
    "postcss-custom-media": "^7.0.8",
    "postcss-custom-selectors": "^5.1.2",
    "postcss-functions": "^3.0.0",
    "postcss-import": "^12.0.1",
    "postcss-media-minmax": "^4.0.0",
    "postcss-selector-matches": "^4.0.0",
    "postcss-selector-not": "^4.0.0",
    "postcss-simple-vars": "^5.0.2",
  }
}

postcss.config.js

const CSSUtilities = require("./source/utilities/css-utilities");
const CSSVariables = require("./source/css-variables");

module.exports = {
  /* eslint-disable import/no-extraneous-dependencies, global-require */
  plugins: [
    // Inlines stylesheets via`@import` (similiar to Sass).
    // @see https://github.com/postcss/postcss-import
    require("postcss-import"),

    // Transform W3C CSS level 5 custom media queries to W3C CSS level 3.
    // @see https://github.com/postcss/postcss-custom-media
    require("postcss-custom-media"),

    // Transform selector aliases (W3C CSS custom selectors) to standard
    // selectors.
    // @see https://github.com/postcss/postcss-custom-selectors
    require("postcss-custom-selectors"),

    // Support JavaScript functions within CSS (PostCSS).
    // @see https://github.com/andyjansson/postcss-functions
    require("postcss-functions")({
      functions: CSSUtilities,
    }),

    // Transform W3C CSS level 4 `:matches` pseudo class to W3C CSS level 3.
    // @see https://github.com/postcss/postcss-selector-matches
    require("postcss-selector-matches"),

    // Transform W3C CSS level 4 media queries minmax syntax to W3C CSS level 3.
    // @see https://github.com/postcss/postcss-media-minmax
    require("postcss-media-minmax"),

    // Transform W3C CSS level 4 `:not` pseudo class to W3C CSS level 3.
    // @see https://github.com/postcss/postcss-selector-not
    require("postcss-selector-not"),

    // Transform (Sass-like) variables to static values.
    // @see https://github.com/postcss/postcss-simple-vars
    require("postcss-simple-vars")({
      silent: true,
      variables: CSSVariables,
    }),

    // Apply vendor prefixes to CSS rules.
    // NOTE: Update browser targets in `.browserslistrc` configuration file.
    // @see https://github.com/postcss/autoprefixer
    require("autoprefixer"),
  ],
};