How to use postcss-custom-media - 3 common examples

// Fix up CSS gradients with transparency for older browsers
    // https://github.com/gilmoreorless/postcss-gradient-transparency-fix
    gradientTransparencyFix,

    // Tries to fix all of flexbug's issues
    // https://github.com/luisrudge/postcss-flexbugs-fixes
    flexbugsFixes,

    // Writing simple and graceful Media Queries!
    // Support for CSS Media Queries Level 4: https://drafts.csswg.org/mediaqueries/#mq-range-context
    // https://github.com/postcss/postcss-media-minmax
    mediaMinmax,

    // Custom Media Queries
    // https://github.com/postcss/postcss-custom-media
    customMedia(),

    // Adds new pseudo-elements to inputs for easy cross-browser styling of their inner elements.
    // https://github.com/seaneking/postcss-input-style
    inputStyles,

    // Fallback for Webkit Filters property to SVG filters. Amazing stuff.
    // It converts all 10 CSS shorthand filters:
    // grayscale, sepia, saturate, hue-rotate, invert, opacity, brightness, contrast, blur, drop-shadow
    // https://github.com/iamvdo/pleeease-filters
    filters(),

    // Use shorthand transform properties in CSS
    // https://github.com/jonathantneal/postcss-transform-shortcut
    transform,

    // Transform :matches() W3C CSS pseudo class to more compatible CSS (simpler selectors)

if (style.hasOwnProperty('variables')) {
        use.push(postcssAdvancedVars({
          variables: style.variables
        }))
        use.push(postcssCustomProps(style.variables))
      } else {
        use.push(postcssAdvancedVars())
        use.push(postcssCustomProps())
      }
      cssHashes[ hash ] = {}

      let viewports = this.getViewports()
      if (style.hasOwnProperty('viewports')) {
        viewports = style.viewports
      }
      use.push(postcssMedia({
        importFrom: { customMedia: viewports }
      }))

      if (style.path) {
        use.push(postcssPrefixUrl({
          useUrl: true,
          prefix: style.path
        }))
      }
      use = use.concat(mainPlugins)
      return iterations.push(postcss(use).process(style.src, { from: undefined }).then((result) => {
        let resultCss = result && result.css ? result.css : ''
        cssHashes[ hash ].result = resultCss
        return resultCss
      }).catch((result) => {
        window.console && window.console.warn && window.console.warn('Failed to compile css', style, result)

let stylePromise = new Promise((resolve, reject) => {
      postcss()
        .use(postcssMedia({ extensions: viewPortBreakpoints }))
        .process(rowColumn.getCss(this.getColumn()))
        .then((result) => {
          resolve(result.css)
        })
    })
    iterations.push(stylePromise)