copy mjs files and comments

We must keep the *.mjs files as *.mjs because jest needs them as is...

Author: francoismassart

package.json

@@ -46,7 +46,7 @@
   "scripts": {
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "build": "unbuild --config unbuild.config.ts",
+    "build": "unbuild --config unbuild.config.ts  && rsync src/utils/tailwindcss-api/worker/*.mjs lib/worker",
     "xdocs:init": "pnpm build && eslint-doc-generator --init-rule-docs",
     "docs:init": "eslint-doc-generator --init-rule-docs",
     "xdocs:update": "pnpm build && eslint-doc-generator",

src/_sandbox/notes.md

@@ -1,3 +1 @@
 # Notes
-
-Failing tests => use multiple build configs

src/rules/no-custom-classname.ts

@@ -45,12 +45,12 @@ export const createRule = RuleCreator(urlCreator);
 const detectCustomClassnames = (
   context: RuleContext,
   settings: PluginSettings,
-  literals: Array<AtomicNode>
+  literals: Array<AtomicNode>,
 ) => {
   for (const node of literals) {
     const { originalClassNamesValue } = dissectAtomicNode(
       node,
-      context as unknown as GenericRuleContext
+      context as unknown as GenericRuleContext,
     );
     // Process the extracted classnames and report
     const { classNames } = getClassnamesFromValue(originalClassNamesValue);
@@ -78,7 +78,7 @@ export const noCustomClassname = createRule<Options, MessageIds>({
     docs: {
       description: "Detects classnames which do not belong to Tailwind CSS.",
     },
-    hasSuggestions: true,
+    hasSuggestions: false,
     messages: {
       "issue:unknown-classname": `Classname '{{classname}}' is not a Tailwind CSS class!`,
     },
@@ -88,6 +88,8 @@ export const noCustomClassname = createRule<Options, MessageIds>({
         type: "object",
         properties: {
           whitelist: {
+            description:
+              "List of classnames to ignore (whitelist). Exact match or regular expression.",
             type: "array",
             items: { type: "string", minLength: 0 },
             uniqueItems: true,
@@ -96,6 +98,7 @@ export const noCustomClassname = createRule<Options, MessageIds>({
         additionalProperties: false,
       },
     ],
+    defaultOptions: [{}],
     type: "suggestion",
   },
   /**
@@ -119,10 +122,10 @@ export const noCustomClassname = createRule<Options, MessageIds>({
         context,
         settings,
         options,
-        detectCustomClassnames
+        detectCustomClassnames,
       ),
       // Script visitor is used within both JSX and Vue SFC files (inside <script> section).
-      createScriptVisitors(context, settings, options, detectCustomClassnames)
+      createScriptVisitors(context, settings, options, detectCustomClassnames),
     );
   },
 });

src/utils/parser/node.spec.ts

@@ -39,7 +39,7 @@ test("getClassnamesFromValue", () => {
 
 test("getTemplateElementAffixes", () => {
   expect(
-    getTemplateElementAffixes("`relative grid`", "relative grid")
+    getTemplateElementAffixes("`relative grid`", "relative grid"),
   ).toStrictEqual(["`", "`"]);
   expect(getTemplateElementAffixes("`absolute ${", "absolute ")).toStrictEqual([
     "`",
@@ -56,11 +56,11 @@ test("getTagNameFromTaggedTemplateExpression", () => {
       TSESTree.AST_NODE_TYPES.TaggedTemplateExpression
   ) {
     expect(
-      getTagNameFromTaggedTemplateExpression(attribute.value.expression)
+      getTagNameFromTaggedTemplateExpression(attribute.value.expression),
     ).toStrictEqual("tw");
   } else {
     throw new Error(
-      "Invalid attribute value for `getTagNameFromTaggedTemplateExpression`"
+      "Invalid attribute value for `getTagNameFromTaggedTemplateExpression`",
     );
   }
 });

src/utils/parser/node.ts

@@ -105,7 +105,7 @@ export const getTemplateElementAffixes = (haystack: string, needle: string) => {
  * getTagNameFromTaggedTemplateExpression(node); // 'tw'
  */
 export const getTagNameFromTaggedTemplateExpression = (
-  node: TSESTree.TaggedTemplateExpression
+  node: TSESTree.TaggedTemplateExpression,
 ) => {
   switch (node.tag.type) {
     case "CallExpression": {
@@ -178,7 +178,7 @@ export const getVAttributeName = (node: VueAST.VAttribute): string => {
  */
 export const dissectAtomicNode = (
   node: AtomicNode,
-  context: GenericRuleContext
+  context: GenericRuleContext,
 ) => {
   let originalClassNamesValue = "";
   let start = 0;
@@ -204,11 +204,11 @@ export const dissectAtomicNode = (
       // but `value.raw` does not include them, so there is a mismatch.
       // start/end does not include the backticks, therefore it matches value.raw.
       const rawCode = context.sourceCode.getText(
-        node as unknown as TSESTree.Node
+        node as unknown as TSESTree.Node,
       );
       [prefix, suffix] = getTemplateElementAffixes(
         rawCode,
-        originalClassNamesValue
+        originalClassNamesValue,
       );
       break;
     }

src/utils/parser/visitors-validation.ts

@@ -12,7 +12,7 @@ import { getJSXAttributeName, getVAttributeName } from "./node";
  */
 export const isValidJSXAttribute = (
   node: TSESTree.JSXAttribute,
-  settings: PluginSettings
+  settings: PluginSettings,
 ): boolean => {
   const attributes = (settings && settings.attributes) || [];
   // Ignored JSXAttribute
@@ -40,7 +40,7 @@ export const isValidJSXAttribute = (
  */
 export const isValidTextAttribute = (
   node: TextAttribute,
-  settings: PluginSettings
+  settings: PluginSettings,
 ): boolean => {
   const attributes = (settings && settings.attributes) || [];
   // Ignored TextAttribute
@@ -58,7 +58,7 @@ export const isValidTextAttribute = (
  */
 export const isValidVAttribute = (
   node: VueAST.VAttribute,
-  settings: PluginSettings
+  settings: PluginSettings,
 ): boolean => {
   const attributes = (settings && settings.attributes) || [];
   // Ignored VAttribute
@@ -80,7 +80,7 @@ export const isValidVAttribute = (
  */
 export const isValidCallExpression = (
   node: TSESTree.CallExpression,
-  settings: PluginSettings
+  settings: PluginSettings,
 ): boolean => {
   if (!settings.functions || settings.functions.length === 0) {
     return false;
@@ -123,7 +123,7 @@ export const isLiteralAttributeValue = (node: SupportedAttribute) => {
  * Validates a `Expression` contained within a `JSXAttribute` for `eslint-plugin-tailwindcss`
  * @returns `false` if the `Expression` can be skipped. */
 export const isValidExpressionAttributeValue = (
-  node: TSESTree.JSXAttribute
+  node: TSESTree.JSXAttribute,
 ) => {
   // No value
   if (!node.value) return false;

src/utils/parser/visitors.ts

@@ -27,7 +27,7 @@ const getParserServices = (context: Readonly<GenericRuleContext>) => {
 export const defineVisitors = (
   context: Readonly<GenericRuleContext>,
   templateBodyVisitor: RuleListener,
-  scriptVisitor: RuleListener
+  scriptVisitor: RuleListener,
 ) => {
   const parserServices = getParserServices(context);
   if (
@@ -43,6 +43,6 @@ export const defineVisitors = (
   // @ts-expect-error Using "vue-eslint-parser" requires this setup
   return parserServices.defineTemplateBodyVisitor(
     templateBodyVisitor,
-    scriptVisitor
+    scriptVisitor,
   );
 };

src/utils/tailwindcss-api/index.ts

@@ -7,19 +7,19 @@ import { type Theme } from "./types";
 const require = createRequire(import.meta.url);
 
 export const loadThemeWorker: (cssConfigPath: string) => Theme = createSyncFn(
-  require.resolve("./utils/tailwindcss-api/worker/load-theme.mjs"),
+  require.resolve("./worker/load-theme.mjs"),
 );
 
 export const getSortedClassNamesWorker: (
   cssConfigPath: string,
   unorderedClassNames: Array<string>,
 ) => Array<string> = createSyncFn(
-  require.resolve("./utils/tailwindcss-api/worker/get-sorted-class-names.mjs"),
+  require.resolve("./worker/get-sorted-class-names.mjs"),
 );
 
 export const isValidClassNameWorker: (
   cssConfigPath: string,
   className: string,
 ) => boolean = createSyncFn(
-  require.resolve("./utils/tailwindcss-api/worker/is-valid-class-name.mjs"),
+  require.resolve("./worker/is-valid-class-name.mjs"),
 );

src/utils/tailwindcss-api/worker/README.md

@@ -0,0 +1,20 @@
+# Warnings about the `*.mjs` worker files
+
+⚠️ The `*.mjs` files in this folder are worker scripts which are ran in node's `worker_threads`.
+
+🤓 This means that they do NOT not execute in the main thread, but in a separate thread.
+
+😅 Because of this, expect some unusual things, like:
+
+- `console.log` won't work within `vitest`…
+- 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…
+
+ℹ️ The `*.mjs` extension indicates that it is an ES module.
+
+ℹ️ It won't be compiled, just **copied as is** into the dist package by the `build` script.
+
+✅ We still check the syntax with TypeScript, but it is not a TypeScript file.
+
+🌀 Using `*.ts` for these files would be tricky because `vitest` needs them "as is" while runtime will expect `*.mjs`.

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

@@ -0,0 +1,32 @@
+/**
+ * ⚠️ Make sure to read the warnings about the `*.mjs` workers
+ * @see src/utils/tailwindcss-api/worker/README.md
+ */
+
+// @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;
+  },
+);