Make Your Media Simple

PostCSS plugin postcss-simple-media.

All styles properties declared after the media property to the end of the rule or to the next media property, will be placed in the media query with the specified parameters

Install

npm install --save-dev postcss-simple-media

or

npm -D HeadMad/postcss-simple-media

Exemple

/*** Before ***/
.box {
  width: 20%;

  media: 960-;
  width: 25%;

  media: 560-800;
  width: 50%;

  media: 380+;
  width: 100%;
}

/*** After ***/
.box {
  width: 20%;
}

@media (max-width: 960px) {
  .box {
    width: 25%;
  }
}

@media (min-width: 560px) and (max-width: 800px) {
  .box {
    width: 50%;
  }
}

@media (min-width: 380px) {
  .box {
    width: 100%;
  }
}

Some rules

For value of media-property you can use standart syntax CSS media-query params, or shortcodes with next rules:

• Space between the parameters will be replaced with a keyword and
• Exclamation mark (!) will be replaced with a keyword not
• Renge of widths mast be without spaces: 560-1200 not 560 - 1200

More Exemples

| media: | @media | |:-------------------------|:------------------------------------------| | 1200 | (width: 1200px) | | 1600- | (max-width: 1600px) | | 860+ | (min-width: 860px) | | 380-960 | (min-width: 380px) and (min-width: 960px) | | 960-380 | (min-width: 380px) and (min-width: 960px) | | all 960- | all and (max-width: 960px) | | (orientation: landscape) | (orientation: landscape) | | only screen, !print | only screen, not print |

Usage

Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you already use PostCSS, add the plugin to plugins list:

const simpleMedia = require('postcss-simple-media')

module.exports = {
  plugins: [
    simpleMedia
  ]
}

If you whant use another word of property, not media: Just pass in plugin argument object width field prop, and value that you whant. Value can be String or Regular Expression

const simpleMedia = require('postcss-simple-media')

module.exports = {
  plugins: [
    simpleMedia({prop: 'simple-media'})
  ]
}

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

License

MIT