feat: classnames sorting worker

Author: francoismassart

src/util/tailwindcss-api/index.ts

@@ -2,6 +2,12 @@ import { createSyncFn } from "synckit";
 
 import { type Theme } from "./types";
 
-export const loadThemeWorker: (twConfigPath: string) => Theme = createSyncFn(
+export const loadThemeWorker: (cssConfigPath: string) => Theme = createSyncFn(
   require.resolve("./worker/load-theme.mjs")
 );
+export const getSortedClassNamesWorker: (
+  cssConfigPath: string,
+  unorderedClassNames: Array<string>
+) => Array<string> = createSyncFn(
+  require.resolve("./worker/get-sorted-class-names.mjs")
+);

src/util/tailwindcss-api/worker/get-sorted-class-names.mjs

@@ -0,0 +1,40 @@
+/**
+ * ⚠️ This is a worker script which is ran in node's `worker_threads`.
+ * 🤓 This means that it is not executed in the main thread, but in a separate thread.
+ * 😅 Because of this, expect some disturbances, like:
+ *   - `console.log` won't work `vitest`... (seems to work with `jest`).
+ *   - You cannot pass complex objects as arguments, only serializable ones.
+ *   - You cannot retun complex objects, only serializable ones.
+ *   - e.g. You cannot return the `utils.context` directly, but you can return some of its properties...
+ *
+ * ℹ️ It uses the `*.mjs` extension to indicate that it is an ES module.
+ * ✅ We still check the syntax with TypeScript, but it is not a TypeScript file.
+ */
+
+// @ts-check
+
+import { runAsWorker } from "synckit";
+import { TailwindUtils } from "tailwind-api-utils";
+
+runAsWorker(
+  async (
+    /**
+     * @type {string} The path to the Tailwind CSS config file
+     */
+    cssConfigPath,
+    /**
+     * @type {Array<string>} List of class names to sort
+     */
+    unorderedClassNames
+  ) => {
+    const utils = new TailwindUtils();
+    await utils.loadConfigV4(cssConfigPath);
+    if (!utils.context) {
+      throw new Error(
+        `Failed to load the Tailwind CSS theme using: "${cssConfigPath}"`
+      );
+    }
+    const sorted = await utils.getSortedClassNames(unorderedClassNames);
+    return sorted;
+  }
+);

src/util/tailwindcss-api/worker/get-sorted-class-names.spec.ts

@@ -0,0 +1,45 @@
+import { expect, test } from "vitest";
+
+import { getSortedClassNamesWorker } from "..";
+
+test(`Sort classnames based on "normal.css"`, () => {
+  const path = require.resolve("../../../../tests/stubs/css/normal.css");
+  const unorderdClassNames = [
+    "lg:flex",
+    "block",
+    "top-0",
+    "unkown",
+    "text-red-100",
+  ];
+  const sorted = getSortedClassNamesWorker(path, unorderdClassNames);
+  // Unknown classnames should be first
+  expect(sorted[0]).toBe("unkown");
+  // The rest should be sorted as well
+  expect(sorted).toStrictEqual([
+    "unkown",
+    "top-0",
+    "block",
+    "text-red-100",
+    "lg:flex",
+  ]);
+});
+
+test(`Sort "tw:" prefixed classnames based on "tiny-prefixed.css"`, () => {
+  const path = require.resolve("../../../../tests/stubs/css/tiny-prefixed.css");
+  const unorderdClassNames = [
+    "tw:flex",
+    "tw:unkown",
+    "tw:hover:text-tiny",
+    "tw:top-0",
+  ];
+  const sorted = getSortedClassNamesWorker(path, unorderdClassNames);
+  // Unknown classnames should be first
+  expect(sorted[0]).toBe("tw:unkown");
+  // The rest should be sorted as well
+  expect(sorted).toStrictEqual([
+    "tw:unkown",
+    "tw:top-0",
+    "tw:flex",
+    "tw:hover:text-tiny",
+  ]);
+});

src/util/tailwindcss-api/worker/load-theme.mjs

@@ -27,7 +27,7 @@ runAsWorker(
     await utils.loadConfigV4(cssConfigPath);
     if (!utils.context) {
       throw new Error(
-        `Failed to load the Talwind CSS theme using: "${cssConfigPath}"`
+        `Failed to load the Tailwind CSS theme using: "${cssConfigPath}"`
       );
     }
     // @ts-expect-error Property 'theme' does not exist on type 'DesignSystem'.ts(2339)

src/util/tailwindcss-api/worker/load-theme.spec.ts

@@ -2,8 +2,8 @@ import { expect, test } from "vitest";
 
 import { loadThemeWorker } from "..";
 
-test(`load theme from "tiny.css"`, () => {
-  const path = require.resolve("../../../../tests/stubs/css/tiny.css");
+test(`load theme from "tiny-prefixed.css"`, () => {
+  const path = require.resolve("../../../../tests/stubs/css/tiny-prefixed.css");
   const theme = loadThemeWorker(path);
   expect(theme.prefix).toBe("tw");
   expect(theme.keyframes.size).toBe(

tests/stubs/css/normal.css

@@ -0,0 +1,6 @@
+@import "tailwindcss";
+
+/* Minimalist theme used for testing */
+@theme {
+  --color-primary: #123456;
+}