SCSS lint config file separate of CSS lint config file

Question

We have a series of legacy CSS files, which need linting and minifying, and then a series of new SCSS files, which need linting, rendering into CSS and minifying. While linting the SCSS files, I'm not getting the desired test errors using Gulp with stylelint-scss, and gulp-stylelint (which can use stylelint options). Is my setup correct?

My test SCSS style is

.component {
    position: relative;
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    color:$color-red;
    &:hover { 
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    }
}

I have setup a custom config (named: .scsslintrc) for SCSS as follows

 {
    "plugins": [
        "stylelint-scss"
    ],
    "rules": {
        "scss/dollar-variable-colon-space-before": "always",
        "scss/dollar-variable-colon-newline-after": "always",
        "scss/dollar-variable-pattern": "^foo",
        "scss/selector-no-redundant-nesting-selector": true,
    }
 }

In Gulp, I am using gulp-stylelint

    const lintScss = () => {
    return gulp.src( path.scss.src )
    .pipe( debug({ title: "SCSS File: ", showCount: false }) )
    .pipe( stylelint({
        configFile: ".scsslintrc",
        failAfterError: true,
        reportOutputDir: 'reports/lint',
        reporters: [
        {formatter: 'verbose', console: true}
        ],
        debug: true
    }) )
    .pipe( gulp.dest( path.scss.dest ))
}

And the results is

Starting 'lintScss'...
[16:52:54] dir /mydir/gulp
[16:52:54] SCSS File:  test/scss/scss_test.scss
[16:52:55] 

1 source checked
/mydir/gulp/test/scss/scss_test.scss

0 problems found

[16:52:55] Finished 'lintScss' after 229 ms

I'm really expecting to see errors around "color:$color-red;" and "&:hover {" and I'm not seeing them. What am I missing?

score 0 · Answer 1 · answered Sep 12 '19 at 15:44

Here is what I've learned. There is nothing the matter with my Gulp script. LOL. I misinterpreted the dollar-variable-pattern. The dollar rule is looking at column 1, not at a dollar sign after a colon. Also, IF you have CSS errors, in addition to SCSS errors, the CSS errors will display first and independent of the other errors. Therefore, if you omit a curly brace, it emits a CSS error only. Once you fix the CSS error, and run Gulp again, then you'll see SCSS errors.

Example SCSS with $ in column 1

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}
.component {
    position: relative;
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    color:$color-red;
    &:hover /* omitted curly brace causing CSS error */
        box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    }
}

Running the lintScss task

[11:26:49] Starting 'lintScss'...
[11:26:49] SCSS File:  test/scss/scss_test.scss
[11:26:49] 

test/scss/scss_test.scss
12:7  ✖  Missed semicolon   CssSyntaxError

[11:26:49] Finished 'lintScss' after 214 ms

Once that is fixed. You run lintScss again and...

[11:27:31] Starting 'lintScss'...
[11:27:31] SCSS File:  test/scss/scss_test.scss
[11:27:31] 

test/scss/scss_test.scss
1:1   ✖  Expected $ variable name to match specified pattern   scss/dollar-variable-pattern            
1:12  ✖  Expected single space before ":"                      scss/dollar-variable-colon-space-before 
1:12  ✖  Expected newline after ":"                            scss/dollar-variable-colon-newline-after
2:1   ✖  Expected $ variable name to match specified pattern   scss/dollar-variable-pattern            
2:15  ✖  Expected single space before ":"                      scss/dollar-variable-colon-space-before 
2:15  ✖  Expected newline after ":"                            scss/dollar-variable-colon-newline-after



[11:27:31] Finished 'lintScss' after 256 ms

SCSS lint config file separate of CSS lint config file

1 Answers1