kiforks/media-query-nesting

The rule due to which only style properties can be inside the media query

Installation

npm install kiforks/media-query-nesting --save-dev

Usage

If your project does not already have stylelint, then in the root of the project create the file .stylelintrc, or with the extension .stylelintrc.js so that the code editor can highlight the syntax.

Then add kiforks/media-query-nesting to the .stylelintrc config file.

.stylelintrc

{
    "plugins": [
      "kiforks/media-query-nesting"
    ],
    "rules": {
	    "kiforks/media-query-nesting": true
    }
}

ATTENTION! This config is for media mixins instead of media queries:

/* BAD */
@include media-min(xs) {
  .block {
	  width: 300px;
  }
}

/* GOOD */
.block {
	@include media-min(xs) {
		width: 300px;
    }
}