ParseError with comments

[zallek]

I'm trying to setup sass-lint on my project but on some commented line (not all ...), it throws a ParseError. (I'm using the CLI)

.height-lg {
    height: 690px !important;
}

.btn.btn-primary{
    background: #296179;
    border-color: #296179;
    transition: all 0.2s ease-in;

    &:hover, &:focus{
        background: #42778E;
        border-color: #42778E;
    }
}

.url-overflow{
    //TODO find a way to use ellipsis for url and show the external link properly
    //@include text-overflow();
    word-wrap: break-word;
}

a.external{
    margin-left: 4px;

    i{
        font-weight: bold;
    }
}

ul.nav.nav-tabs{
    font-weight: bold;
    li.disabled{
        a{
            color: $gray5;
        }
    }
}

.container-center{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.dropdown-menu > li{
    i{
        margin-right: 4px;
    }

    span{
        display: block;
        padding: 5px 15px;
        clear: both;
        font-weight: normal;
        line-height: 1.428571429;
        color: #333333;
        white-space: nowrap;
        cursor: pointer;
    }
    &:hover, &:focus {
        background: #edf0f5;
    }
    &.disabled{
        span{
            @extend .text-muted;
            cursor: not-allowed;
        }
        background: inherit;
    }
}

.alert.alert-success{
    background: #dff0d8;
}


.iScrollVerticalScrollbar {
    position: absolute;
    z-index: 9999;
    width: 5px;
    bottom: 2px;
    top: 2px;
    right: 2px;
}

.iScrollIndicator {
    box-sizing: border-box;
    position: absolute;
    border-radius: 3px;
    width: 100%;
    display: block;
    background: rgba(0, 0, 0, 0.5);
}

.help-tooltip, .HelpTooltip{
    cursor: pointer;
    color: #999;
    opacity: 0.6;

    &:hover{
        opacity: 0.8;
    }

    &[aria-describedby]{
        opacity: 1;
    }
}

.admin-menu, .AdminMenu{
    .btn{
        background: none;
        color: #999;
        opacity: 0.6;
        font-size: 12px;
    }
    &.btn-group.open .btn, .btn:active{
        box-shadow: none;
        opacity: 0.8;
    }

    .help-text-admin{
        font-weight: bold;
    }
}

.tooltip{
    transition: none;
}
.tooltip.in{
    opacity: 1;
}
.tooltip-inner{
    background: white;
    max-width: 300px;
    color: black;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
    text-align: left;
    padding: 6px 9px;
}
.tooltip.top .tooltip-arrow{
    border-top-color: white;
}
.tooltip.bottom .tooltip-arrow{
    border-bottom-color: white;
}
.tooltip.right .tooltip-arrow{
    border-right-color: white;
}
.tooltip.left .tooltip-arrow{
    border-left-color: white;
}

.admin-modal{
    color: black;
}

.fa{
    position: relative;
}

.fa.fa-bar-chart-o .fa.fa-percent{
    position: absolute;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    font-size: 10px;
    right: -8px;
    bottom: -3px;

    &:before{
        content: "%";
    }
}

span.accordion-toggle{
    cursor: pointer;
}

.spinner{
  left: 45%;
}

CLI result

Error: Parsing error at botify-report/sass/_global_design.scss: Please check validity of the block starting from line #17
    at module.exports (/home/nicolas/Workspace/botify-saas-js-report-new/node_modules/sass-lint/lib/groot.js:21:11)
    at Function.sassLint.lintText (/home/nicolas/Workspace/botify-saas-js-report-new/node_modules/sass-lint/index.js:36:13)
    at /home/nicolas/Workspace/botify-saas-js-report-new/node_modules/sass-lint/index.js:89:21
    at Array.forEach (native)
    at Function.sassLint.lintFiles (/home/nicolas/Workspace/botify-saas-js-report-new/node_modules/sass-lint/index.js:88:9)
    at detectPattern (/home/nicolas/Workspace/botify-saas-js-report-new/node_modules/sass-lint/bin/sass-lint.js:15:18)
    at Object.<anonymous> (/home/nicolas/Workspace/botify-saas-js-report-new/node_modules/sass-lint/bin/sass-lint.js:50:3)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)

The other ones dont throws Error.

[DanPurdy]

Thanks for the report, we'll look into it.. That sort of error is usually generated by our AST so I'll see what I can find out. Thanks.

[DanPurdy]

Hi @zallek I've done a bit of testing and reported an error with the AST we use, it seems it's something to do with using the word url in a selector or string with a - or similar operator.

You can see my comment here tonyganch/gonzales-pe#95

to overcome this problem for now you can either change the name of the selector or just have the comment outside of the block. I would suggest for now changing the name of the selector slightly as it may cause issue with something else further down the line. I've provided working examples in the issue I filed if you'd like to see those.

[zallek]

Hi @DanPurdy and thank you for the quick answer. I replaced the comment line by a block comment and it does the trick for now. But I will stay posted about fixes on the parser you use.

I have another similar issue that might (or not) help to solve it.

@mixin url_infos {

  ...

  // When there is a title, move over it
  .url-infos-with-title .PageRankGauge {
    margin-top: -10px;
    background: transparent;
  }

  ...

}

[zallek]

BTW thank you for this great work. That's nice to have this scss linter working with JS instead of Ruby. I mainly setup it on my prod project to avoid releasing code with non breaking spaces (before braces) which aren't correctly managed by libsass. But others rules are nice too.
I would have a feature proposition: a rule to disallow empty lines in blocks.

[DanPurdy]

Thanks @zallek we appreciate it.

Would you mind opening a separate issue for your feature request? I fear it may get lost in this issue when we close it otherwise.

Thanks!

[nene]

I'm experiencing a similar issue. The following code causes a parse error:

.foo {
    font-family: "Arial", /* comment*/ "Helvetica";
}

Removing the comment solves the problem.

[DanPurdy]

@nene this will be due to the AST we're using. You can test if this is working in the latest version of the parser that we'll be moving to in 1.6 by visiting http://tonyganch.com/gonzales-pe/ and seeing if you get any parse errors on the code you have.

For your issue above it's working correctly in the gonzales-pe 3.2.6 so once 1.6 rolls out you should see your issue fixed 👍

[nene]

Thanks for the quick response. Looking forward to 1.6 release.

[DanPurdy]

Once the AST installs on windows correctly again we'll be releasing. 👍

[DanPurdy]

@zallek @nene Both of your examples are no longer throwing parse errors in sass-lint 1.6.0 Thank you for your patience!