Should throw error when & has no parent

[NielsDoucet]

This is a followup to issue #1569 .
Libsass no longer crashes in the specified test-case, but instead outputs the "&" in the css.

$tablet-portrait:                 768px;
$tablet-landscape:                980px;
$desk-normal:                     1120px;
$desk-big:                        1280px;
$grid-breakpoints-immobile: (
        'tablet-portrait':   '(min-width: ' + $tablet-portrait + ') and (max-width: ' + $tablet-landscape + ')',
        'tablet-landscape':  '(min-width: ' +  $tablet-landscape + ') and (max-width: ' + $desk-normal + ')',
        'desk-normal':       '(min-width: ' +  $desk-normal + ') and (max-width: ' + $desk-big + ')',
        'desk-big':          '(min-width: ' +  $desk-big + ')'
);
@mixin grid-media-query($media-query, $breakpointDefinitions) {
  $breakpoint-found: false;

  @each $breakpoint, $breakpointvalue in $breakpointDefinitions{
    $name: $breakpoint;
    $declaration: $breakpointvalue;

    @if $media-query == $name and $declaration{
      $breakpoint-found: true;

      @media only screen and #{$declaration} {
        @content;
      }
    }
  }
}

@each $name in map-keys($grid-breakpoints-immobile) {
  @include grid-media-query($name, $grid-breakpoints-immobile) {
    body.immobile & {
      margin-bottom: 0;
    }
  }
}

Produces the following outputs:
libsass version 3.2.5

@media only screen and (min-width: 768px) and (max-width: 980px) {
  body.immobile {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 980px) and (max-width: 1120px) {
  body.immobile {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1120px) and (max-width: 1280px) {
  body.immobile {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1280px) {
  body.immobile {
    margin-bottom: 0;
  }
}

libsass version 3.3.1

@media only screen and (min-width: 768px) and (max-width: 980px) {
  body.immobile & {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 980px) and (max-width: 1120px) {
  body.immobile & {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1120px) and (max-width: 1280px) {
  body.immobile & {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1280px) {
  body.immobile & {
    margin-bottom: 0;
  }
}

[xzyfer]

Thanks for the report @HeadOnAPlate. We're looking into it.

[xzyfer]

The previous behaviour was a bug. This code should error because there is no parent selector to replace & with.

Error: Base-level rules cannot contain the parent-selector-referencing character '&'.
        on line 30 of test.scss, in `@content'
        from line 22 of test.scss, in `grid-media-query'
        from line 29 of test.scss
  Use --trace for backtrace.

[xzyfer]

Give that the output is essentially invalid CSS the current behaviour is more correct than the previous behaviour. As such I'm moving this to 3.3.3.

[NielsDoucet]

I understand. In the ruby-sass implementation this appears to throw an error as well.
Is there a way to detect that a mixin is called from within a parent selector? Or should we change its signature and pass in the parent directly?

Also: has the spec changed regarding this parent selector '&'? Because we have been using this code since april 2014, without any problem.

[xzyfer]

Since & is just a list you can test length(&) to see if you're current context has a parent selector.
This may be buggy in LibSass atm. I would develop against Ruby Sass then see if it works on LibSass.

[NielsDoucet]

Ok, I experimented a bit and it turns out length(&) seems to return 1, even if there is no context.
It contains an empty string as its element.

I managed to guard the code by using this function instead:
@function hasContext() { @return nth(&, 1); }

Thanks for pointing me in the right direction.

[saper]

I guess this might be #1709 and/or #1729

[saper]

It looks like

@mixin parent {
  @content;
}

@include parent() {
  body.immobile & {
    margin-bottom: 0;
  }
}

is enough to reproduce that.

[xzyfer]

I've got a patch for this locally.