Update to Stylelint 16 & Migrate to ESM

.eslintrc.js → .eslintrc.cjs

@@ -4,7 +4,8 @@ module.exports = {
     node: true,
     es6: true
   },
-  "parserOptions": {
-    "ecmaVersion": 8
+  parserOptions: {
+    sourceType: "module",
+    ecmaVersion: 15
   }
 };

package.json

@@ -1,8 +1,9 @@
 {
   "name": "@ronilaukkarinen/gulp-stylelint",
-  "version": "14.1.2",
+  "version": "15.0.0",
   "description": "Gulp plugin for running Stylelint results through various reporters.",
-  "main": "src/index.js",
+  "exports": "./src/index.js",
+  "type": "module",
   "files": [
     "/src/*.js"
   ],
@@ -29,10 +30,10 @@
   },
   "homepage": "https://github.com/ronilaukkarinen/gulp-stylelint",
   "engines": {
-    "node": "^12.20.0 || ^14.13.1 || >=15.14.0 || >=16.0.0"
+    "node": ">=18.12.0"
   },
   "peerDependencies": {
-    "stylelint": "10 - 15"
+    "stylelint": "16"
   },
   "dependencies": {
     "@jridgewell/trace-mapping": "^0.3.17",
@@ -55,8 +56,8 @@
     "jest": "^29.4.2",
     "postcss": "^8.4.31",
     "sinon": "^15.0.1",
-    "stylelint": "^15.11.0",
-    "stylelint-config-standard": "^34.0.0",
+    "stylelint": "^16.1.0",
+    "stylelint-config-standard": "^36.0.0",
     "tape": "^5.6.3"
   },
   "eslintConfig": {

src/apply-sourcemap.js

@@ -1,6 +1,4 @@
-'use strict';
-
-const {TraceMap, originalPositionFor} = require('@jridgewell/trace-mapping');
+import {TraceMap, originalPositionFor} from '@jridgewell/trace-mapping';
 
 /**
  * Applies a sourcemap to Stylelint result.
@@ -9,7 +7,7 @@ const {TraceMap, originalPositionFor} = require('@jridgewell/trace-mapping');
  * @param {Object} sourceMap - Sourcemap object.
  * @return {Object} Rewritten Stylelint result.
  */
-module.exports = async function applySourcemap(lintResult, sourceMap) {
+export default async function applySourcemap(lintResult, sourceMap) {
   const sourceMapConsumer = new TraceMap(sourceMap);
 
   lintResult.results = lintResult.results.reduce((memo, result) => {

src/index.js

@@ -1,18 +1,18 @@
-'use strict';
+import PluginError from 'plugin-error';
+import { Transform } from 'stream';
+import stylelint from 'stylelint';
 
-const PluginError = require('plugin-error');
-const { Transform } = require("stream");
-const {formatters, lint} = require('stylelint');
-
-const applySourcemap = require('./apply-sourcemap');
-const reporterFactory = require('./reporter-factory');
+import applySourcemap from './apply-sourcemap.js';
+import reporterFactory from './reporter-factory.js';
 
 /**
  * Name of this plugin for reporting purposes.
  * @type {String}
  */
 const pluginName = 'gulp-stylelint';
 
+const { lint } = stylelint;
+
 /**
  * Stylelint results processor.
  * @param {Object} [options] - Plugin options.
@@ -22,7 +22,7 @@ const pluginName = 'gulp-stylelint';
  * @param {Boolean} [options.debug] - If true, error stack will be printed.
  * @return {Stream} Object stream usable in Gulp pipes.
  */
-module.exports = function gulpStylelint(options) {
+export default function gulpStylelint(options) {
 
   /**
    * Plugin options with defaults applied.
@@ -102,8 +102,8 @@ module.exports = function gulpStylelint(options) {
           lintResult
       )
       .then(lintResult => {
-        if (lintOptions.fix && lintResult.output) {
-          file.contents = Buffer.from(lintResult.output);
+        if (lintOptions.fix && lintResult.code) {
+          file.contents = Buffer.from(lintResult.code);
         }
 
         done(null, file);
@@ -194,4 +194,5 @@ module.exports = function gulpStylelint(options) {
  * @see https://github.com/olegskl/gulp-stylelint/issues/3#issuecomment-197025044
  * @type {Object}
  */
-module.exports.formatters = formatters;
+gulpStylelint.formatters = stylelint.formatters;
+

src/reporter-factory.js

@@ -1,36 +1,32 @@
-'use strict';
+import fancyLog from 'fancy-log';
+import stylelint from 'stylelint';
 
-const fancyLog = require('fancy-log');
-const {formatters} = require('stylelint');
-
-const writer = require('./writer');
+import writer from './writer.js';
 
 /**
  * Creates a reporter from the given config.
  * @param {Object} [config] - Reporter config.
  * @param {Object} [options] - Plugin options.
  * @return {Function} Reporter.
  */
-module.exports = function reporterFactory(config = {}, options = {}) {
-
-  /**
-   * Formatter for stylelint results.
-   *
-   * User has a choice of passing a custom formatter function,
-   * or a name of formatter bundled with stylelint by default.
-   *
-   * @type {Function}
-   */
-  const formatter = typeof config.formatter === 'string' ?
-    formatters[config.formatter] :
-    config.formatter;
-
+export default function reporterFactory(config = {}, options = {}) {
   /**
    * Reporter.
    * @param {[Object]} results - Array of stylelint results.
    * @return {Promise} Resolved when writer and logger are done.
    */
-  return function reporter(results) {
+  return async function reporter(results) {
+    /**
+     * Formatter for stylelint results.
+     *
+     * User has a choice of passing a custom formatter function,
+     * or a name of formatter bundled with stylelint by default.
+     *
+     * @type {Function}
+     */
+    const formatter = typeof config.formatter === 'string' ?
+      await stylelint.formatters[config.formatter] :
+      config.formatter;
 
     /**
      * Async tasks performed by the reporter.

src/writer.js

@@ -1,8 +1,6 @@
-'use strict';
-
-const ansiColors = require('ansi-colors');
-const fs = require('fs');
-const path = require('path');
+import ansiColors from 'ansi-colors';
+import fs from 'fs';
+import path from 'path';
 
 /**
  * Creates the output folder and writes formatted text to a file.
@@ -11,7 +9,7 @@ const path = require('path');
  * @param {String} [destRoot] - Destination root folder, defaults to cwd.
  * @return {Promise} Resolved when folder is created and file is written.
  */
-module.exports = function writer(text, dest, destRoot = process.cwd()) {
+export default function writer(text, dest, destRoot = process.cwd()) {
   const fullpath = path.resolve(destRoot, dest);
 
   return new Promise((resolve, reject) => {

test/fixtures/basic.css

@@ -1,3 +1,3 @@
 .foo {
-  color: #f00;
+  color: #ff0000aa;
 }

test/index.spec.js

@@ -1,12 +1,17 @@
-'use strict';
+import fs from 'fs';
+import gulp from 'gulp';
+import gulpSourcemaps from 'gulp-sourcemaps';
+import path from 'path';
+import test from 'tape';
 
-const fs = require('fs');
-const gulp = require('gulp');
-const gulpSourcemaps = require('gulp-sourcemaps');
-const path = require('path');
-const test = require('tape');
+import gulpStylelint from '../src/index.js';
 
-const gulpStylelint = require('../src/index');
+import { URL } from 'url'; // in Browser, the URL in native accessible on window
+
+// Will contain trailing slash
+const __dirname = new URL('.', import.meta.url).pathname;
+
+const tmpDir = path.resolve(__dirname, '../tmp');
 
 /**
  * Creates a full path to the fixtures glob.
@@ -48,7 +53,7 @@ test('should emit an error when linter complains', t => {
   gulp
     .src(fixtures('invalid.css'))
     .pipe(gulpStylelint({config: {rules: {
-      'color-hex-case': 'lower'
+      'color-hex-length': 'long'
     }}}))
     .on('error', () => t.pass('error has been emitted correctly'));
 });
@@ -58,7 +63,7 @@ test('should ignore file', t => {
   gulp
     .src([fixtures('basic.css'), fixtures('invalid.css')])
     .pipe(gulpStylelint({
-      config: {rules: {'color-hex-case': 'lower'}},
+      config: {rules: {'color-hex-length': 'long'}},
       ignorePath: fixtures('ignore')
     }))
     .on('finish', () => t.pass('no error emitted'));
@@ -71,27 +76,27 @@ test('should fix the file without emitting errors', t => {
     .pipe(gulpSourcemaps.init())
     .pipe(gulpStylelint({
       fix: true,
-      config: {rules: {'color-hex-case': 'lower'}}
+      config: {rules: {'color-hex-length': 'long'}}
     }))
     .pipe(gulp.dest(path.resolve(__dirname, '../tmp')))
     .on('error', error => t.fail(`error ${error} has been emitted`))
     .on('finish', () => {
       t.equal(
         fs.readFileSync(path.resolve(__dirname, '../tmp/invalid.css'), 'utf8'),
-        '.foo {\n  color: #fff;\n}\n',
+        '.foo {\n  color: #FFFFFF;\n}\n',
         'report file has fixed contents'
       );
       t.pass('no error emitted');
     });
 });
 
-test('should expose an object with stylelint formatter functions', t => {
+test('should expose an object with stylelint formatter promises', t => {
   t.plan(2);
   t.equal(typeof gulpStylelint.formatters, 'object', 'formatters property is an object');
 
   const formatters = Object
     .keys(gulpStylelint.formatters)
     .map(fName => gulpStylelint.formatters[fName]);
 
-  t.true(formatters.every(f => typeof f === 'function'), 'all formatters are functions');
+  t.true(formatters.every(f => typeof f.then === 'function'), 'all formatters are promises');
 });

test/reporter-factory.spec.js

@@ -1,10 +1,8 @@
-'use strict';
+import fancyLog from 'fancy-log';
+import test from 'tape';
+import { stub } from 'sinon';
 
-const fancyLog = require('fancy-log');
-const test = require('tape');
-const {stub} = require('sinon');
-
-const reporterFactory = require('../src/reporter-factory');
+import reporterFactory from '../src/reporter-factory.js';
 
 test('reporter factory should return a function', t => {
   t.plan(1);

test/sourcemap.spec.js

@@ -1,14 +1,18 @@
-'use strict';
+import gulp from 'gulp';
+import gulpCleanCss from 'gulp-clean-css';
+import gulpConcat from 'gulp-concat';
+import gulpRename from 'gulp-rename';
+import gulpSourcemaps from 'gulp-sourcemaps';
+import path from 'path';
+import test from 'tape';
 
-const gulp = require('gulp');
-const gulpCleanCss = require('gulp-clean-css');
-const gulpConcat = require('gulp-concat');
-const gulpRename = require('gulp-rename');
-const gulpSourcemaps = require('gulp-sourcemaps');
-const path = require('path');
-const test = require('tape');
+import gulpStylelint from '../src/index.js';
 
-const gulpStylelint = require('../src/index');
+import { URL } from 'url'; // in Browser, the URL in native accessible on window
+// Will contain trailing slash
+const __dirname = new URL('.', import.meta.url).pathname;
+
+const tmpDir = path.resolve(__dirname, '../tmp');
 
 /**
  * Creates a full path to the fixtures glob.

test/writer.spec.js

@@ -1,12 +1,15 @@
-'use strict';
+import ansiColors from 'ansi-colors';
+import fs from 'fs';
+import path from 'path';
+import test from 'tape';
+import { stub } from 'sinon';
 
-const ansiColors = require('ansi-colors');
-const fs = require('fs');
-const path = require('path');
-const test = require('tape');
-const {stub} = require('sinon');
+import writer from '../src/writer.js';
 
-const writer = require('../src/writer');
+import { URL } from 'url'; // in Browser, the URL in native accessible on window
+
+// Will contain trailing slash
+const __dirname = new URL('.', import.meta.url).pathname;
 
 const tmpDir = path.resolve(__dirname, '../tmp');