diff --git a/.eslintrc.js b/.eslintrc.js index d6ee483..fecad5c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,7 +1,8 @@ module.exports = { env: { node: true, - commonjs: true, + commonjs: false, + module: true, es2021: true, jest: true, }, diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..0dd912e --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +*.yml +node_modules \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..96ab0e8 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "useTabs": true, + "tabWidth": 4, + "arrowParens": "avoid", + "trailingComma": "all" +} diff --git a/README.md b/README.md index ce2d6b8..f7f3d6d 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Colors that contain custom properties inside are ignored: ```css a { - color: rgb(102, 173, 221, var(--opacity)); + color: rgb(102, 173, 221, var(--opacity)); } ``` diff --git a/jest.config.js b/jest.config.js index 34f25ea..59328b6 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,7 +1,6 @@ // Sync object /** @type {import('@jest/types').Config.InitialOptions} */ -const config = { - verbose: true, +export default { + verbose: true, + transform: {}, }; - -module.exports = config; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 7b9aa97..be1f9b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "convert-to-oklch", - "version": "1.2.1", + "version": "1.2.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "convert-to-oklch", - "version": "1.2.1", + "version": "1.2.3", "license": "MIT", "dependencies": { "colorjs.io": "^0.4.0", @@ -19,7 +19,8 @@ }, "devDependencies": { "eslint": "^8.29.0", - "jest": "^28.1.3" + "jest": "^28.1.3", + "prettier": "^3.0.3" }, "engines": { "node": ">=16" @@ -3607,6 +3608,21 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz", + "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-format": { "version": "28.1.3", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-28.1.3.tgz", @@ -6986,6 +7002,12 @@ "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", "dev": true }, + "prettier": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz", + "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==", + "dev": true + }, "pretty-format": { "version": "28.1.3", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-28.1.3.tgz", diff --git a/package.json b/package.json index 7ede56a..1f38814 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "convert-to-oklch", - "version": "1.2.3", + "version": "1.2.4", "description": "CLI tool that converts rgb(), rgba(), hex, hsl() and hsla() colors to oklch() in specified CSS files.", "main": "./src/index.js", "bin": { @@ -9,7 +9,7 @@ "engines": { "node": ">=16" }, - "type": "commonjs", + "type": "module", "files": [ "src/**/*.js", "!**/**/*.test.js" @@ -34,7 +34,8 @@ }, "license": "MIT", "scripts": { - "test": "jest" + "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js", + "format": "prettier --write ." }, "dependencies": { "colorjs.io": "^0.4.0", @@ -44,6 +45,7 @@ }, "devDependencies": { "eslint": "^8.29.0", - "jest": "^28.1.3" + "jest": "^28.1.3", + "prettier": "^3.0.3" } } diff --git a/src/index.js b/src/index.js index f85ba76..81df866 100755 --- a/src/index.js +++ b/src/index.js @@ -1,57 +1,60 @@ #!/usr/bin/env node -const { program, Option } = require('commander') -const packageVersion = require('../package.json').version -const postcss = require('postcss') -const fs = require('fs') -const pc = require('picocolors') -const plugin = require('./plugin') -const { logError } = require('./utils') +import { Command, Option } from "commander"; +import postcss from "postcss"; +import fs from "fs"; +import pc from "picocolors"; -const PRECISION_VALUES = Array.from(Array(21), (_, index) => String(index + 1)) +import plugin from "./plugin.js"; +import { logError } from "./utils.js"; + + +const program = new Command(); + +const PRECISION_VALUES = Array.from(Array(21), (_, index) => String(index + 1)); const precisionOption = new Option( - '-p, --precision ', - 'precision of color conversion', - '5', -).choices(PRECISION_VALUES) + "-p, --precision ", + "precision of color conversion", + "5", +).choices(PRECISION_VALUES); program - .name('convert-to-oklch') + .name("convert-to-oklch") .description( - 'CLI tool that converts rgb(), rgba(), hex, hsl() and hsla() colors to oklch() in specified CSS files.', + "CLI tool that converts rgb(), rgba(), hex, hsl() and hsla() colors to oklch() in specified CSS files.", ) - .version(packageVersion) - .argument('', 'path to css files') + .version("1.2.4") + .argument("", "path to css files") .addOption(precisionOption) - .parse() + .parse(); -const { args: cssFilePaths } = program -const { precision } = program.opts() +const { args: cssFilePaths } = program; +const { precision } = program.opts(); const processCssFile = async path => { if (!fs.existsSync(path)) { - logError("File doesn't exist: " + path) - return + logError("File doesn't exist: " + path); + return; } - const css = fs.readFileSync(path, 'utf-8') + const css = fs.readFileSync(path, "utf-8"); const convertedCss = await postcss([plugin(precision)]) .process(css, { from: path }) - .toString() + .toString(); fs.writeFile(path, convertedCss, err => { if (err) { - logError(err) - fs.writeFileSync(path, css) + logError(err); + fs.writeFileSync(path, css); } - }) -} + }); +}; const processFiles = async () => { - cssFilePaths.map(file => processCssFile(file)) - await Promise.allSettled(cssFilePaths) - console.log(pc.bgGreen(pc.black('Done!'))) -} + cssFilePaths.map(file => processCssFile(file)); + await Promise.allSettled(cssFilePaths); + console.log(pc.bgGreen(pc.black("Done!"))); +}; -processFiles() +processFiles(); diff --git a/src/plugin.js b/src/plugin.js index 59f11f5..844062e 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -1,22 +1,24 @@ -const Color = require("colorjs.io").default; -const { logError } = require("./utils"); +import Color from "colorjs.io"; +import { logError } from "./utils.js"; const colorsRegex = new RegExp(/(#[0-9a-f]{3,8}|(hsla?|rgba?)\([^)]+\))/gi); -module.exports = (precision) => ({ +export default precision => ({ postcssPlugin: "postcss-convert-to-oklch", Declaration(decl) { processDecl(decl, precision); }, }); +export const postcss = true; + function processDecl(decl, precision) { const originalColors = decl.value.match(colorsRegex); if (!originalColors) return; originalColors .filter(doesNotIncludeVar) - .map((original) => { + .map(original => { try { return { original, @@ -47,5 +49,3 @@ function doesNotIncludeVar(color) { function getConvertedColor(color, precision) { return new Color(color).to("oklch").toString({ precision }); } - -module.exports.postcss = true; diff --git a/src/tests/index.test.js b/src/tests/index.test.js index c7e268a..c9fee9d 100644 --- a/src/tests/index.test.js +++ b/src/tests/index.test.js @@ -1,8 +1,11 @@ -const postcss = require("postcss"); -const fs = require("fs"); -const path = require("path"); +import postcss from "postcss"; +import fs from "fs"; +import path from "path"; +import { fileURLToPath } from "url"; -const plugin = require("../plugin"); +import plugin from "../plugin.js"; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); it("works with default precision", async () => { const input = readFixture("input.css"); diff --git a/src/utils.js b/src/utils.js index edc9783..a9726c5 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,9 +1,5 @@ -const pc = require("picocolors"); +import pc from "picocolors"; -function logError(errorMessage) { +export function logError(errorMessage) { console.error(pc.bgRed(errorMessage)); } - -module.exports = { - logError, -};