no-mergeable-selectors.scss

// comments denote default rule behaviour

h1 {
  color: #fff;
}

// mergeable with the rule above
h1 {
  margin: 0;
}

h1.new > p{
  color: #000;
}

h1,
h2,
h3 {
  color: #fff;
}

// mergeable with the rule above
h1, h2, h3 {
  color: #fff;
}

.mergeable .test {
  color: #000;
}

// mergeable with the rule above
.mergeable .test {
  border: 1px solid #fff;
}

.mergeable, .test {
  color: #000;
}

// mergeable with the rule above
.mergeable, .test {
  border: 1px solid #fff;
}

.mergeable #h1.new {
  color: #000;
}

input[type='text'] {
  border: 0;
}

// mergeable with the rule above
input[type='text'] {
  background: none;
}

input[type='radio'] {
  color: red;
}

ul > li {
  padding: 0;
}

// mergeable with the rule above
ul > li {
  margin: 0;
}

div p {
  padding: 0;
}

// meregeable with the rule above
div p {
  padding: 0;
}

div > p {
  margin: 0;
}

// mergeable with the rule above
div > p {
  padding: 0;
}

* {
  margin: 0;
}

//mergeable with the rule above
* {
  margin: 0;
}

[target] {
  padding: 0;
}

// mergeable with the rule above
[target] {
  padding: 0;
}

p:last-child {
  margin: 0;
}

// rule is mergeable with the rule above
p:last-child {
  margin: 0;
}

p:nth-of-type(2) {
  margin: 0;
}

// rule is mergeable with the rule above
p:nth-of-type(2) {
  margin: 0;
}

input:read-only {
  content: '';
}

// mergeable with the rule above
input:read-only {
  content: '';
}

.b-some {

  .image + .buttons {
    margin-top: 14px;

    &__test {
      content: '';

      #h1 {
        content: '';
      }

      #h2 {
        content: '';
      }
    }
  }
  .image {
    content: '';
  }

  //mergeable with the .image rule directly above
  .image {
    margin: 2px;

    .image + .buttons {
      margin-top: 14px;

      &__test {
        content: '';

        #h1 {
          content: '';
        }

        #h2 {
          content: '';
        }
      }
    }
  }
  &__end {
    content: '';
  }
}

// mergeable with the previous block
.b-some {

  &__image {
    width: 100%;
  }
  &__image + &__buttons {
    margin-top: 14px;
  }

  //mergeable with the end rule in the previous block
  &__end {
    content: '';
  }
}

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

// mergeable with the rule above
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

ul ~ p {
   color: #ff0000;
}

.test {
  .bar {
    color: blue;
  }
}

// 2 rules mergeable with the rules above
.test {
  .bar {
    color: red;
  }
}

// make sure a selector inside a supports query is not marked as mergable
@supports (display: flex) {
  .abar {
    display: flex;
  }
}

//make sure a low level selector doesn't flag with a nested selector above
.bar {
  content: '';
}

// should merge with the previous bar above
.bar {
  @media(max-width: 40em) and (min-width: 20em) and (orientation: landscape) {
    content: '';
  }
}

// shouldn't merge with the previous bar above
%bar {
  @media(max-width: 40em) and (min-width: 20em) and (orientation: landscape) {
    content: '';
  }
}

// shouldn't merge with bar above
@media(max-width: 40em) and (min-width: 20em) and (orientation: landscape) {
  .bar {
    content: '';
  }
}

// should merge with media query above
@media(max-width: 40em) and (min-width: 20em) and (orientation: landscape) {
  .bar {
    content: '';
  }
}

// should merge with media query above
@media(max-width: 40em) and (min-width: 20em) and (orientation: landscape) {
  %bar {
    content: '';
  }
}

// shouldn't merge
@media(max-width: 20em) and (min-width: 10em) and (orientation: landscape) {
  .bar {
    content: '';
  }
}

// Adds keyframes blocks
@mixin keyframes($name) {
  @keyframes #{$name} { @content; }
}

//keyframes should be ignored completely
@include keyframes(fade-in) {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@include keyframes(fade-out) {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

// Issue #703 - Interpolation in selector

.navigation {
  @media #{$media-query-lg-up} {
    .nav-item {
      display: inline-block;
    }
  }
  @media #{$media-query-md-down} {
    // should not merge with the media query above
    .nav-item {
      display: block;
    }
    // should merge with the ruleset directly above
    .nav-item {
      color: $blue;
    }
  }
}

// issue 826 - media queries with functions
@media(min-width: break('large')) {
  .test {
    float: left;
  }
}

@media(min-width: break('small')) {
  .test {
    float: left;
  }
}

@media(min-width: break('small')) {
  .test {
    float: none;
  }
}

// Issue #834 - selectors/typeselectors not properly recognised
.fake-field {
  tbody {
    tr:nth-child(even) {
      background: lighten($theme-color-primary, 50%);
    }
    tr:nth-child(odd) {
      background: #FFFFFF;
    }
  }
}

.pseudo-not {
  &:not(:first-child) {
    border-left: none;
  }
  &:not(:first-child) {
    border-left: 2px;
  }
}