README.md

at-mixin-no-risky-nesting-selector

Disallow risky nesting selectors within a mixin.

If a mixin contains a parent selector within another style rule, and is used in a nested context, the output selector may include the outermost parent selector in an unexpected way.

In this example:

@mixin foo {
  .a {
    color: blue;
    .b & {
      color: red;
    }
  }
}

.c {
  @include foo;
}

The user may expect .c to go outside all selectors in foo: .c .b .a {...}

But this outputs:

.c .a {
  color: blue;
}
.b .c .a {
  color: red;
}

However, if we pull the parent selector into the child and make the child style rule a sibling:

@mixin foo {
  .a {
    color: blue;
  }
  .b .a {
    color: red;
  }
}

.c {
  @include foo;
}

It outputs:

.c .a {
  color: blue;
}
.c .b .a {
  color: red;
}

This only occurs when a parent selector meets all of the following conditions:

• Is within a @mixin rule.
• Is nested within another style rule.
• Is not positioned at the beginning of a complex selector.

Options

true

The following patterns are considered warnings:

@mixin foo {
  .bar {
    color: blue;
    .baz & {
      color: red;
    }
  }
}

@mixin foo {
  .bar {
    color: blue;
    .qux, .baz & .quux{
      color: red;
    }
  }
}

The following patterns are not considered warnings:

.foo {
  .bar {
    color: blue;
    .baz & {
      color: red;
    }
  }
}

@mixin foo {
  .bar {
    color: blue;
    & .baz {
      color: red;
    }
  }
}

.bar {
  color: blue;
  .baz & {
    color: red;
  }
}

.foo {
  color: blue;
  & .bar, .baz & .qux {
    color: red;
  }
}

@mixin foo {
  .baz & {
    color: red;
  }
}