Require Node.js 18 and move to ESM

sindresorhus · Nov 2, 2023 · 66cef58 · 66cef58
1 parent 682984e
commit 66cef58
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 111 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -10,12 +10,11 @@ jobs:
       fail-fast: false
       matrix:
         node-version:
-          - 16
-          - 14
-          - 12
+          - 20
+          - 18
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm install

diff --git a/index.js b/index.js
@@ -1,60 +1,40 @@
-'use strict';
-const fancyLog = require('fancy-log');
-const PluginError = require('plugin-error');
-const through = require('through2');
-const applySourceMap = require('vinyl-sourcemaps-apply');
-const autoprefixer = require('autoprefixer');
-const postcss = require('postcss');
-
-module.exports = options => {
-	return through.obj((file, encoding, callback) => {
-		if (file.isNull()) {
-			callback(null, file);
-			return;
-		}
-
-		if (file.isStream()) {
-			callback(new PluginError('gulp-autoprefixer', 'Streaming not supported'));
-			return;
-		}
-
-		(async () => {
-			try {
-				const result = await postcss(autoprefixer(options)).process(file.contents.toString(), {
-					map: file.sourceMap ? {annotation: false} : false,
-					from: file.path,
-					to: file.path
-				});
-
-				file.contents = Buffer.from(result.css);
-
-				if (result.map && file.sourceMap) {
-					const map = result.map.toJSON();
-					map.file = file.relative;
-					map.sources = map.sources.map(() => file.relative);
-					applySourceMap(file, map);
-				}
-
-				const warnings = result.warnings();
-
-				if (warnings.length > 0) {
-					fancyLog('gulp-autoprefixer:', '\n  ' + warnings.join('\n  '));
-				}
-
-				setImmediate(callback, null, file);
-			} catch (error) {
-				const cssError = error.name === 'CssSyntaxError';
+import {Buffer} from 'node:buffer';
+import applySourceMap from 'vinyl-sourcemaps-apply';
+import autoprefixer from 'autoprefixer';
+import postcss from 'postcss';
+import {gulpPlugin} from 'gulp-plugin-extras';
+
+export default function gulpAutoprefixer(options) {
+	return gulpPlugin('gulp-autoprefixer', async file => {
+		try {
+			const result = await postcss(autoprefixer(options)).process(file.contents.toString(), {
+				map: file.sourceMap ? {annotation: false} : false,
+				from: file.path,
+				to: file.path,
+			});
+
+			file.contents = Buffer.from(result.css);
+
+			if (result.map && file.sourceMap) {
+				const map = result.map.toJSON();
+				map.file = file.relative;
+				map.sources = map.sources.map(() => file.relative);
+				applySourceMap(file, map);
+			}
 
-				if (cssError) {
-					error.message += error.showSourceCode();
-				}
+			const warnings = result.warnings();
+			if (warnings.length > 0) {
+				console.log('gulp-autoprefixer:', '\n  ' + warnings.join('\n  '));
+			}
 
-				// Prevent stream unhandled exception from being suppressed by Promise
-				setImmediate(callback, new PluginError('gulp-autoprefixer', error, {
-					fileName: file.path,
-					showStack: !cssError
-				}));
+			return file;
+		} catch (error) {
+			if (error.name === 'CssSyntaxError') {
+				error.message += error.showSourceCode();
+				error.isPresentable = true;
 			}
-		})();
+
+			throw error;
+		}
 	});
-};
+}
diff --git a/package.json b/package.json
@@ -4,13 +4,16 @@
 	"description": "Prefix CSS",
 	"license": "MIT",
 	"repository": "sindresorhus/gulp-autoprefixer",
+	"funding": "https://github.com/sponsors/sindresorhus",
 	"author": {
 		"name": "Sindre Sorhus",
 		"email": "sindresorhus@gmail.com",
 		"url": "https://sindresorhus.com"
 	},
+	"type": "module",
+	"exports": "./index.js",
 	"engines": {
-		"node": ">=12"
+		"node": ">=18"
 	},
 	"scripts": {
 		"test": "xo && ava"
@@ -30,19 +33,17 @@
 		"postcss-runner"
 	],
 	"dependencies": {
-		"autoprefixer": "^10.2.6",
-		"fancy-log": "^1.3.3",
-		"plugin-error": "^1.0.1",
-		"postcss": "^8.3.0",
-		"through2": "^4.0.2",
+		"autoprefixer": "^10.4.16",
+		"gulp-plugin-extras": "^0.2.2",
+		"postcss": "^8.4.31",
 		"vinyl-sourcemaps-apply": "^0.2.1"
 	},
 	"devDependencies": {
-		"ava": "^2.4.0",
+		"ava": "^5.3.1",
 		"gulp-sourcemaps": "^3.0.0",
-		"p-event": "^4.2.0",
-		"vinyl": "^2.2.1",
-		"xo": "^0.39.0"
+		"p-event": "^6.0.0",
+		"vinyl": "^3.0.0",
+		"xo": "^0.56.0"
 	},
 	"peerDependencies": {
 		"gulp": ">=4"

diff --git a/readme.md b/readme.md
@@ -6,17 +6,17 @@
 
 ## Install
 
-```
-$ npm install --save-dev gulp-autoprefixer
+```sh
+npm install --save-dev gulp-autoprefixer
 ```
 
 ## Usage
 
 ```js
-const gulp = require('gulp');
-const autoprefixer = require('gulp-autoprefixer');
+import gulp from 'gulp';
+import autoprefixer from 'gulp-autoprefixer';
 
-exports.default = () => (
+export default () => (
 	gulp.src('src/app.css')
 		.pipe(autoprefixer({
 			cascade: false
@@ -40,12 +40,12 @@ See the Autoprefixer [options](https://github.com/postcss/autoprefixer#options).
 Use [gulp-sourcemaps](https://github.com/gulp-sourcemaps/gulp-sourcemaps) like this:
 
 ```js
-const gulp = require('gulp');
-const sourcemaps = require('gulp-sourcemaps');
-const autoprefixer = require('gulp-autoprefixer');
-const concat = require('gulp-concat');
+import gulp from 'gulp';
+import sourcemaps from 'gulp-sourcemaps';
+import concat from 'gulp-concat';
+import autoprefixer from 'gulp-autoprefixer';
 
-exports.default = () => (
+export default () => (
 	gulp.src('src/**/*.css')
 		.pipe(sourcemaps.init())
 		.pipe(autoprefixer())

diff --git a/test.js b/test.js
@@ -1,9 +1,13 @@
-import path from 'path';
+import {Buffer} from 'node:buffer';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
 import test from 'ava';
 import Vinyl from 'vinyl';
 import sourceMaps from 'gulp-sourcemaps';
-import pEvent from 'p-event';
-import autoprefixer from '.';
+import {pEvent} from 'p-event';
+import autoprefixer from './index.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 test('autoprefix CSS', async t => {
 	const stream = autoprefixer();
@@ -13,7 +17,7 @@ test('autoprefix CSS', async t => {
 		cwd: __dirname,
 		base: path.join(__dirname, 'fixture'),
 		path: path.join(__dirname, 'fixture', 'fixture.css'),
-		contents: Buffer.from('::placeholder {\n\tcolor: gray;\n}')
+		contents: Buffer.from('::placeholder {\n\tcolor: gray;\n}'),
 	}));
 
 	const file = await data;
@@ -28,7 +32,7 @@ test('generate source maps', async t => {
 
 	init
 		.pipe(autoprefixer({
-			overrideBrowserslist: ['Firefox ESR']
+			overrideBrowserslist: ['Firefox ESR'],
 		}))
 		.pipe(write);
 
@@ -37,7 +41,7 @@ test('generate source maps', async t => {
 		base: path.join(__dirname, 'fixture'),
 		path: path.join(__dirname, 'fixture', 'fixture.css'),
 		contents: Buffer.from('a {\n\tdisplay: flex;\n}'),
-		sourceMap: ''
+		sourceMap: '',
 	}));
 
 	const file = await data;
@@ -48,36 +52,35 @@ test('generate source maps', async t => {
 });
 
 test('read upstream source maps', async t => {
-	let testFile;
 	const stream = autoprefixer();
-	const write = sourceMaps.write();
-	const sourcesContent = [
-		'a {\n  display: flex;\n}\n',
-		'a {\n\tdisplay: flex;\n}\n'
-	];
+	const finalStream = stream.pipe(sourceMaps.write());
+	const data = pEvent(finalStream, 'data');
 
-	const data = pEvent(write, 'data');
+	const testFile = new Vinyl({
+		cwd: __dirname,
+		base: path.join(__dirname, 'fixture'),
+		path: path.join(__dirname, 'fixture', 'fixture.css'),
+		contents: Buffer.from('a {\n\tdisplay: flex;\n}\n'),
+	});
 
-	stream.pipe(write);
+	testFile.sourceMap = {
+		version: 3,
+		sources: ['imported.less'],
+		names: [],
+		mappings: 'AAAA;EACC,aAAA',
+		file: 'fixture.css',
+		sourcesContent: ['a {\n  display: flex;\n}\n'],
+	};
 
-	stream.end(
-		testFile = new Vinyl({
-			cwd: __dirname,
-			base: path.join(__dirname, 'fixture'),
-			path: path.join(__dirname, 'fixture', 'fixture.css'),
-			contents: Buffer.from('a {\n\tdisplay: flex;\n}\n')
-		}),
-		testFile.sourceMap = {
-			version: 3,
-			sources: ['imported.less'],
-			names: [],
-			mappings: 'AAAA;EACC,aAAA',
-			file: 'fixture.css',
-			sourcesContent: ['a {\n  display: flex;\n}\n']
-		}
-	);
+	stream.end(testFile);
 
 	const file = await data;
+
+	const sourcesContent = [
+		'a {\n  display: flex;\n}\n',
+		'a {\n\tdisplay: flex;\n}\n',
+	];
+
 	t.is(file.sourceMap.sourcesContent[0], sourcesContent[0]);
 	t.is(file.sourceMap.sourcesContent[1], sourcesContent[1]);
 });