Stylelint added caching in 7.10.0 (Ref: stylelint/stylelint#2293). Can it be enabled through gulp-stylelint?

When running gulp-stylelint there's an error Cannot read property '0' of undefined and files don't get linted. Running the stylelint CLI directly on the files works.

The console log:

[00:18:42] TypeError in plugin 'gulp-stylelint'
Message:
    Cannot read property '0' of undefined
Details:
    domainEmitter: [object Object]
    domain: [object Object]
    domainThrown: false

My gulp task looks like this:

return gulp.src('path/**/*.scss').pipe(stylelint({
    reporters: [
        {
            formatter: 'verbose',
            console: true
        }
    ]
}));

gulp --version:

CLI version 1.2.2
Local version 4.0.0-alpha.2

I'm using gulp-stylelint on version 3.1.

Eventually, I would like for gulp-stylelint to fix our source .scss files on save. For now, I'm just trying to get syntax rules corrected using one plain .css file. When this runs, the indentation error does output to the console, but the .css file is not corrected.

I have run this through the stylelint CLI using $ stylelint "src/styles/*.css" --fix and it worked.

.stylelintrc

{
  "rules": {
    "indentation": 2
  }
}

gulpfile.js

gulp.task('styles:lint', function lintCssTask() {
  return gulp.src([
      './src/styles/*.css'
    ])
    .pipe(stylelint({
      fix: true,
      reporters: [{
        formatter: 'string',
        console: true,
      }],
      failAfterError: false,
    }))
    .pipe(gulp.dest('./src/styles'));;
});

CSS
The below rule uses 4-space indentation, which should be corrected to 2 spaces.

.blah {
    color: black;
}

The --fix flag was added in stylelint 7.11.0. My global stylelint is v9.1.3. The version installed by gulp-stylelint is 8.2.0, so I don't think this is a version problem.

I'm running Node v8.9.4 and NPM v5.7.1.

Looking at the code it would seem that it's Node v4+ but I'm not 100% sure. It's also missing in the package.json file.

Hello,
I'm trying to lint my sass files with the following task:

import gulp from 'gulp';
import stylelint from 'gulp-stylelint';
import config from '../../config.json';

gulp.task('lint:sass', () => {
    gulp.src([
        `./${config.sass.path}/**/*.scss`,
        `!./${config.sass.path}/vendor/**/*.scss`
    ])
        .pipe(stylelint({
            syntax: 'scss',
            failAfterError: false,
            reporters: [
                {
                    formatter: 'string',
                    console: true
                }
            ]
        }));
});

This produces no errors seemingly and the task runs fine:

[00:10:37] Starting 'lint:sass'...
[00:10:37] Finished 'lint:sass' after 9.42 ms

However, if I run this through the stylelint cli I do get the errors (that I know are there because I purposefully wrote them in to test the plugin). I'm using this command:

stylelint "sass/**/*.scss" --syntax scss

I'm at a loss and can't figure out why the gulp plugin isn't working correctly. Do you see anything that I'm doing wrong which I may be missing?

Thanks in advance.

stylelint has a standalone Node API, and I think it would be preferable for this plugin to use that, instead of running PostCSS and using stylelint as a PostCSS plugin. There are features available in the Node API that users of gulp-stylelint would definitely want, like the ability to set syntax: scss.

Additionally, the Node API was really built for this kind of thing; so if there's a reason it doesn't work for you, I'd appreciate the feedback and I'll see if I can improve it :)

We've had to update to stylelint-config-standard@^16.0.0 to fix some deprecated rules, which requires stylelint@^7.8.0.

Please could you update it? Sorry I've seen quite a few of these requests for previous versions, hope I'm not being annoying!

Thanks!

Thanks for the plugin.

I'm using gulp-stylelint and receiving linting errors on src files found in a node_modules folder that's not in the root of my folder. I specified ignorePath in the task options but haven't been able to get it working. This is what I'm currently working with:

gulp.task('stylelint', () => {
  gulp.src('assets/stylesheets/**/*.scss')
    .pipe(gulpStylelint({
      config: stylelintConfig,
      failAfterError: false,
      ignorePath: 'assets/stylesheets/node_modules/inuitcss/**/*.scss',
      reporters: [
        { formatter: 'string', console: true },
      ],
    }));
});

I've also specified a value to the ignoreFiles option in my .stylelintrc.json without any success. The plugin is working as intended on other src files (assets/stylesheets/**/*.scss)

🤔

We have stylelint in our project that is required as a peer dependency for some other tools. It would be nice to be able to use that version of stylelint instead of forcing the version that ships with gulp-stylelint

My current CSS task looks like:

var paths = {
  src: path.join(config.root.src, config.tasks.css.src, '/*.' + config.tasks.css.extensions),
  dest: path.join(config.root.dest, config.tasks.css.dest)
}

var cssTask = function () {
  return gulp.src(paths.src)
    .pipe(sourcemaps.init())
    .pipe(postcss(require('../lib/postCssProcessors')))
    .on('error', console.log)
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.dest))
    .pipe(browserSync.stream({match: '**/*.css'}))
}

When i change it like:

var paths = {
  src: path.join(config.root.src, config.tasks.css.src, '/*.' + config.tasks.css.extensions),
  dest: path.join(config.root.dest, config.tasks.css.dest)
}

var cssTask = function () {
  return gulp.src(paths.src)
    .pipe(stylelint({
      configFile: './stylelint.config.js'
    }))
    .pipe(sourcemaps.init())
    .pipe(postcss(require('../lib/postCssProcessors')))
    .on('error', console.log)
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.dest))
    .pipe(browserSync.stream({match: '**/*.css'}))
}

The CSS task when it is ran through the default task just seems to hang, when i remove the stylelint() part it goes back to being fine, is there something i'm missing or can it not be part of the compilation step?

The reason i want it part of the compilation step is because i already do have a separate stylelint task but Gulp is really intermittent with running that so i was gonna look to see if i can have it as part of the compilation task as that gets ran all the time instead of having it as a dependancy of the CSS task as the dependancy only gets run around 10% of the time. I know it's a deeper lying problem with my Gulp set up but i was looking to use this way as an interim step :)

I had to go to versión 2.0.2 because I get an error with version 3.2.0 executing the gulp task with no other change.

TypeError: undefined is not a function at Object. (...\node_modules\gulp-stylelint\node_modules\stylelint\node_modules\postcss-media-query-parser\dist\nodes\Container.js:38:30) at Module._compile (module.js:460:26) at Object.Module._extensions..js (module.js:478:10) at Module.load (module.js:355:32) at Function.Module._load (module.js:310:12) at Module.require (module.js:365:17) at require (module.js:384:17) at Object. (...\node_modules\gulp-stylelint\node_modules\stylelint\node_modules\postcss-media-query-parser\dist\index.js:8:18) at Module._compile (module.js:460:26) at Object.Module._extensions..js (module.js:478:10)

Is there a way to specify a stylelint config path?

Same way gulp-stylefmt allows this option?

https://github.com/morishitter/stylefmt/blob/master/lib/params.js#L96

I'm using since to limit the scope of incremental work but this means my report gets over written with just the last file's details.

Could I save a report for each file in the glob then run another task to concatenate them?

I am using a gulp-stylelint task with run-sequence like this

runSequence(['markup', 'stylelint', 'styles', 'eslint', 'browserify', 'images', 'fonts'], 'watch', cb);

and when stylelint fails also the run-sequence stream fails freezing and not watching anymore, this is what I get, see how it emit an error two times:

Maybe the problem is not returning an actual stream like gulp-eslint does instead of calling done?

Anyway here is my gulp task https://github.com/marcofugaro/gulp-frontend-boilerplate/blob/master/tasks/stylelint.js

First of all, thanks for the plugin, we are using it in our Yeoman generator.

Recently after updating to 4.0.0 version in generated projects, it seems that gulp-stylelint stopped respecting .stylelintignore we use in those projects.

Was wondering if it has something to do with stylelint update to v8.0.0, but when I run stylelint CLI on a project, it respects .stylelintignore

Thanks

When using console: true, empty lines are printed on the console when no errors were found:

[13:53:35] Starting 'styles:lint'...
[13:53:36]



[13:53:36] Finished 'styles:lint' after 795 ms

That's my config:

{
    syntax: 'scss',
    reporters: [
        {
            formatter: 'string',
            console: true
        }
    ]
}

Not sure if it's a bug or I didn't configure it correctly but the current behavior is weird.

My stylelint-config-standard v15 depends on stylelint 7.6.0.

Any chance of getting gulp-styelint updated to use this new version (7.6.0)?

Thanks.

Usually you'd put your required packages before using them, and thus would seem this:

const gulp = require('gulp');
const gulpStylelint = require('gulp-stylelint');

gulp.task('lint-css', function lintCssTask() {
  return gulp
    .src('src/**/*.css')
    .pipe(gulpStylelint({
      reporters: [
        {formatter: 'string', console: true}
      ]
    }));
});

clearer than what it is now:

gulp.task('lint-css', function lintCssTask() {
  const gulp = require('gulp');
  const gulpStylelint = require('gulp-stylelint');

  return gulp
    .src('src/**/*.css')
    .pipe(gulpStylelint({
      reporters: [
        {formatter: 'string', console: true}
      ]
    }));
});

I think there's an opportunity to make gulp-stylelint more Gulp-like by splitting linting and reporting into separate streams.

I recently migrated my "frontend starter" repo from Gulp 3 to 4, and volunteered as the guinea pig for Gulp Office Hours where @phated helped diagnose some issues with error handling and notifications (for better dev experience).

I still have an issue with gulp-stylelint — this manifests as the linter always ending successfully, so the notifier always fires a success (in addition to any warning/error). There's a good discussion going on here, and it's important to me because Stylelint is the best maintained linter for CSS:
gravitydepartment/frontend-starter#4

@olegskl — Do you have any ideas for this? Or would you be interested in participating in another Gulp Office Hours session to refactor?

Hi, thank you for your work

Since some days, that notation is giving indentations errors (SASS) :

// SASS map
$breakpoints: (
  '0' : 0,
  'xs': 480,
  'sm': 768,
  'md': 992,
  'lg': $max-site-width-int
);

 22:3  ×  Expected indentation of 0 spaces   indentation
 23:3  ×  Expected indentation of 0 spaces   indentation
 24:3  ×  Expected indentation of 0 spaces   indentation
 25:3  ×  Expected indentation of 0 spaces   indentation
 26:3  ×  Expected indentation of 0 spaces   indentation

Is-it a regression ?

I'm currently trying to pass my s/css files through gulp-stylelint using the fix: true flag. I also have a .stylelintignore file which ignores vendor style directories. The following gulpfile.js script successfully lints files, but when it comes to the files in the ignored directories, the contents are stripped and replaced with []. I was expecting that these files would be ignored (unaltered).

I haven't had enough experience with gulp to tell if this is expected behaviour, or if this is an issue with the implementation of my script, or some sort of buffer/stream issue with gulp or gulp-stylelint, OR if the issue lies with stylelint itself. This said, I noticed a comment in gulp-stylelint src/index.js line 155 which makes me think that gulp-stylelint is a good place to start:

  function onStreamEnd(done) {
    Promise
     ...
        process.nextTick(() => {
          // if the file was skipped, for example, by .stylelintignore, then res.results will be []
          const errorCount = lintResults.filter(res => res.results.length).reduce((sum, res) => {
     ...

The pattern [] referenced is exactly what I'm seeing. Any insight into how to fix this?

Many thanks in advance.

//.stylelintignore


/styles/scss/vendor/

//.stylelintrc

{
  "plugins": [
   "stylelint-scss"
  ],
  "extends": [
        "stylelint-config-recommended-scss"
  ],
  "rules": {
        "no-descending-specificity": null
  }
}

//gulpfile.js
const { src, dest, task, watch, series, parallel } = require("gulp");
const stylelint = require("gulp-stylelint");

function lint_styles(done) {
    src("./styles/**/*")
        .pipe(
            stylelint({
                reporters: [{ formatter: "string", console: true }],
                fix: true,
            })
        )
        .pipe(dest("./styles/"));
    done();
}

task("lintStyles", lint_styles);

Perhaps similar to the closed issue #18
I'm using the latest release 3.1.0

Message:
    No configuration found
Details:
    code: 78

Version 3.6.0 introduced a regression where Stylelint's "warning" severity was treated as an error.

The following gulp task including a gulp.dest is causing an unclear unHandeled 'error' event.

gulp.task('lint-fix:scss', function () {
  var stylelint = require('gulp-stylelint');

  var run = function () {
    gutil.log(gutil.colors.cyan('stylelint') + ': Autofixing');

    // rules config is in .stylelintrc
    return gulp.src(config.lint.scss, { base: './' })
      .pipe(stylelint({ fix: true }))
      .pipe(gulp.dest('./'));
  };
  return run();
});

Causing this:

events.js:183
      throw er; // Unhandled 'error' event
      ^
Error: Failed with 323 errors

The second pipe is causing it, but not sure what exactly.

Running the most recent stylehint, gulp stylehint and scss packages for stylehint. Seems to be occuring on SASS as regular CSS files.

In my scss file, I noticed that when I accidentally left some letters after the semicolon like so:
color: red;asdf, gulp-stylelint would replace the entire scss file content with a report string when I set fix: true.
My scss file after running gulp-stylelint, losing all of my scss styles:

[{"source":"assets/src/scss/components/_components.articles.scss","deprecations":[],"invalidOptionWarnings":[],"parseErrors":[],"errored":true,"warnings":[{"line":14,"column":33,"rule":"CssSyntaxError","severity":"error","text":"Unknown word (CssSyntaxError)"}]}]

I am not sure if its just my set up but I have tried postcss stylelint with the fix option set to true and it did not overwrite my entire file like gulp-stylelint did. It would be nice to get this fixed as gulp-stylelint has better reporting capabilities. Any ideas? Here's my gulp-stylelint task :

gulp.task('stylelint:newer', (done) => {
	$.pump([
		gulp.src(distPaths.scssGlob),
		customPlumber('Error Running esLint'),
		$.newer({dest: distPaths.scssDest}),
		$.stylelint({
			fix: true, 
			failAfterError: false,
			reportOutputDir: path.join(commonPaths.logPath, 'stylelint'),
			reporters: [
				{formatter: 'string', console: true},
				{formatter: 'verbose', save: 'report.txt'},
			],
			debug: true
		}),
		gulp.dest(distPaths.scssPath)
	], done);
});

It's weird to me that the package does export default and the examples use ES2015 import syntax when that is not actually supported by Node. I think most Node users would be using require(), so in my mind it makes sense to export in such a way that users don't have to var gulpStylelint = require('gulp-stylelint').default; but can just require('gulp-stylelint'); and to write examples with CommonJS. Do you disagree?

Seem to remember having had this issue some time ago, but can't find any related issues, so..

It seems to me that the plugin doesn't work correctly when watching "many" files.

When starting my watch process, I see the stylelint output in the console the first time. But when saving, and thus retriggering gulp-stylelint, I don't get any linter output no more.

I have tried debugging this, and it seems to me that it's got something to do with the number of files to process. When watching a significantly smaller set of files, everything works like a charm.

Stylelint 9.0.0 has been released recently but gulp-stylelint still requires a peer dependency of stylelint@^8.3.0.

npm install warning:
npm WARN [email protected] requires a peer of stylelint@^8.3.0 but none is installed. You must install peer dependencies yourself.

Hi, I can't get gulp-stylelint to autofix my scss files. When I run the CLI it fixes all issues. However, when I run gulp-stylelint I get:

mat@Mats-MacBook-Pro kube (development) $ gulp scsslinting
[15:26:36] Failed to load external module @babel/register
[15:26:36] Requiring external module babel-register
[15:26:39] Using gulpfile ~/Sites/mamp/steelvintage/wp-content/themes/kube/gulpfile.babel.js
[15:26:39] Starting 'scsslinting'...
[15:26:39] Finished 'scsslinting' after 433 ms

With the errors still there.

My Gulp task is:

export const scsslinting = () => {
	return src('.src/scss/**/*.scss')
		.pipe($.plumber())
		.pipe($.changed('./src/scss'))
		.pipe($.stylelint({
			fix: true,
			reporters: [{
				formatter: 'string',
				console: true,
			}],
			failAfterError: false,
		}))
		.pipe(dest('./src/scss'));
};

I've also tried seperating them into function and task like so:

function lintCssTask() {
	return src([
			'.src/scss/**/*.scss'
		])
		.pipe($.stylelint({
			fix: true,
			reporters: [{
				formatter: 'string',
				console: true,
			}],
			failAfterError: false,
		}))
		.pipe(dest('./src/scss'));
}

export const scsslinting = done => {
	lintCssTask();
	done();
};

But I still get the same 😭 . I'm running gulp v4 and gulp-stylelint ^8.0.0. The stylelint I have install is 9.10.1. I just can't seem to figure out why it's not running correctly when the CLI does.

Thanks for the great plugin and any help would be really appreciated.

stylelint@10 has been released https://github.com/stylelint/stylelint/releases/tag/10.0.0

it would be nice to support it

When stylelint is run with the fix: true option, it will fail if the src contained an excluded file that is included in the css building task:

var config = {
    lintCss: {
        notifyOptions: {
            title: 'Lint: CSS',
            message: 'Done',
            onLast: true
        },
        src: [
            path.assets + 'css/src/**/*.scss',
            '!' + path.assets + 'css/src/core/reset/_normalize.scss',
            '!' + path.assets + 'css/src/vendor/**'
        ],
        stylelintOptions: {
            reporters: [{
                formatter: 'string',
                console: true
            }],
            fix: true
        }
    }
};

function lintCss () {
    var task = config.task.lintCss;

    return pipeline([
        gulp.src(task.src),
        stylelint(task.stylelintOptions),
        gulpif(!hideNotify, notify(task.notifyOptions)),
        gulp.dest('css/src')
    ], errorFormatter);
};

[17:57:28] Error in plugin "gulp-sass"
Message:

Plugin: gulp-sass
File: css/src//*.scss,!./css/src/core/reset/_normalize.scss,!./css/src/vendor//app.scss
Line: 50
Column: 1
Note: File to import not found or unreadable: core/reset/normalize.

Hey!

It's probably just my configuration which is done wrong, but currently when I get a linting issue, it outputs the issue, but not which file the error comes from. This can be frustrating when working multiple people on a project.

Do you guys have an idea what might could be wrong or how I get the filename as well with the linting message? :)

Here's the Gulp configuration.

  return gulp.src('./src/**/*.scss')
             .pipe(plumber({
               errorHandler: function(error) {
                 console.log(error.message);
                 this.emit('end');
               }
             }))
             .pipe(sourcemaps.init())
             .pipe(gulpStylelint({
               reportOutputDir: 'reports/lint',
               reporters: [
                 {
                   formatter: 'string',
                   console: true
                 }
               ]
             }))
             .pipe(sass({
               importer: tildeImporter,
             })) 
             .pipe(postcss(processors))
             .pipe(sourcemaps.write('.')) 
             .pipe(gulp.dest('./dist'));
});

And here's the output message without the filename.

[10:51:47] Starting 'scss'...
[10:51:47]
✖  Expected no more than 1 empty line   max-empty-lines

Failed with 1 error
[10:51:47] Finished 'scss' after 269 ms

Thanks a lot!

gulp-util has been deprecated recently. Continuing to use this dependency may prevent the use of your library with the latest release of Gulp 4 so it is important to replace gulp-util.

The README.md lists alternatives for all the components so a simple replacement should be enough.

Your package is popular but still relying on gulp-util, it would be good to publish a fixed version to npm as soon as possible.

See:

• https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
• gulpjs/gulp-util#143

I would like to start promoting gulp-stylelint as the preferred way to use stylelint with gulp (instead of as part of the chain of PostCSS plugins), especially because of the ability for stylelint-specific reporting.

However, my initial concern about this plugin is that it has its own reporters instead of using stylelint's extendability. There is probably duplicated effort now between gulp-stylelint-checkstyle-reporter and stylelint-checkstyle-reporter. So I'm wondering: Why use gulp-stylelint reporters instead of standard stylelint reporters, which could then be available to stylelint users that don't use gulp?

Hi,

Is there a way to get a summary with a counter for all errors and warnings in all linted files? We are building a frontend starter kit at my agency and we need to print a summary (we also need to pass this summary to gulp-notify).

I was able to build a summary with gulp-eslint with eslint.results() but I can't find a similar way with gulp-stylelint.

I can build a summary myself but I need a way to know if there is a error or warning in a file. Right now, I'm not able to find that information in my gulp stream.

It's my first time using gulp-stylelint and I want to thank you guys, its great.

I am using the latest version and encountering a problem with the new --fix and fix: true command from Stylelist.

Is an update for Stylelist Version 7.11.0 coming soon?

It seems that the 'fix: true' command does the fix but does not return it to the stream to get it saved properly.

Here is my gulp command:
gulp.task('format-stylelint', function() {
return gulp.src(sourcePaths.styles)
.pipe(plumber({errorHandler: notify.onError("SASS Lint Error: <%= error.message %>")}))
.pipe(stylelint({
config: {
extends: 'stylelint-config-standard',
rules: {
"indentation": "tab"
},
fix: true
},
fix: true,
reporters: [
{formatter: 'verbose', console: true}
],
failAfterError: false
}))
.pipe(gulp.dest( distPaths.sass ))
});

I do see in the terminal the number of errors drop drastically but when saving back the files and comparing both folders, I get the same files (no changes made).

"Help us fix the ecosystem
Using these steps, you can help plugin authors migrate away from gulp-util."

Following along with https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5 I'm seeing the following dependency tree after running npm ls gulp-util:

[email protected] /Users/me
└─┬ [email protected]
  └── [email protected]

Does gulp-stylelint really need to depend upon gulp-util?

I see that stylelint is a dev dependency of gulp-stylelint but it's not part of the dependencies. Why is that? (When I install only gulp-stylelint, I get a module load error when it looks for stylelint—which would seem to indicate that stylelint is in fact a dependency, despite not being listed there.)

I do see where the docs say to install both packages, so I'm guessing there's some very good reason why it's omitted.

I'm trying to pass quiet and the ignorePath in the config object and it appears that they are both ignored. Is this a known bug? I've searched and haven't found anything about these features not working.

TL;DR

Why does the rules at-rule-name-case, function-name-case, property-case, selector-pseudo-element-case, selector-pseudo-class-case, and unit-case produces an error?

Problem

I have the following .styleintrc in the root of my project:

{
  "rules": {
    "at-rule-empty-line-before": [ "always", {
      "except": [ "blockless-group", "first-nested" ],
      "ignore": ["after-comment"],
    } ],
    "at-rule-name-case": "lower",
    "at-rule-semicolon-newline-after": "always",
    "block-closing-brace-newline-after": "always",
    "block-closing-brace-newline-before": "always-multi-line",
    "block-closing-brace-space-before": "always-single-line",
    "block-no-empty": true,
    "block-opening-brace-newline-after": "always-multi-line",
    "block-opening-brace-space-after": "always-single-line",
    "block-opening-brace-space-before": "always",
    "color-hex-case": "lower",
    "color-hex-length": "short",
    "color-no-invalid-hex": true,
    "comment-empty-line-before": [ "always", {
      "except": ["first-nested"],
      "ignore": ["stylelint-commands"],
    } ],
    "comment-whitespace-inside": "always",
    "declaration-bang-space-after": "never",
    "declaration-bang-space-before": "always",
    "declaration-block-no-ignored-properties": true,
    "declaration-block-no-shorthand-property-overrides": true,
    "declaration-block-semicolon-newline-after": "always-multi-line",
    "declaration-block-semicolon-space-after": "always-single-line",
    "declaration-block-semicolon-space-before": "never",
    "declaration-block-single-line-max-declarations": 1,
    "declaration-block-trailing-semicolon": "always",
    "declaration-colon-newline-after": "always-multi-line",
    "declaration-colon-space-after": "always-single-line",
    "declaration-colon-space-before": "never",
    "function-calc-no-unspaced-operator": true,
    "function-comma-newline-after": "always-multi-line",
    "function-comma-space-after": "always-single-line",
    "function-comma-space-before": "never",
    "function-linear-gradient-no-nonstandard-direction": true,
    "function-name-case": "lower",
    "function-parentheses-newline-inside": "always-multi-line",
    "function-parentheses-space-inside": "never-single-line",
    "function-whitespace-after": "always",
    "indentation": 4,
    "max-empty-lines": 1,
    "media-feature-colon-space-after": "always",
    "media-feature-colon-space-before": "never",
    "media-feature-no-missing-punctuation": true,
    "media-feature-range-operator-space-after": "always",
    "media-feature-range-operator-space-before": "always",
    "media-query-list-comma-newline-after": "always-multi-line",
    "media-query-list-comma-space-after": "always-single-line",
    "media-query-list-comma-space-before": "never",
    "media-query-parentheses-space-inside": "never",
    "no-eol-whitespace": true,
    "no-invalid-double-slash-comments": true,
    "no-missing-eof-newline": true,
    "number-leading-zero": "always",
    "number-no-trailing-zeros": true,
    "number-zero-length-no-unit": true,
    "property-case": "lower",
    "rule-non-nested-empty-line-before": [ "always-multi-line", {
      "ignore": ["after-comment"],
    } ],
    "selector-combinator-space-after": "always",
    "selector-combinator-space-before": "always",
    "selector-list-comma-newline-after": "always-multi-line",
    "selector-list-comma-space-before": "never",
    "selector-pseudo-element-case": "lower",
    "selector-pseudo-class-case": "lower",
    "selector-pseudo-element-colon-notation": "double",
    "selector-type-case": "lower",
    "string-no-newline": true,
    "unit-no-unknown": true,
    "unit-case": "lower",
    "value-list-comma-newline-after": "always-multi-line",
    "value-list-comma-space-after": "always-single-line",
    "value-list-comma-space-before": "never",
  },
}

When I run the Gulp task with stylelint, I get the following error:

Error in plugin 'gulp-stylelint'
Message:
    Undefined rule "at-rule-name-case"
Details:
    code: 78

I isolated that rule:

{
  "rules": {
    "at-rule-name-case": "lower",
  },
}

I get the same error:

Error in plugin 'gulp-stylelint'
Message:
    Undefined rule "at-rule-name-case"
Details:
    code: 78

I try to figure out what exactly is causing the failure. It does not seem to be the syntax, because I tested the plugin with other rules:

{
  "rules": {
    "at-rule-empty-line-before": [ "always", {
      "except": [ "blockless-group", "first-nested" ],
      "ignore": ["after-comment"],
    } ],
  },
}

{
  "rules": {
    "value-list-comma-newline-after": "always-multi-line",
    "value-list-comma-space-after": "always-single-line",
    "value-list-comma-space-before": "never",
  },
}

These rules run as expected. I return to my original rule set, and solely remove the rule in question. By doing that, another rule gave an error:

Error in plugin 'gulp-stylelint'
Message:
    Undefined rule "function-name-case"
Details:
    code: 78

I continued this process of removing the rules that gave me the error. The following are the error messages given by those rules inclusion:

Error in plugin 'gulp-stylelint'
Message:
    Undefined rule "property-case"
Details:
    code: 78

Error in plugin 'gulp-stylelint'
Message:
    Undefined rule "selector-pseudo-element-case"
Details:
    code: 78

Error in plugin 'gulp-stylelint'
Message:
    Undefined rule "selector-pseudo-class-case"
Details:
    code: 78

Error in plugin 'gulp-stylelint'
Message:
    Undefined rule "unit-case"
Details:
    code: 78

All of these rules have the value lower, so I thought that the error had to do with this. I checked the stylelint rules, and all of these failing rules can take lower as a value. Not only that, but there are other rules like color-hex-case and selector-type-case that have the value lower and do not produce an error.

Why does the rules at-rule-name-case, function-name-case, property-case, selector-pseudo-element-case, selector-pseudo-class-case, and unit-case produces the error Undefined rule when the other rules are capable of running fine?

Lots of bugfixes and more. ;)

Hello!

package.json dependencies

"devDependencies": {
  "gulp": "^3.9.1",
  "gulp-stylelint": "^3.8.0"
},
"dependencies": {
  "modernizr": "^3.3.1"
}

gulpfile

const gulp = require('gulp');

gulp.task('lint-css', function lintCssTask() {
  const gulpStylelint = require('gulp-stylelint');
  return gulp
    .src('style.css')
    .pipe(gulpStylelint({
    reporters: [
      {formatter: 'string', console: true}
    ]
  }));
});

1. Run npm i for install dependencies
2. Run gulp lint-css
3. Get error!

[16:32:31] Starting 'lint-css'...
[16:32:31] 'lint-css' errored after 795 ms
[16:32:31] TypeError in plugin 'gulp-stylelint'
Message:
    Cannot read property '0' of undefined

I have added debug: true and see that:

TypeError: Cannot read property '0' of undefined
    at _.omitBy (/Users/andrey/Work/Repositories/test/node_modules/stylelint/lib/formatters/jsonFormatter.js:8:48)
    at /Users/andrey/Work/Repositories/test/node_modules/lodash/lodash.js:11233:17
    at /Users/andrey/Work/Repositories/test/node_modules/lodash/lodash.js:3085:13
    at /Users/andrey/Work/Repositories/test/node_modules/lodash/lodash.js:3925:15
    at baseForIn (/Users/andrey/Work/Repositories/test/node_modules/lodash/lodash.js:2509:40)
    at basePickBy (/Users/andrey/Work/Repositories/test/node_modules/lodash/lodash.js:3084:7)
    at Function.omitBy (/Users/andrey/Work/Repositories/test/node_modules/lodash/lodash.js:11232:14)
    at results.map.result (/Users/andrey/Work/Repositories/test/node_modules/stylelint/lib/formatters/jsonFormatter.js:8:14)
    at Array.map (native)
    at module.exports (/Users/andrey/Work/Repositories/test/node_modules/stylelint/lib/formatters/jsonFormatter.js:7:34)

Also:

1. stylelintrc - no matter
2. Error only if css file exist

How it works:

1. Run npm i gulp gulp-stylelint modernizr instead of npm i
2. Run gulp lint-css
3. Works!

It depends on order of packages installing!

Node v6.2.1
NPM 3.10.6
MacOS 10.12.2

Just wanted to bring to your attention that a new version of stylelint has been released.

Thank you for maintaining this Gulp plugin :)

I am trying to separate all my tasks into separate files but for some odd reason stylelint starts but does not finish and just seems to abort with no error:

➜  $ gulp lintScss
[13:15:29] Requiring external module babel-register
(node:92664) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[13:15:29] Using gulpfile ~/gulpfile.babel.js
[13:15:29] Starting 'lintScss'...
➜  $

The same bit of code in the gulp file works fine just wondering if there is anything that would stop this working when the task is loaded from an external file?

In gulp file:

import gulp from 'gulp';
import Config from './gulpfile.config.js';
import loadPlugins from 'gulp-load-plugins';

let config = new Config($);

const $ = loadPlugins({
  pattern: ['*'],
  rename: {
    'gulp-stylelint': 'stylinter'
  }
});

function getTask(task, files) {
  return require(config.tasks.src + task)(gulp, $, config);
}

gulp.task('lintScss', getTask('lintScss'));

In the separate file:

module.exports = function (gulp, $, config) {
  return function (cb) {
    gulp.src('./scss/**/*.scss')
      .pipe($.stylinter({
        configFile: 'stylelint.json',
        syntax: 'scss',
        failAfterError: true,
        debug: true
        reportOutputDir: './reports/lint',
        reporters: [
          {formatter: 'string', console: true}
        ]
      }));
  };
};

Given this basic gulp setup:

gulp.src('src/css/scss/**/*.scss')
	.pipe(stylelint({
		failAfterError: true,
		reportOutputDir: "reports/",
		reporters: [
			{ formatter: 'verbose', console: true},
			{ formatter: 'json', save: 'report.json'}
		],
		debug: true
	}));

and this folder structure:

src
├── css
│   └── scss
│       ├── base
│       │   ├── bourbon
│       │   └── libs
│       ├── legacy
│       ├── modules
│       │   └── pages
│       ├── style-guide
│       └── styles.scss
└── js

and ever folder within src/css/scss has at least one _file.scss within it, gulp-stylelint does not go more than one level deep to find files to lint. So, in this case it only lints styles.scss rather than allt he files within the scss/ directory.

Hi there,

Firstly, really useful plugin so thank you 👍 . I have encountered an issue when trying to lint my SASS files using automated CI tests. I have a simple implementation of gulp-stylelint in a gulp task as such:

gulp.task('css', function() {
    return gulp.src(config.sass.glob)
        .pipe($.plumber(function (error) {
            $.util.log($.util.colors.red('Error (' + error.plugin + '): ' + error.message + '\n'));
            this.emit('end');
        }))
        .pipe($.newer(config.sass.output))
        .pipe($.sass(config.sass.options.paths).on("error", $.notify.onError(function(error) {
            return "SCSS could not be compiled: " + error.message;
        })))
        //Stylelint code
        .pipe($.gStylelint({
            failAfterError: true,
            reporters: [
                {formatter: 'verbose', console: true}
            ]
        }))
        .pipe($.rename(config.sass.options.renaming))
        .pipe(gulp.dest(config.sass.output));
});

and when it spots an error based on my .stylelintrc config file, it displays it in the console (all good 👍 ). This is good locally, however the failAfterError option is not behaving as I would expect it to, as the error code when it 'fails' is always 0. I would expect a proper failure to stop any subsequent tasks and return an error code above 0.

This is important as CI tests require that a task errors with an exit code greater than 0 for it to be considered a failed test. However in this instance if you run:

gulp css && echo $?

You will always get an error code of 0 regardless of whether gulp-stylelint finds linting errors in your files or not.

It would good to know if I have implemented this feature wrong. Thanks!

Hi,
Thanks for your hard work on this!

I just tried running this on one of my projects as a part of testing out the master branch of stylelint (since it contains some pretty major internal changes).

However, gulp-stylelint crashed immediately because the formatters doesn't reside in stylelint/dist/formatters anymore (they're in stylelint/lib/formatters now).

I filed an issue about exposing a formatters property over at the main stylelint project and I'd be happy to make any changes necessary here as well (either just changing the path or using a new formatters property if that's accepted).

Cheers,
Jonathan

Hi there, I am trying to understand using gulp-stylelint with gulp-cache. I have looked online for any hints of how to implement caching with gulp-stylint and couldn't find one. I read #75 and I am not sure how the caching can be done on Gulp level. If I were to use gulp-cache I will need to remove the cache keys when an error occur like so (taken from gulp-eslint examples):
.pipe($.eslint.result((result) => {
if (result.warningCount > 0 || result.errorCount > 0) {
delete $.cached.caches.eslint[path.resolve(result.filePath)];
}
}))
If this is the way to do it, then how can I get hold of the file path that threw an error in stylelint? And I would assume to do the cache delete in an error handling event.

I apologize in advance if this is not the place to ask such questions as I have exhausted my options. Thank you.

Hi, thank you for this plugin. I'm trying to run it in my project and the following works for a single file:

return gulp.src('./frontend/src/sass/components/_Alert.scss')
    .pipe(stylelint({
        syntax: 'scss',
        debug: true,
        reporters: [{
            formatter: 'string',
            console: true
        }]
    }));

I have an error in _Alert.scss that outputs properly.

However, if I try to run it on a glob of all the Sass files in that directory, as this, I get no errors and it seems as though it's passed properly when it shouldnt because of the error in _Alert.scss.

return gulp.src('./frontend/src/sass/components/*.scss')
    .pipe(stylelint({
        syntax: 'scss',
        debug: true,
        reporters: [{
            formatter: 'string',
            console: true
        }]
    }));

Am I missing something stupid here?

Thanks in advance.

This afternoon I've been debugging my gulpfile, trying to figure out why it takes about 15 seconds for my tasks to even start. I discovered that about half of the problem (8 seconds) was from my styles task, and about half of that (4 seconds) was gulp-stylelint.

I've swapped out some packages, removed some others, and things are much quicker now, but gulp-stylelint is still taking up about 4 seconds every time my styles task gets ran.

Is there anything that can be done to speed this up?