Libsass ^3.0 error: invalid selector after

[dtothefp]

Not sure if this is the right place to report this error but after upgrading to:

grunt-sass 0.18.1 => node-sass 3.0.0-beta.7- => Libsass 3.2.0-beta.6

I'm getting the following errors

>> invalid selector after
>>   Line 33  Column 14  node_modules/css-smart-grid/sass/smart-grid-columns.scss

I did not have this problem on older versions for grunt-sass/node-sass/libsass

grunt-sass v0.14.0 => node-sass v0.9.6 => 

The mixins in question are here

@import "smart-grid-variables";

@mixin column() {
    float: left;
    margin: 0 0 0 $gutter;
    width: $one-column;
    &:first-child {
        margin-left: 0;
    }
    @if $flexbox-support == true {
        html.flexbox &  {
            float: none;
        }
    }
}
@mixin columns($count:1) {
    width: ($one-column * $count) + ($gutter * ($count - 1));
}
@mixin offset($columns:1) {
    margin-left: ($one-column * $columns) + ($gutter * ($columns + 1));
    &:first-child {
        margin-left: ($one-column * $columns) + ($gutter * $columns);
    }
}

@mixin column-set() {
    .columns {
        @include column;
        @each $i in $column-list {
            $selectors: ();
            @for $j from 2 to length($i) + 1 {
                $selectors: $selectors, unquote("&.#{nth($i, $j)}");
            } //LINE 33
            #{$selectors} {
                @include columns(nth($i, 1));
            }
        }
        @each $i in $offset-list {
            $selectors: ();
            @for $j from 2 to length($i) + 1 {
                $selectors: $selectors, unquote("&.offset-#{nth($i, $j)}");
            } 
            #{$selectors} {
                @include offset(nth($i, 1));
            }
        }
    }
}

[KittyGiraudel]

Any chance you could narrow down the problem? There is a lot of code here, and there is even a partial imported.

[dtothefp]

@hugogiraudel sorry for not more complete info. The repo for this code is css-smart-grid and line 33 is where it chokes.

The missing imported variables are here:

// 20px at 960px wide container, accounting for a 1/2 gutter width padding on the left and right of the container
$gutter:    percentage(20px/940px);

// 60px at 960px wide container
$one-column:                6.3829787%;

// set this to the minimum width you want the columns to take effect at
$columns-break-point:          481px !default;

// set this to the maximum width you want .container to have
$container-max-width:          940px !default;

// set this to true to include support for CSS Flexbox (modern syntax).
$flexbox-support:             true !default;

// a collection of the columns you want to build. the first parameter must be an integer of how many columns wide this instance is, followed by 1 or more class names to apply this width to.
$column-list:    (2, "two") (3, "three", "one-fourth") (4, "four", "one-third") (5, "five") (6, "six", "one-half") (7, "seven") (8, "eight", "two-thirds") (9, "nine", "three-fourths") (10, "ten") (11, "eleven") (12, "twelve", "full") !default;

// a collection of the offsets you want to build. the first parameter must be an integer of how many columns wide this instance is offset, followed by 1 or more class names to apply this offset to.
$offset-list:    (1, "one") (2, "two") (3, "three") (4, "four") (5, "five") (6, "six") (7, "seven") (8, "eight") (9, "nine") (10, "ten") (11, "eleven") !default;

And here is a Sassmeister Gist http://sassmeister.com/gist/b4d0154f7704516cddec that seems to be compiling successfully in Libsass 3.1.0

[drewwells]

I'm not able to reproduce this using commit: fec7377. Perhaps this has already been fixed on master. Copy/pasted from SassMeister

go run wt/main.go test.scss
/* line 74, /Users/drew/src/github.com/wellington/wellington/test.scss */
.customer-grid-item {
  float: left;
  margin: 0 0 0 2.12766%;
  width: 6.38298%;
  width: 24.93617%;
  margin: 0 0 20px 0; }
  /* line 31, /Users/drew/src/github.com/wellington/wellington/test.scss */
  .customer-grid-item:first-child {
    margin-left: 0; }
  /* line 35, /Users/drew/src/github.com/wellington/wellington/test.scss */
  html.flexbox .customer-grid-item {
    float: none; }
Rebuilt: test.scss
2015/04/22 12:43:12 main.go:95: Compilation took: 9.808ms
drew@dumass [12:43:12] [~/src/github.com/wellington/wellington] [master *]

drew@dumass [12:43:19] [~/src/github.com/wellington/wellington] [master *]
-> % go run wt/main.go -v
   libsass: 3.2.0-beta.6-2-gfec73-dirty

[xzyfer]

I am unable to reproduce this issue with Libsass@3.0.0-beta.6.

Please try compiling this code directly with a fresh node-sass and see if the problem persist.

mkdir ~/tmp/node-sass
cd ~/tmp/node-sass
npm install node-sass@3.0.0-beta.7
node -e "console.log(require('node-sass').renderSync({file:'path/to/file.scss'}))"
node -e "console.log(require('node-sass').renderSync({file:'path/to/file.scss'}).css.toString())"

[xzyfer]

➜  tmp  node -e "console.log(require('node-sass').info)"
node-sass   3.0.0-beta.7    (Wrapper)   [JavaScript]
libsass     3.2.0-beta.6    (Sass Compiler) [C/C++]

➜  tmp  node -e "console.log(require('node-sass').renderSync({file:'test.scss'}).css.toString())"
.customer-grid-item {
  float: left;
  margin: 0 0 0 2.12766%;
  width: 6.38298%;
  width: 24.93617%;
  margin: 0 0 20px 0; }
  .customer-grid-item:first-child {
    margin-left: 0; }
  html.flexbox .customer-grid-item {
    float: none; }

[dtothefp]

@xzyfer @drewwells

here is a demo repo https://github.com/dtothefp/node-sass-error-demo/blob/master/grunt/node-sass.js

my mistake, it is a media query in the main bootstrapped smart-grid.scss that is calling the column-set mixin that is causing the problem

if you add below to Sassmeister or just checkout my repo

@media (min-width:$columns-break-point) {
    @include column-set;
}

node-sass will throw the error I'm referencing

[drewwells]

Can you provide a shortened example that illustrates the problem. Removing
any variables that aren't needed to reproduce this.
On Thu, Apr 23, 2015 at 9:33 AM David Fox-Powell notifications@github.com
wrote:

@xzyfer https://github.com/xzyfer @drewwells
https://github.com/drewwells my mistake, it is a media query in the
main bootstrapped smart-grid.scss that is calling the column-set mixin
that is causing the problem

if you add

@media (min-width:$columns-break-point) {
@include column-set;
}

node-sass will throw the error I'm referencing

—
Reply to this email directly or view it on GitHub
#1122 (comment).

[xzyfer]

@dtothefp as @drewwells points out, we cannot progress this issue as it stands. Noone one the Libsass team is familiar with project in question.

Please supply a copy-pastable snippet of Sass code that produces the issue you're encountering. Only then can we begin to understand the actual problem at work here.

[dtothefp]

@hugogiraudel @drewwells @xzyfer @stewsmith I've pinpointed the issue. If you reference the article http://hugogiraudel.com/2013/07/15/understanding-sass-lists/#section-4 about appending to sass lists you will see that the syntax below will work

$pages: home, about, products, contact;
$selector: ();

@each $item in $pages {
  $selector: append($selector, unquote('.#{$item} .nav-#{$item}'), comma);
}

but the following syntax will break (and coincidentally the syntax used in the css-smart-grid mixin)

@each $item in $pages {
  $selector: $selector, unquote('.#{$item} .nav-#{$item}');
}

You can see an example in my sample repo https://github.com/dtothefp/node-sass-error-demo running grunt works and grunt breaks compiling directly with node-sass api or you can just use the above example code to see the issue.

[xzyfer]

@dtothefp thanks heaps for creating that test case. I can confirm this is fixed in Libsss 3.2.0 and will be in node-sass 3.0.0.

[dtothefp]

@xzyfer thanks for the reply. Any idea when we can expect Libsass 3.2.0 and node-sass 3.0.0 to come out of beta?

[xzyfer]

Soon. You can track the progress of 3.0.0 in sass/node-sass#904

[paynecodes]

I'm seeing this issue when trying to compile the following:

@mixin margin-selectors($before:1em, $after:1em, $start:0px, $end:0px) {
  -webkit-margin-before: $before;
  -webkit-margin-after: $after;
  -webkit-margin-start: $start;
  -webkit-margin-end: $end;
}

@mixin not-selectable($value:none) {
  user-select: $value;
}

@mixin input-placeholder-color($color) {
  &::-webkit-input-placeholder,
  &::-moz-placeholder, /* Firefox 19+ */        // <------------------ Error: invalid selector after ,
  &:-moz-placeholder, /* Firefox 18- */
  &:-ms-input-placeholder {
    color: $color;
  }
}

I'm running gulp-sass v2.0.1 --> node-sass v3.1.0 --> libsass v3.2.4

[xzyfer]

@jpdesigndev tracking that issue in #1208

[filmic]

I get this error compiling code:

$EQ-Selectors: ();

.el {
    $EQ-Selectors: append($EQ-Selectors, &, 'comma') !global;
}

Throws:

4:39  invalid selector after &

I'm running gulp-sass v2.0.1 --> node-sass v3.1.2 --> libsass v3.2.4

[xzyfer]

@filmic I can confirm this is an issue. Please open a new issue, this one is closed.

[dtothefp]

@hugogiraudel I can confirm this is still an issue

[xzyfer]

Yes this a known issue being tracked in #1260.