loadTheme

Author: francoismassart

.vscode/settings.json

@@ -3,5 +3,8 @@
     "source.fixAll.eslint": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "files.associations": {
+    "*.css": "tailwindcss"
+  }
 }

package.json

@@ -64,6 +64,7 @@
     "eslint-plugin-unicorn": "^56.0.1",
     "globals": "^15.13.0",
     "jest": "^29.7.0",
+    "tailwindcss": "^4.0.0",
     "ts-jest": "^29.1.4",
     "tsup": "^8.1.0",
     "typescript": "^5.4.5",

pnpm-lock.yaml

@@ -1,8 +1,8 @@
 import { RuleCreator } from "@typescript-eslint/utils/eslint-utils";
-import { createSyncFn } from "synckit";
 
 import { PluginSharedSettings } from "../types";
 import urlCreator from "../url-creator";
+import { loadThemeWorker } from "../util/tailwindcss-api";
 
 export { ESLintUtils } from "@typescript-eslint/utils";
 
@@ -17,8 +17,6 @@ type Options = [
   }
 ];
 
-const syncFunction = createSyncFn(require.resolve("../worker.mjs"));
-
 // The Rule creator returns a function that is used to create a well-typed ESLint rule
 // The parameter passed into RuleCreator is a URL generator function.
 export const createRule = RuleCreator(urlCreator);
@@ -69,18 +67,21 @@ export const myRule = createRule<Options, MessageIds>({
       VariableDeclaration: (node) => {
         if (node.kind === "var") {
           console.log("!!VAR!!!");
-          console.log("!!VAR!!!");
-          const asyncResult = syncFunction();
-          console.log(asyncResult);
+          const result = loadThemeWorker(
+            require.resolve("../../tests/stubs/css/tiny.css")
+          );
+          console.log("Tailwind config result:");
+          console.log("=======================");
+          console.log(result);
           // Reading inline configuration
-          console.log(options[0]);
+          console.log("\n", "Options:", "\n", options[0]);
 
           // Shared settings
           const sharedSettings = (context.settings?.tailwindcss || {
             stylesheet: "",
             functions: [],
           }) as PluginSharedSettings;
-          console.log(sharedSettings);
+          console.log("\n", "sharedSettings:", "\n", sharedSettings);
 
           const rangeStart = node.range[0];
           const range: readonly [number, number] = [

src/rules/my-rule.ts

@@ -0,0 +1,7 @@
+import { createSyncFn } from "synckit";
+
+import { type Theme } from "./types";
+
+export const loadThemeWorker: (twConfigPath: string) => Theme = createSyncFn(
+  require.resolve("./worker/load-theme.mjs")
+);

src/util/tailwindcss-api/index.ts

@@ -0,0 +1,26 @@
+export type TailwindConfig = {
+  separator?: string;
+  prefix?: string;
+  content?: {
+    files?: Array<string>;
+  };
+};
+
+export interface DesignSystem {
+  getClassOrder: (classes: Array<string>) => Array<[string, bigint | null]>;
+  candidatesToCss: (classes: Array<string>) => Array<string | null>;
+  tailwindConfig?: TailwindConfig;
+}
+
+type ThemeValue = {
+  value: string;
+  options: number;
+  src: string | undefined;
+};
+
+export type Theme = {
+  prefix: string;
+  values: Map<string, ThemeValue>;
+  // @ts-expect-error Unexpected any. Specify a different type
+  keyframes: Set<any>;
+};

src/util/tailwindcss-api/types.d.ts

@@ -0,0 +1,37 @@
+/**
+ * ⚠️ 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
+  ) => {
+    const utils = new TailwindUtils();
+    // TODO use the config manager ?
+    if (!utils.context) {
+      await utils.loadConfigV4(cssConfigPath);
+    }
+    if (!utils.context) {
+      return;
+    }
+    // @ts-expect-error Property 'theme' does not exist on type 'DesignSystem'.ts(2339)
+    return utils.context?.theme;
+  }
+);

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

@@ -0,0 +1,14 @@
+import { expect, test } from "vitest";
+
+import { loadThemeWorker } from "..";
+
+test(`load theme from "tiny.css"`, () => {
+  const path = require.resolve("../../../../tests/stubs/css/tiny.css");
+  const theme = loadThemeWorker(path);
+  expect(theme.prefix).toBe("tw");
+  expect(theme.keyframes.size).toBe(
+    ["spin", "ping", "pulse", "bounce"].length * 2
+  );
+  console.log("Theme values:", theme.values);
+  expect(theme.values.size).toBe(3);
+});

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

@@ -0,0 +1,9 @@
+@import "tailwindcss" prefix(tw);
+
+/* Minimalist theme used for testing */
+@theme {
+  --*: initial;
+  --color-tiny: #123456;
+  --spacing: 1px;
+  --font-body: Inter, sans-serif;
+}