Use sass-lint and Drupal Coding standards SCSS rules

Created on 29 March 2019, over 5 years ago
Updated 4 August 2023, over 1 year ago

You are using gulp-scss-lint, whereas I'm used to gulp-sass-lint, and a config file with rules that are more strict.

I added sass-lint and noticed that there are a lot of style things for me to clean up, like 4-space indents, multi-line comments, single quote styles, etc.

I know some of these are personal taste, but the Drupal Style guide has some specific recommendations

Here is how I added an SCSS Lint Test my gulpfile.js

// Run Lint on scss files
function test () {
  return gulp.src([paths.scss.watch, paths.scss.src])
    .pipe(sassLint({
      rules: {
        'no-ids': 1,
        'no-css-comments': 0
      },
      configFile: './.sass-lint.yml'
    }))
    .pipe(sassLint.format())
    .pipe(sassLint.failOnError())
}
Feature request
Status

Needs review

Version

5.0

Component

Code

Created by

🇺🇸United States tstermitz Colorado

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇮🇳India ravi kant Jaipur

    The gulp-scss-lint package is not exist so need to update package.json with gulp-sass-lint.
    Creating patch for now.

    Testing steps after apply patch.

    1. run npm install on theme root
    2. add code in gulpfile.js
    3. gulp.task('linting', function () {
        return gulp.src('./scss/**/*.scss')
          .pipe(sassLint())
          .pipe(sassLint.format())
          .pipe(sassLint.failOnError())
      });
      
    4. run gulp linting on theme root
Production build 0.71.5 2024