PostCSS Export Custom Media

PostCSS Export Custom Media lets you export custom media queries from CSS to JavaScript by :export selectors.

Installation

$ yarn add postcss-custom-media

or

$ npm install postcss-custom-media

Usage

:root {
  @custom-media --medium (min-width: 1024px);
}

:export {
  _mediumQuery: export-custom-media(--medium);
}

.foo {
  width: 100%;
  @media (--medium) {
    width: 80%;
  }
}

you will get:

:root {
  @custom-media --medium (min-width: 1024px);
}

:export {
  _mediumQuery: (min-width: 1024px);
}

.foo {
  width: 100%;
  @media (--medium) {
    width: 80%;
  }
}