npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gulp-csslint-scss-reporter

v0.0.1

Published

A console reporter for csslint that maps errors back to the original scss files using sourcemaps

Downloads

20

Readme

gulp-csslint-scss-reporter

A console reporter for csslint that maps errors back to the original scss files using scss source maps.

Installation

Install gulp-csslint-scss-reporter as a development dependency.

npm install --save-dev gulp-csslint-scss-reporter

gulp-csslint, gulp-sourcemaps, and gulp-sass should also be installed.

Usage

Scss source maps are required in order to map errors back onto the original scss files. If scss source maps are not available, an error will be thrown.

var gulp = require('gulp');
var sass = require('gulp-sass');
var csslint = require('gulp-csslint');
var sourcemaps = require('gulp-sourcemaps');
var scssReporter = require('gulp-csslint-scss-reporter');

gulp.task('sass', function () {
  return gulp.src('src/**/*.scss')
    .pipe(sourcemaps.init()) // sourcemaps are required
    .pipe(sass())
    .pipe(csslint())
    .pipe(scssReporter())
    .pipe(gulp.dest('build'));
});

API

scssReporter()

Errors will be reported in all files and @imports.

scssReporter(pattern)

pattern

Type: String or Array

A valid pattern for globule.isMatch().

If an error is in an imported file, you can specify a whitelist pattern to filter out unwanted errors in the imported files. Only imported files that match the pattern will emit errors. This only applies to imports, any file that is in the pipeline directly will always have linting errors reported.

For example, if you @import an external sass/scss file from bower_components and don't care about linting errors in it, you can whitelist the results to only your sources.

src/example.scss

@import "bower_components/my-module/src/hello.scss";
@import "bower_components/my-module/src/world.scss";

gulpfile.js

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var sass = require('gulp-sass');
var csslint = require('gulp-csslint');
var scssReporter = require('gulp-csslint-scss-reporter');

gulp.task('sass', function () {
  return gulp.src('src/**/*.scss')
    .pipe(sourcemaps.init()) // sourcemaps are required
    .pipe(sass())
    .pipe(csslint())
    .pipe(sassReporter('src/**/*.scss')) // errors in bower_components will be ignored
    .pipe(gulp.dest('build'));
});

Error Handling

Errors will be written to the console as they are encountered. An exception will be thrown after reporting all errors.

To capture that exception so that the pipline will continue, add a listener to the error event and then you can handle the error as you like.

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var sass = require('gulp-sass');
var csslint = require('gulp-csslint');
var scssReporter = require('gulp-csslint-scss-reporter');

var shouldThrow = true;

gulp.task('sass', function () {
  return gulp.src('src/**/*.scss')
    .pipe(sourcemaps.init()) // sourcemaps are required
    .pipe(sass())
    .pipe(csslint())
    .pipe(scssReporter())
    .on('error', function (err) {
      // decide whether to throw the error
      if (shouldThrow) {
        throw err;
      }
    })
    .pipe(gulp.dest('build'));
});