Migrate project to ESM

.plop/regexps-strings.js

@@ -24,7 +24,7 @@ const RELATIVE_LAB_COLOR = `(?:[lab]|${NUMBER_WITH_DECIMALS}|${CALC_LAB_COLOR})`
 const RELATIVE_LCH_COLOR = `(?:[lch]|${NUMBER_WITH_DECIMALS}|${CALC_LCH_COLOR})`;
 const RELATIVE_ALPHA = `(?:${NUMBER_WITH_DECIMALS}%?|${CALC_ALPHA_COLOR}|alpha)`;
 
-module.exports = {
+export default {
     COLOR_REGEXP_STRINGS: {
         HEX: `
             ^#(?:

aliases.js

@@ -1,9 +1,11 @@
-const path = require('path');
-const tsconfig = require('./tsconfig');
+import path from 'node:path';
+import tsconfig from './tsconfig.json' with { type: 'json' };
+
 const { compilerOptions: { paths } } = tsconfig;
 
 const aliasReg = (str) => str.replace(/^(.*)\/\*$/, '$1');
-module.exports = Object.keys(paths).reduce(
-    (obj, a) => (obj[aliasReg(a)] = path.resolve(__dirname, aliasReg(paths[a][0])), obj),
+
+export default Object.keys(paths).reduce(
+    (obj, a) => (obj[aliasReg(a)] = path.resolve(aliasReg(paths[a][0])), obj),
     {}
 );

eslint.config.js → eslint.config.mjs

@@ -1,8 +1,8 @@
-const tseslint = require('typescript-eslint');
-const js = require('@eslint/js');
-const globals = require('globals');
+import tseslint from 'typescript-eslint';
+import js from '@eslint/js';
+import globals from 'globals';
 
-module.exports = [
+export default [
     {
         languageOptions: {
             globals: {

jest.config.js

@@ -1,7 +1,7 @@
-const { pathsToModuleNameMapper } = require('ts-jest');
-const tsconfig = require('./tsconfig');
+import { pathsToModuleNameMapper } from 'ts-jest';
+import tsconfig from './tsconfig.json' with { type: 'json' };
 
-module.exports = {
+export default {
     roots: ['<rootDir>/tests'],
     moduleNameMapper: pathsToModuleNameMapper(
         tsconfig.compilerOptions.paths,

package.json

@@ -2,6 +2,7 @@
   "name": "colortranslator",
   "version": "6.1.1",
   "description": "A JavaScript library, written in TypeScript, to convert among different color models",
+  "type": "module",
   "main": "index.js",
   "module": "esm/index.js",
   "types": "index.d.ts",
@@ -30,7 +31,7 @@
     "lint": "eslint \"src/**/*.{js,ts}\" \"tests/**/*.ts\"",
     "clean": "./scripts/clean.sh",
     "finish": "./scripts/finish.sh",
-    "build": "pnpm clean && rollup --config rollup.config.js --bundleConfigAsCjs && pnpm finish",
+    "build": "pnpm clean && rollup --config rollup.config.mjs && pnpm finish",
     "demo": "webpack serve --open --config webpack.demo.config.js",
     "docs": "webpack --config webpack.demo.publish.js --mode production && pnpm build",
     "compile:regexps": "pnpm plop",
@@ -86,7 +87,7 @@
     "postcss-calc": "^10.1.1",
     "postcss-for": "^2.1.1",
     "postcss-loader": "^8.2.1",
-    "postcss-nested": "^7.0.2",
+    "postcss-nested": "^8.0.0",
     "postcss-simple-vars": "^7.0.1",
     "rimraf": "^6.1.3",
     "rollup": "^4.62.4",

plopfile.js

@@ -1,11 +1,13 @@
+import regExpStrings from './.plop/regexps-strings.js';
+
 const {
     COLOR_REGEXP_STRINGS,
     HSL_HUE,
     CALC,
     toRegExp
-} = require('./.plop/regexps-strings');
+} = regExpStrings;
 
-module.exports = (plop) => {
+export default (plop) => {
     plop.setGenerator('Compile RegExps', {
         description: 'Compile the regular library regular expressions from a template file',
         prompts: [],

postcss.config.mjs

@@ -0,0 +1,17 @@
+/** @type {import('postcss-load-config').Config} */
+
+import postcssNested from 'postcss-nested';
+import autoprefixer from 'autoprefixer';
+import postcssSimpleVars from 'postcss-simple-vars';
+import postcssCalc from 'postcss-calc';
+import postcssFor from 'postcss-for';
+
+export default {
+  plugins: [
+    postcssNested,
+    autoprefixer,
+    postcssSimpleVars,
+    postcssCalc,
+    postcssFor
+  ]
+};

rollup.config.js → rollup.config.mjs

@@ -1,4 +1,4 @@
-import pkg from './package.json';
+import pkg from './package.json' with { type: 'json' };
 import ts from '@rollup/plugin-typescript';
 import { dts } from 'rollup-plugin-dts';
 import tsConfigPaths from 'rollup-plugin-tsconfig-paths';

scripts/finish.sh

@@ -2,6 +2,4 @@
 
 mkdir -p dist/web/
 
-rm web/colortranslator.d.ts
 cp web/colortranslator.js dist/web/colortranslator.js
-echo '{\n    "type": "module"\n}' > esm/package.json

src/@demo/demo.js

@@ -1,20 +1,20 @@
-import '../../node_modules/google-code-prettify/bin/run_prettify.min';
+import '../../node_modules/google-code-prettify/bin/run_prettify.min.js';
 import '../../node_modules/google-code-prettify/bin/prettify.min.css';
 import '../../node_modules/google-code-prettify/styles/desert.css';
 import 'whatwg-fetch';
 import './styles.css';
-import { ColorTranslator, Harmony, Mix } from '../';
-import demo1 from './demo1';
-import demo2 from './demo2';
-import demo3 from './demo3';
-import demo4 from './demo4';
-import demo5 from './demo5';
-import demo6 from './demo6';
-import demo7 from './demo7';
-import demo8 from './demo8';
-import demo9 from './demo9';
-import demo10 from './demo10';
-import demo11 from './demo11';
+import { ColorTranslator, Harmony, Mix } from '../index.ts';
+import demo1 from './demo1/index.js';
+import demo2 from './demo2/index.js';
+import demo3 from './demo3/index.js';
+import demo4 from './demo4/index.js';
+import demo5 from './demo5/index.js';
+import demo6 from './demo6/index.js';
+import demo7 from './demo7/index.js';
+import demo8 from './demo8/index.js';
+import demo9 from './demo9/index.js';
+import demo10 from './demo10/index.js';
+import demo11 from './demo11/index.js';
 
 const functioToString = (fn) => {
     const article = document.createElement('article');

webpack.demo.config.js

@@ -1,14 +1,14 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const aliases = require('./aliases');
+import path from 'node:path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import aliases from './aliases.js';
 
-module.exports = {
+export default {
     mode: 'development',
     entry: './src/@demo/demo.js',
     output: {
         filename: 'scripts/bundle.js',
-        path: path.resolve(__dirname, 'docs'),
+        path: path.resolve('docs'),
         libraryTarget: 'window'
     },
     resolve: {

webpack.demo.publish.js

@@ -1,17 +1,17 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const aliases = require('./aliases');
+import path from 'node:path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+import aliases from './aliases.js';
 
-module.exports = {
+export default {
     devtool: 'eval-source-map',
     target: 'web',
     entry: './src/@demo/demo.js',
     output: {
         filename: 'scripts/bundle.js',
-        path: path.resolve(__dirname, 'docs'),
+        path: path.resolve('docs'),
         libraryTarget: 'window'
     },
     module: {