diff --git a/.plop/regexps-strings.js b/.plop/regexps-strings.js index 845d3a3..b91b56f 100644 --- a/.plop/regexps-strings.js +++ b/.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: ` ^#(?: diff --git a/aliases.js b/aliases.js index 6e4556b..b586a63 100644 --- a/aliases.js +++ b/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), {} ); \ No newline at end of file diff --git a/eslint.config.js b/eslint.config.mjs similarity index 88% rename from eslint.config.js rename to eslint.config.mjs index 74bb099..a687c48 100644 --- a/eslint.config.js +++ b/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: { diff --git a/jest.config.js b/jest.config.js index 41370d1..88eee27 100644 --- a/jest.config.js +++ b/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: ['/tests'], moduleNameMapper: pathsToModuleNameMapper( tsconfig.compilerOptions.paths, diff --git a/package.json b/package.json index 6e18a14..babe0d8 100644 --- a/package.json +++ b/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", diff --git a/plopfile.js b/plopfile.js index a44542a..66b96fe 100644 --- a/plopfile.js +++ b/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: [], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8044c42..81ecec8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -75,8 +75,8 @@ importers: specifier: ^8.2.1 version: 8.2.1(postcss@8.5.25)(typescript@6.0.3)(webpack@5.109.2) postcss-nested: - specifier: ^7.0.2 - version: 7.0.2(postcss@8.5.25) + specifier: ^8.0.0 + version: 8.0.0(postcss@8.5.25) postcss-simple-vars: specifier: ^7.0.1 version: 7.0.1(postcss@8.5.25) @@ -3051,9 +3051,9 @@ packages: peerDependencies: postcss: ^8.5.10 - postcss-nested@7.0.2: - resolution: {integrity: sha512-5osppouFc0VR9/VYzYxO03VaDa3e8F23Kfd6/9qcZTUI8P58GIYlArOET2Wq0ywSl2o2PjELhYOFI4W7l5QHKw==} - engines: {node: '>=18.0'} + postcss-nested@8.0.0: + resolution: {integrity: sha512-4iVyYzSpreefQJO1VLv3x2Eg5PBFDUGckCE9FeXPlyXjjO7QeKFeWYCjXVYEOsqzn4G8t1XqSziTtQfyjBQ3ag==} + engines: {node: ^22.0.0 || ^24.0.0 || >= 26.0.0} peerDependencies: postcss: ^8.5.10 @@ -7047,7 +7047,7 @@ snapshots: icss-utils: 5.1.0(postcss@8.5.25) postcss: 8.5.25 - postcss-nested@7.0.2(postcss@8.5.25): + postcss-nested@8.0.0(postcss@8.5.25): dependencies: postcss: 8.5.25 postcss-selector-parser: 7.1.4 diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index bfe7a73..0000000 --- a/postcss.config.js +++ /dev/null @@ -1,11 +0,0 @@ -/** @type {import('postcss-load-config').Config} */ - -module.exports = { - plugins: [ - require('postcss-nested'), - require('autoprefixer'), - require('postcss-simple-vars'), - require('postcss-calc'), - require('postcss-for') - ] -}; \ No newline at end of file diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 0000000..f938823 --- /dev/null +++ b/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 + ] +}; \ No newline at end of file diff --git a/rollup.config.js b/rollup.config.mjs similarity index 94% rename from rollup.config.js rename to rollup.config.mjs index 1b9497f..98b08a6 100644 --- a/rollup.config.js +++ b/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'; diff --git a/scripts/finish.sh b/scripts/finish.sh index 26cb8c7..1390f25 100755 --- a/scripts/finish.sh +++ b/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 diff --git a/src/@demo/demo.js b/src/@demo/demo.js index 658e4a2..9ad992b 100644 --- a/src/@demo/demo.js +++ b/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'); diff --git a/webpack.demo.config.js b/webpack.demo.config.js index 2abe80d..ffce83e 100644 --- a/webpack.demo.config.js +++ b/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: { diff --git a/webpack.demo.publish.js b/webpack.demo.publish.js index ebeefca..6cfcf55 100644 --- a/webpack.demo.publish.js +++ b/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: {