postcss-mediascope

postcss-mediascope

PostCSS plugin to declare postcss-advanced-variables for each media query.

This can be especially helpful for:

• css rules that should only be triggered for particular media query (e.g. for responsive grids);
• css declaration that should have different value for particular media query (e.g. adjusting font-size based on the screen size).

Usage

postcss([
    postcssMediascope([
        {
            query: 'only screen and (max-width: 500px)',
            variables: {
                color: 'red',
                media: 'phone'
            }
        },
        {
            query: 'only screen and (min-width: 501px) and (max-width: 900px)',
            variables: {
                color: 'blue',
                media: 'tablet'
            }
        }
    ]),
    postcssAdvancedVariables()
])

Running the following css code through postcssMediascope :

@mediascope {
    .$(media)-test {
        color: $color;
    }
}

produces intermediate result:

@media only screen and (max-width: 500px) {
    $color: red;
    $media: phone;
    .$(media)-test {
        color: $color;
    }
}
@media only screen and (min-width: 501px) and (max-width: 900px) {
    $color: blue;
    $media: tablet;
    .$(media)-test {
        color: $color;
    }
}

that then is processed through postcss-advanced-variables, so it becomes:

@media only screen and (max-width: 500px) {
    .phone-test {
        color: red;
    }
}
@media only screen and (min-width: 501px) and (max-width: 900px) {
    .tablet-test {
        color: blue;
    }
}