PostCSS Variable Media

PostCSS plugin that allows for defining custom at-rules to represent media queries

/* before */
@tablet {
    .selection {
        background: #fff;
    }
}
@desktop {
    .selection {
        background: #000;
    }
}
 
/* after */
@media (min-width: 768px) {
    .selection {
        background: #fff;
    }
}
@media (min-width: 1024px) {
    .selection {
        background: #000;
    }
}

Usage

postcss([ require('postcss-variable-media') ])

See PostCSS docs for examples for your environment.

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load PostCSS Variables as a PostCSS plugin:

postcss([
    require('postcss-variables')({ /* options */ })
]);

Options

breakpoints

Type: Object
Default: {}

Specifies breakpoint variables and pixel min-width values.

require('postcss-variable-media')({
    breakpoints: {
        tablet: 768,
        desktop: 1024
    }
});

consolidate

Type: boolean
Default: true

Merge repeated breakpoint declarations and append to end of document. If set to false, breakpoints will be converted to media queries in place.

Note: If needing to consolidate across multiple stylesheets, refer to css-mqpacker.

require('postcss-variable-media')({
    breakpoints: {
        tablet: 768
    },
    consolidate: true
});

@tablet {
    .block1 {
        background: #fff;
    }
}
@tablet {
    .block2 {
        font-size: 14px;
    }
}

@media (min-width: 768px) {
    .block1 {
        background: #fff;
    }
    .block2 {
        font-size: 14px;
    }
}