SassNinja / postcss-extract-media-query

PostCSS plugin to extract all media query from CSS and emit as separate files.
MIT License
130 stars 20 forks source link

Multiple media queries into one file. #9

Closed emptimd closed 5 years ago

emptimd commented 5 years ago

Here is my config const path = require('path');

    'postcss-extract-media-query': {
        output: {
            path: path.join(__dirname, 'css')
        },
        queries: {
            'only screen and (min-width:768px) and (max-width:958px), only screen and (min-width:480px) and (max-width:700px)': 'desktop',
            'only screen and (max-width:480px)': 'mobile'
        },
        whitelist: true,
        combine: true
    }

If i have ONLY one media query per file. it works great. ex only screen and (min-width:768px) and (max-width:958px) or only screen and (min-width:480px) and (max-width:700px).

But when i try to use them both, to be placed into desktop.css this dosen't work. What could be the problem? Thank you.

emptimd commented 5 years ago

Oh OK. I've found the response in you'r webpack plugin. https://github.com/SassNinja/media-query-plugin

The Correct queries for my case should be:

    'postcss-extract-media-query': {
        output: {
            path: path.join(__dirname, 'css')
        },
        queries: {
            'only screen and (min-width:768px) and (max-width:958px)': 'desktop',
            'only screen and (min-width:480px) and (max-width:700px)': 'desktop',
            'only screen and (max-width:479px)': 'mobile'
        },
        whitelist: true,
        combine: false
    }
emptimd commented 5 years ago

Thank you for this great package. It's exactly what i was looking for, you deserve a lot more stars.