csstools/postcss-custom-media

Using extensions to define global breakpoints doesn't work

jolyonruss opened this issue · 6 comments

jolyonruss commented

My postcss.config.js looks like this:

require('postcss-custom-media')({
  '--bp1': '(min-width: 320px)',
  '--bp2': '(min-width: 760px)',
  '--bp3': '(min-width: 1200px)',
  '--bp4': '(min-width: 1760px)',
}),

My css looks like this:

...wrapping class definition
@media (--bp2) {
  display: inline-block;
}

The styles are simply ignore and not output.

Am I missing something?

jolyonruss commented

Ok, I think I've worked this out.

Am I right in thinking I need to have @custom-media --bp2; at the top of each css file?

If so this isn't super clear in the docs - happy to create a PR to add a bit more context to that section.

Semigradsky commented

Why you didn't provide option name?

require('postcss-custom-media')({
  extensions: {
    '--bp1': '(min-width: 320px)',
    '--bp2': '(min-width: 760px)',
    '--bp3': '(min-width: 1200px)',
    '--bp4': '(min-width: 1760px)'
  }
}),
jolyonruss commented

Because the documentation doesn't show that a key extentions: is required...

Is it?

  • 😕1
michaelprescott commented

Just started using this plugin and wrestled with this issue for a little while. Initially, I had the postcss-custom-media plugin listed after postcss-cssnext. After studying the plugins source I realized I needed to put the postcss-custom-media ahead of the other:

module.exports = {
  plugins: [
    require("postcss-custom-media")({
      extensions: {
        '--phone': '(min-width: 544px)',
        '--tablet': '(min-width: 768px)',
        '--desktop': '(min-width: 992px)',
        '--large-desktop': '(min-width: 1200px)',
      }
    }),
    require('postcss-cssnext')({ browsers: ['> 0.05%', 'IE 7'], cascade: false })
  ]
}
MoOx commented

postcss-cssnext include this plugin already.