PostCSS Update Media Queries

PostCSS plugin to generate and update media queries for functional CSS (Tachyons FTW).

Input

.underline    { text-decoration: underline; }

Output

.underline { text-decoration: underline; }

@media (--breakpoint-not-small) {
 .underline-ns { text-decoration: underline; }
}

@media (--breakpoint-medium) {
 .underline-m { text-decoration: underline; }
}

Usage

const updateMediaQuerie = require('postcss-update-media-queries')

// Array structure for media queries
let medias = [
    {name: '(--breakpoint-not-small)', alias: '-ns' },
    {name: '(--breakpoint-medium)', alias: '-m' }
]

postcss([ updateMediaQuerie({
    medias: medias,
    overwrite: false // Per default, the script don't overwrite the existed media queries in the file
    }) ]).process(input.css)

Look at tachyons-bulild-mediaqueries to learn more