0

I am using Vim with Syntastic syntax checking plugin, configured to lint scss files with default sass and scss-lint linters.
Opening css/main.scss in a Jekyll project, scss-lint returns error:
css/main.scss:5:1 [E] Syntax Error: Invalid CSS after "@charset "utf-8"": expected "{", was ";"

Removing the charset declaration results in the same error on the next line down, and so on...
Remove the Front Matter block and scss-lint no longer reports the error, but Jekyll requires an empty Front Matter block at the head of a sass file to process it and import partials and output css.

How do I configure scss-lint to ignore the Front Matter block?

Sato Katsura
  • 3,066
  • 15
  • 21
remy-actual
  • 724
  • 7
  • 19
  • This has nothing to do with Vim or syntastic. – romainl Nov 03 '16 at 06:24
  • Disagree. My goal is to lint files while editing in Vim. The charset error was blocking this. That solving the problem in Vim also frees up scss-lint from choking on the same error when used from the command line is incidental. – remy-actual Nov 03 '16 at 06:52
  • 1
    That `.scss-lint.yml` is a scss-lint configuration file that is not used by Syntastic or by Vim. Your issue is a scss-lint issue and your "fix" is a scss-lint fix. The fact that you are using Syntastic in Vim is completely orthogonal to the issue *and* to the fix. – romainl Nov 03 '16 at 08:22
  • Syntastic utilizes scss-lint as a default out-of-the-box. Don't confuse the answer for the question. The _problem_ is that on Scss files with Front Matter, Syntastic returns a syntax error that doesn't really exist. Editing the file will not "fix" the error. The _problem_ is inflated because this behavior is not clearly documented. Adding ~/.scss-lint.yml is one possible solution. It doesn't change the original use-case. Another possible (untested) solution is adding `"let g:syntastic_scss_scss_lint_args = "preprocess_command: "sed '1{/^---$/{:a N;/---$/!ba;d}}'"` to .vimrc – remy-actual Nov 03 '16 at 15:58

1 Answers1

0

Add a .scss-lint.yml config file in your user directory containing the following:

preprocess_command: "sed '1{/^---$/{:a N;/---$/!ba;d}}'"

scss-lint gem will look for a config file first in the current working directory, then in the user directory.

The preprocess_command intstructs scss-lint to run the text of the scss file through the sed command first.

The sed command strips out the Front Matter block; the file is then passed to scss-lint for error checking with the @charset declaration now on the first line.
If there is no Front Matter block between triple dashes --- starting on the first line, the file is passed from sed to scss-lint as is.

Community
  • 1
  • 1
remy-actual
  • 724
  • 7
  • 19