Update to Prettier 3

Closes #1 #2 #27

changelog.md

@@ -2,6 +2,9 @@
 All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and follows [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [2.0.0] - 2023-07-29
+### 
+
 ## [1.3.1] - 2023-06-08
 ### Fixed
 - Sorting properties mixed with comments.
@@ -21,6 +24,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
 ## [1.0.0] - 2021-07-27
 Initial release.
 
+[2.0.0]: https://github.com/Siilwyn/prettier-plugin-css-order/compare/v1.3.1...v2.0.0
 [1.3.1]: https://github.com/Siilwyn/prettier-plugin-css-order/compare/v1.3.0...v1.3.1
 [1.3.0]: https://github.com/Siilwyn/prettier-plugin-css-order/compare/v1.2.0...v1.3.0
 [1.2.0]: https://github.com/Siilwyn/prettier-plugin-css-order/compare/v1.1.0...v1.2.0

package.json

@@ -2,29 +2,28 @@
   "name": "prettier-plugin-css-order",
   "version": "1.3.1",
   "description": "Sort CSS declarations in a certain order.",
-  "type": "commonjs",
-  "main": "./src/main.js",
+  "type": "module",
+  "main": "./src/main.mjs",
   "files": [
-    "src/*.js",
-    "!src/*.test.js"
+    "src/*.mjs",
+    "!src/*.test.mjs"
   ],
   "scripts": {
-    "test": "node src/main.test.js",
+    "test": "node src/main.test.mjs",
     "lint": "prettier src --check",
     "format": "prettier src --write",
     "postversion": "git push --follow-tags"
   },
   "dependencies": {
     "css-declaration-sorter": "^7.0.0",
     "postcss-less": "^6.0.0",
-    "postcss-scss": "^4.0.3",
-    "sync-threads": "^1.0.1"
+    "postcss-scss": "^4.0.3"
   },
   "peerDependencies": {
-    "prettier": "2.x"
+    "prettier": "3.x"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=16"
   },
   "repository": {
     "type": "git",

src/main.js → src/main.mjs

@@ -1,28 +1,37 @@
-const path = require("path");
-const prettier = require("prettier/parser-postcss");
-const { createSyncFn } = require("sync-threads");
+import prettierPostcss from "prettier/parser-postcss";
+import postcss from "postcss";
+import { cssDeclarationSorter } from "css-declaration-sorter";
+import postcssLess from "postcss-less";
+import postcssScss from "postcss-scss";
 
-const preprocess = (text, options) => {
-  const sorter = createSyncFn(
-    path.join(__dirname, "sorter.js"),
-    2 * 1024 * 1024
-  );
+const syntaxMapping = {
+  less: postcssLess,
+  scss: postcssScss,
+};
 
-  const sortedText = sorter({
-    text,
-    parser: options.parser,
-    pluginOptions: {
+function parseSort(text, options) {
+  return postcss([
+    cssDeclarationSorter({
       order: options.order,
       keepOverrides: options.keepOverrides,
-    },
-  });
-
-  options.originalText = sortedText;
-
-  return sortedText;
-};
+    }),
+  ])
+    .process(text, {
+      from: undefined,
+      syntax: syntaxMapping[options.parser],
+    })
+    .then((result) => result.css)
+    .then((sortedCss) => {
+      options.originalText = sortedCss;
+      return prettierPostcss.parsers[options.parser].parse(
+        sortedCss,
+        [options.parser],
+        options,
+      );
+    });
+}
 
-module.exports = {
+export default {
   options: {
     order: {
       type: "choice",
@@ -56,16 +65,16 @@ module.exports = {
   },
   parsers: {
     css: {
-      ...prettier.parsers.css,
-      preprocess,
+      ...prettierPostcss.parsers.css,
+      parse: parseSort,
     },
     less: {
-      ...prettier.parsers.less,
-      preprocess,
+      ...prettierPostcss.parsers.less,
+      parse: parseSort,
     },
     scss: {
-      ...prettier.parsers.scss,
-      preprocess,
+      ...prettierPostcss.parsers.scss,
+      parse: parseSort,
     },
   },
 };

src/main.test.js → src/main.test.mjs

@@ -1,64 +1,59 @@
-const prettier = require("prettier");
-const assert = require("assert");
+import { format } from "prettier";
+import assert from "assert";
+import plugin from "./main.mjs";
 
 assert.strictEqual(
-  prettier.format("a{font-size: 1rem; height: 1rem;}", {
+  await format("a{font-size: 1rem; height: 1rem;}", {
     parser: "css",
-    plugins: ["."],
+    plugins: [plugin],
   }),
   "a {\n  height: 1rem;\n  font-size: 1rem;\n}\n",
-  "sorts given CSS"
+  "sorts given CSS",
 );
 
 assert.strictEqual(
-  prettier.format(
-    "a{height: 1rem; margin-left: -#{$grid-default-gutter / 2};}",
-    {
-      parser: "scss",
-      plugins: ["."],
-    }
-  ),
+  await format("a{height: 1rem; margin-left: -#{$grid-default-gutter / 2};}", {
+    parser: "scss",
+    plugins: [plugin],
+  }),
   "a {\n  margin-left: -#{$grid-default-gutter / 2};\n  height: 1rem;\n}\n",
-  "sorts given SCSS"
+  "sorts given SCSS",
 );
 
 assert.strictEqual(
-  prettier.format(
-    "a{\n // something \n font-size: @hi; \n height: 1rem; \n }",
-    {
-      parser: "less",
-      plugins: ["."],
-    }
-  ),
+  await format("a{\n // something \n font-size: @hi; \n height: 1rem; \n }", {
+    parser: "less",
+    plugins: [plugin],
+  }),
   "a {\n  height: 1rem;\n  // something\n  font-size: @hi;\n}\n",
-  "sorts given Less"
+  "sorts given Less",
 );
 
-assert.throws(
-  () => prettier.format("/*/*/* x", { parser: "css", plugins: ["."] }),
+assert.rejects(
+  () => format("/*/*/* x", { parser: "css", plugins: [plugin] }),
   "surfaces errors to Prettier"
 );
 
 assert.strictEqual(
-  prettier.format(
+  await format(
     "<style>a{\n font-size: 100%; /* font-size comment */ \n height: 1rem; \n }</style>",
     {
       parser: "html",
-      plugins: ["."],
-    }
+      plugins: [plugin],
+    },
   ),
   "<style>\n  a {\n    height: 1rem;\n    font-size: 100%; /* font-size comment */\n  }\n</style>\n",
-  "sorts embedded CSS with comment"
+  "sorts embedded CSS with comment",
 );
 
 assert.strictEqual(
-  prettier.format(
+  await format(
     "a{\n font-size: 100%; /* font-size comment */ \n height: 1rem; \n }",
     {
       parser: "css",
-      plugins: ["."],
-    }
+      plugins: [plugin],
+    },
   ),
   "a {\n  height: 1rem;\n  font-size: 100%; /* font-size comment */\n}\n",
-  "sorts CSS with comment"
+  "sorts CSS with comment",
 );