Update to Prettier 3

Closes #1 #2 #27

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.mjs

@@ -0,0 +1,59 @@
+import { format } from "prettier";
+import assert from "assert";
+import plugin from "./main.mjs";
+
+assert.strictEqual(
+  await format("a{font-size: 1rem; height: 1rem;}", {
+    parser: "css",
+    plugins: [plugin],
+  }),
+  "a {\n  height: 1rem;\n  font-size: 1rem;\n}\n",
+  "sorts given CSS",
+);
+
+assert.strictEqual(
+  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",
+);
+
+assert.strictEqual(
+  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",
+);
+
+assert.rejects(
+  () => format("/*/*/* x", { parser: "css", plugins: [plugin] }),
+  "surfaces errors to Prettier",
+);
+
+assert.strictEqual(
+  await format(
+    "<style>a{\n font-size: 100%; /* font-size comment */ \n height: 1rem; \n }</style>",
+    {
+      parser: "html",
+      plugins: [plugin],
+    },
+  ),
+  "<style>\n  a {\n    height: 1rem;\n    font-size: 100%; /* font-size comment */\n  }\n</style>\n",
+  "sorts embedded CSS with comment",
+);
+
+assert.strictEqual(
+  await format(
+    "a{\n font-size: 100%; /* font-size comment */ \n height: 1rem; \n }",
+    {
+      parser: "css",
+      plugins: [plugin],
+    },
+  ),
+  "a {\n  height: 1rem;\n  font-size: 100%; /* font-size comment */\n}\n",
+  "sorts CSS with comment",
+);