disallow-media-duplicate

Disallow SCSS duplicated media query mixins

Usage no npm install needed!

<script type="module">
  import disallowMediaDuplicate from 'https://cdn.skypack.dev/disallow-media-duplicate';
</script>

README

kiforks/disallow-media-duplicate

The rule that disables duplicate media queries.

Installation

npm install kiforks/disallow-media-duplicate --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/disallow-media-duplicate to the .stylelintrc config file.

.stylelintrc

{
    "plugins": [
      "kiforks/disallow-media-duplicate"
    ],
    "rules": {
        "kiforks/disallow-media-duplicate": true
    }
}

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

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

    @include media-min(xs) {
            height: 305px;
    }
}

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