PostCSS Help Media Queries

PostCSS Help Media Queries lets you see information about the active breakpoint (media query), screen density and orientation displayed in a tooltip. All generated by CSS.

Add the following at-rule at the top of your CSS to include the help-media-queries tooltip.

@help-media-queries;

Usage

Add PostCSS Help Media Queries to your project:

npm install postcss-help-media-queries --save-dev

Use PostCSS Help Media Queries to process your CSS:

const postcssHelpMediaQueries = require('postcss-help-media-queries');

postcssHelpMediaQueries.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssHelpMediaQueries = require('postcss-help-media-queries');

postcss([
  postcssHelpMediaQueries(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Help Media Queries runs in all Node environments, with special instructions for:

Node	PostCSS CLI	Webpack	Create React App	Gulp	Grunt

Options

breakpoints object

Define the custom min-width breakpoints to watch and show inside the tooltip.

postcssHelpMediaQueries({
  breakpoints: {
    extraSmall: '30em',
    small: '48em',
    medium: '60em',
    large: '80em',
    extraLarge: '100em',
    // Other breakpoints..
  }
})