Code Monkey home page Code Monkey logo

gulp-stylelint-esm's Introduction

Gulp Stylelint

NPM version GitHub package.json version license Depfu Status Renovate enabled GitHub Workflow Status

This package is pure ESM. Please read this.

A Gulp plugin that runs stylelint results through a list of reporters with ESM support.

Installation

Note

REQUIREMENTS: Supports gulp v4 and v5, stylelint > 16 and node >= 18.12.0.

# YARN
yarn add stylelint gulp-stylelint-esm -D
# NPM
npm install stylelint gulp-stylelint-esm --save-dev

Quick start

Once you have configured stylelint (e.g. you have a .stylelintrc file), start with the following code. You will find additional configuration options below.

import gulp from 'gulp';
import gStylelintEsm from 'gulp-stylelint-esm';

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

Formatters

Below is the list of currently available stylelint formatters. Some of them are bundled with stylelint by default and exposed on gStylelintEsm.formatters object. Others need to be installed. You can write a custom formatter to tailor the reporting to your needs.

Formatters bundled with stylelint: "compact", "github", "json", "string (default)", "tap", "unix", "verbose".

Options

gulp-stylelint-esm supports all stylelint and Node.js API options except:

  • files, code will be provided by gulp instead
  • formatter, formatters are defined in the reporters option
  • cache, gulp caching should be used instead

and accepts a custom set of options listed below:

import gulp from 'gulp';
import gStylelintEsm from 'gulp-stylelint-esm';
import { myStylelintFormatter } from 'my-stylelint-formatter';

function lintCssTask() {
  return gulp
    .src('src/**/*.css')
    .pipe(gStylelintEsm({
      failAfterError: true,
      reportOutputDir: 'reports/lint',
      reporters: [
        { formatter: 'verbose', console: true },
        { formatter: 'json', save: 'report.json' },
        { formatter: myStylelintFormatter, save: 'my-custom-report.txt' }
      ],
      debug: true
    }));
}

failAfterError

When set to true, the process will end with non-zero error code if any error-level warnings were raised. Defaults to true.

reportOutputDir

Base directory for lint results written to filesystem. Defaults to current working directory process.cwd().

reporters

List of reporter configuration objects (see below). Defaults to an empty array [].

{
  // stylelint results formatter (required):
  // - pass a function for imported, custom or exposed formatters
  // - pass a string for formatters bundled with stylelint
  //   "string (default)", "compact", "github", "json", "tap", "unix", "verbose"
  formatter: myFormatter,

  // save the formatted result to a file (optional):
  save: 'text-report.txt',

  // log the formatted result to console (optional):
  console: true
}

debug

When set to true, the error handler will print an error stack trace. Defaults to false.

Autofix

The fix: true option instructs stylelint to try to fix as many issues as possible. The fixes are applied to the gulp stream. The fixed content can be saved to file using gulp dest.

import gulp from 'gulp';
import gStylelintEsm from 'gulp-stylelint-esm';

function fixCssTask() {
  return gulp
    .src('src/**/*.css')
    .pipe(gStylelintEsm({
      fix: true
    }))
    .pipe(gulp.dest('src'));
}

License

See the LICENSE file for license rights and limitations (MIT).

gulp-stylelint-esm's People

Contributors

adorade avatar kksandr7 avatar renovate[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

kksandr7

gulp-stylelint-esm's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

  • chore(deps): update babel packages (@babel/core, @babel/eslint-parser, @babel/preset-env)
  • chore(deps): update dependency stylelint to v16.8.1
  • chore(deps): update eslint packages (major) (eslint, eslint-config-stylelint)
  • chore(deps): lock file maintenance
  • ๐Ÿ” Create all pending approval PRs at once ๐Ÿ”

Detected dependencies

github-actions
.github/workflows/test.yml
  • actions/checkout v4
  • actions/setup-node v4
npm
package.json
  • @adorade/plugin-error 1.0.0
  • @jridgewell/trace-mapping 0.3.25
  • ansi-colors 4.1.3
  • fancy-log 2.0.0
  • @babel/core 7.24.7
  • @babel/eslint-parser 7.24.7
  • @babel/preset-env 7.24.7
  • babel-jest 29.7.0
  • eslint 8.57.0
  • eslint-config-stylelint 21.0.0
  • gulp 5.0.0
  • gulp-clean-css 4.3.0
  • gulp-concat 2.6.1
  • jest 29.7.0
  • sinon 18.0.0
  • stylelint 16.6.1
  • stylelint 16
  • node >=18.12.0

  • Check this box to trigger a request for Renovate to run again on this repository

Add more tests

Add more tests or update the existing ones. Since I might overlook something, I want to ensure that everything functions correctly.

For testing purposes, I will be using only Gulp v5.

The failAfterError option does not work

Hi, the failAfterError option doesn't work because the error is thrown via this.emit('error', new PluginError(...)) instead of being passed to done(new PluginError(...)).

I suggest replacing all this.emit('error', new PluginError(...)) calls with done(new PluginError(...)).
It's also worth adding test coverage so this error doesn't happen again.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.