properties with double hypen at beginning break cli linting

mnbroatch commented 6 years ago

What version of Sass Lint are you using? 1.12.1

Please include any relevant parts of your configuration none

What did you do? Please include the actual source code causing the issue. installed sass-lint globally, ran "sass-lint file.scss" in command line

file.scss contents:

.thing { --mdc-layout-grid-gutter-phone: 16px; }

What did you expect to happen? results of linting file.scss

What actually happened? Please include any error messages given to you by Sass Lint.

/usr/local/lib/node_modules/sass-lint/lib/rules/property-sort-order.js:108 name = prop.first('ident'); ^

TypeError: Cannot read property 'first' of null at /usr/local/lib/node_modules/sass-lint/lib/rules/property-sort-order.js:108:26 at Node.forEach (/usr/local/lib/node_modules/sass-lint/node_modules/gonzales-pe-sl/lib/gonzales.js:179:83) at Node. (/usr/local/lib/node_modules/sass-lint/lib/rules/property-sort-order.js:106:15) at /usr/local/lib/node_modules/sass-lint/node_modules/gonzales-pe-sl/lib/gonzales.js:308:41 at Node.traverse (/usr/local/lib/node_modules/sass-lint/node_modules/gonzales-pe-sl/lib/gonzales.js:288:6) at Node.traverse (/usr/local/lib/node_modules/sass-lint/node_modules/gonzales-pe-sl/lib/gonzales.js:293:36) at Node.traverse (/usr/local/lib/node_modules/sass-lint/node_modules/gonzales-pe-sl/lib/gonzales.js:293:36) at Node.traverseByType (/usr/local/lib/node_modules/sass-lint/node_modules/gonzales-pe-sl/lib/gonzales.js:307:11) at Object.detect (/usr/local/lib/node_modules/sass-lint/lib/rules/property-sort-order.js:99:9) at /usr/local/lib/node_modules/sass-lint/index.js:134:27

If you're using a IDE plugin have you tried the CLI too? N/A

AmmarCodes commented 6 years ago

I have the same issue, here's what causes the issue:

:root {
  --input-padding-x: .75rem;
  --input-padding-y: .75rem;
}

magwalk commented 6 years ago

Also had the same issue. Here's my code:

:root {
  --font-family: 'Muli', Helvetica, Arial, sans-serif;
}

theenoahmason commented 6 years ago

For anyone wanting to get around this for now, use the following:

Mixin

@mixin root-prop($prop: null, $value: null) {
    @if ($prop and $value) {
        #{$prop}: $value;
    }
}

Usage

:root {
    @include root-prop(--root-prop, #000000);
}

Output with no errors

:root {
    --root-prop: #000000;
}

ChristopherWerby commented 5 years ago

Thank you Noah Mason for coming up with a workaround. It would be nice -- maybe it should be a feature request -- if sass-lint supported CSS custom properties (variables) in Sass.

altearius commented 5 years ago

This issue is currently blocking me.

Looks like there are two separate PRs aimed at fixing this, #1225 and #1207.

Is there something I can do to help move this toward the light?

NetOpWibby commented 5 years ago

@altearius The mixin provided by Noah is what I've been using in my projects (two comments up from yours).

altearius commented 5 years ago

@NetOperatorWibby Currently, I find it preferable to disable the property-sort-order rule rather than introduce workarounds. My sass is correct without the mixin. I do not choose to change correct code into confusing code because there is bad code in a third-party tool, unless there is no other choice.

NetOpWibby commented 5 years ago

@altearius To each their own. Personally, I didn't feel like waiting on this to get fixed and I didn't find alternatives that suited my needs. I also wanted to continue on with my work.

sasstools / sass-lint

properties with double hypen at beginning break cli linting #1161