Cannot read property 'first' of null

[scottlet]

---

• Atom version: 1.45.0 x64
• linter-sass-lint version: 1.9.0
• Global sass-lint version (if used): none
• Platform:
  • OSX
  • Windows
  • Linux
• Expected behaviour: Linting
• Actual behaviour / issue description:
  Linter fails to parse sass file.

This seems related to css variables. I've created a minimal test case that reproduces the error:

$foo-green: #1fecce;

.foo-green {
    --accent: #{$foo-green};
}

Gives the error:

linter-sass-lint TypeError: Cannot read property 'first' of null
    at /Users/scott/.atom/packages/linter-sass-lint/node_modules/sass-lint/lib/rules/property-sort-order.js:108
    at Node.forEach (/Users/scott/.atom/packages/linter-sass-lint/node_modules/gonzales-pe-sl/lib/gonzales.js:179)
    at Node.<anonymous> (/Users/scott/.atom/packages/linter-sass-lint/node_modules/sass-lint/lib/rules/property-sort-order.js:106)
    at /Users/scott/.atom/packages/linter-sass-lint/node_modules/gonzales-pe-sl/lib/gonzales.js:308
    at Node.traverse (/Users/scott/.atom/packages/linter-sass-lint/node_modules/gonzales-pe-sl/lib/gonzales.js:288)
    at Node.traverse (/Users/scott/.atom/packages/linter-sass-lint/node_modules/gonzales-pe-sl/lib/gonzales.js:293)
    at Node.traverse (/Users/scott/.atom/packages/linter-sass-lint/node_modules/gonzales-pe-sl/lib/gonzales.js:293)
    at Node.traverseByType (/Users/scott/.atom/packages/linter-sass-lint/node_modules/gonzales-pe-sl/lib/gonzales.js:307)
    at Object.detect (/Users/scott/.atom/packages/linter-sass-lint/node_modules/sass-lint/lib/rules/property-sort-order.js:99)
    at /Users/scott/.atom/packages/linter-sass-lint/node_modules/sass-lint/index.js:134
    at Array.forEach (<anonymous>)
    at Function.sassLint.lintText (/Users/scott/.atom/packages/linter-sass-lint/node_modules/sass-lint/index.js:133)
    at Object.provider.lint (main.coffee? [sm]:140)
    at linter-registry.js? [sm]:101
    at new Promise (<anonymous>)
    at _loop (linter-registry.js? [sm]:99)
    at LinterRegistry.<anonymous> (linter-registry.js? [sm]:84)
    at Generator.next (<anonymous>)
    at LinterRegistry.<anonymous> (linter-registry.js? [sm]:169)
    at Generator.next (<anonymous>)
    at step (/Users/scott/.atom/packages/linter/lib/linter-registry.js:9)
    at /Users/scott/.atom/packages/linter/lib/linter-registry.js:9
    at new Promise (<anonymous>)
    at LinterRegistry.<anonymous> (/Users/scott/.atom/packages/linter/lib/linter-registry.js:9)
    at main.js? [sm]:89
    at Function.simpleDispatch (/Applications/Atom.app/Contents/Resources/app/static/<embedded>:11)
    at Emitter.emit (/Applications/Atom.app/Contents/Resources/app/static/<embedded>:11)
    at EditorLinter.debouncedLint.leading (editor-linter.js? [sm]:8)
    at invokeFunc (/Users/scott/.atom/packages/linter/node_modules/lodash/debounce.js:95)
    at leadingEdge (/Users/scott/.atom/packages/linter/node_modules/lodash/debounce.js:105)
    at debounced (/Users/scott/.atom/packages/linter/node_modules/lodash/debounce.js:172)
    at Function.simpleDispatch (/Applications/Atom.app/Contents/Resources/app/static/<embedded>:11)
    at Emitter.emit (/Applications/Atom.app/Contents/Resources/app/static/<embedded>:11)
    at TextBuffer.saveTo (/Applications/Atom.app/Contents/Resources/app/static/<embedded>:11)

[r-burkhardt]

I am getting this some issue whenever I attempt to use a css var (--shared-height: 300px), it's for sure a linter issue. A solution to this has been elusive, if you found a way to solve there could you post what you did?

/node_modules/gonzales-pe-sl/lib/gonzales.js:179
              if (!type || this.content[i] && this.content[i].type === type) breakLoop = callback(this.content[i], i, this);
                                                                                  ^
TypeError: Cannot read property 'first' of null
    at /Users/rnagashima/Google Drive/coding-programming/verily/node_modules/sass-lint/lib/rules/property-sort-order.js:108:27
    at Node.forEach (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/gonzales-pe-sl/lib/gonzales.js:179:83)
    at Node.<anonymous> (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/sass-lint/lib/rules/property-sort-order.js:106:15)
    at /Users/rnagashima/Google Drive/coding-programming/verily/node_modules/gonzales-pe-sl/lib/gonzales.js:308:41
    at Node.traverse (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/gonzales-pe-sl/lib/gonzales.js:288:6)
    at Node.traverse (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/gonzales-pe-sl/lib/gonzales.js:293:36)
    at Node.traverse (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/gonzales-pe-sl/lib/gonzales.js:293:36)
    at Node.traverseByType (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/gonzales-pe-sl/lib/gonzales.js:307:11)
    at Object.detect (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/sass-lint/lib/rules/property-sort-order.js:99:9)
    at /Users/rnagashima/Google Drive/coding-programming/verily/node_modules/sass-lint/index.js:134:27
    at Array.forEach (<anonymous>)
    at Function.sassLint.lintText (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/sass-lint/index.js:133:11)
    at /Users/rnagashima/Google Drive/coding-programming/verily/node_modules/sass-lint/index.js:233:23
    at Array.forEach (<anonymous>)
    at Function.sassLint.lintFiles (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/sass-lint/index.js:230:12)
    at compilation.hooks.seal.tap (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/sass-lint-webpack/index.js:15:34)
    at SyncHook.eval (eval at create (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/webpack/lib/Compilation.js:1284:19)
    at compilation.finish.err (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/webpack/lib/Compiler.js:675:18)
    at hooks.finishModules.callAsync.err (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/webpack/lib/Compilation.js:1261:4)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.finish (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/webpack/lib/Compilation.js:1253:28)
    at hooks.make.callAsync.err (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/webpack/lib/Compiler.js:672:17)
    at _done (eval at create (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at _err1 (eval at create (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:32:22)
    at _addModuleChain (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/webpack/lib/Compilation.js:1185:12)
    at processModuleDependencies.err (/Users/rnagashima/Google Drive/coding-programming/verily/node_modules/webpack/lib/Compilation.js:1097:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)

[aramwram]

Has anybody found a workaround for this issue?

[scottlet]

I think I just removed the extension then reinstalled it and it worked, but I don't recall 100%. Now, though, I'd recommend ditching sass-lint as it's unmaintained and the last update was in October 2017 (also the last release of this plugin was 2019) and moving to something else. I use Stylelint

[aramwram]

@scottbert , thanks bro. I think I'm gonna try stylelint.

[theenoahmason]

Supporting older sass-lint project and came accross this. For us it was css variables - Here is a quick solution for anyone wanting to get past the lint:

Mixin:

@mixin print-var($var, $val) {
	#{$var}: $val;
}

Usage:

@include print-var(--some-css-var, $some-value);