fix: ObjectExpression + minor

Author: francoismassart

src/rules/classnames-order.spec.ts

@@ -59,7 +59,7 @@ const ruleTester = new RuleTester({
 
 ruleTester.run(RULE_NAME, classnamesOrder, {
   valid: [
-    // Angular / Native HTML
+    // Angular / Native HTML + static text
     ...[
       `<h1 class="flex">attributeVisitor with TextAttribute (single class gets skipped)</h1>`,
       `<h1 class="unknown  relative ">extra spaces</h1>`,
@@ -72,46 +72,20 @@ ruleTester.run(RULE_NAME, classnamesOrder, {
     ...[
       `<h1 className="unkown relative">JSX static string</h1>`,
       "<h1 className={`unkown relative`}>JSXAttribute/JSXExpressionContainer/TemplateLiteral</h1>",
-      `<h1 className={ctl('unknown relative')}>CallExpression inside a prop</h1>`,
-      "<h1 className={ctl(`unknown relative ${live && 'unknown bg-black'}`)}>CallExpression inside a prop</h1>",
-      "<h1 className={ctl(`unknown relative ${extra}`)}>CallExpression inside a prop</h1>",
-      `<h1 class="unknown w-12 lg:w-[500px]">Allowed arbitrary value</h1>`,
       `<h1 class="dark:focus:hover:bg-black md:dark:disabled:focus:hover:bg-gray-400">Stackable variants</h1>`,
-      `<h1 className={clsx(\`absolute bottom-0 flex h-[270px] w-full flex-col\`)}>clsx</h1>`,
+      `<h1 class="   unknown  relative   ">Extra spaces</h1>`,
+      `<h1 className={\`relative w-full overflow-hidden \${yolo ? "flex flex-col" : "block"}\`}>Issue #131</h1>`,
+      `<h1 className={clsx(['unknown relative', { ...fn() }])}>Spread of a function return inside clsx</h1>`,
+      `<h1 class>No errors while typing</h1>`,
+      "clsx(`absolute bottom-0 flex h-[270px] w-full flex-col`)",
+      "ctl('unknown relative')",
+      "ctl(`unknown relative ${live && 'unknown bg-black'}`)",
+      "ctl(`unknown relative ${extra}`)",
       `
       import tw from 'twin.macro';
       const Input = tw.input\`unknown relative\`;
       const PurpleInput = tw(Input)\`unknown relative\`;
       `,
-      `<div class="   unknown  relative   ">Extra spaces</div>`,
-      `
-      <div class="custom custom2 group peer prose prose-slate aspect-h-9 aspect-w-16 bg-opacity-50 ring-opacity-50 pointer-events-auto visible sr-only sticky inset-0 inset-x-2 inset-y-1 top-3 right-4 bottom-5 left-6 isolate z-auto order-1 col-span-1 col-start-2 col-end-3 row-span-1 row-start-2 row-end-3 float-left clear-both container m-0 mx-1.5 my-px mt-1 mr-2 mb-3 ml-4 box-border line-clamp-2 block aspect-auto h-0 max-h-fit min-h-full w-0 max-w-fit min-w-full flex-none shrink grow basis-0 table-fixed border-collapse origin-bottom-right translate-x-px translate-y-2 scale-0 scale-x-75 scale-y-50 rotate-90 skew-x-2 skew-y-0 transform animate-spin cursor-text touch-auto resize-none snap-x snap-mandatory snap-center snap-always scroll-m-0 scroll-mx-1.5 scroll-my-px scroll-mt-1 scroll-mr-2 scroll-mb-3 scroll-ml-4 scroll-p-0 scroll-px-1.5 scroll-py-px scroll-pt-1 scroll-pr-2 scroll-pb-3 scroll-pl-4 list-outside list-decimal appearance-none columns-1 break-before-avoid-page break-inside-avoid-column break-after-auto auto-cols-min grid-flow-col auto-rows-min grid-cols-1 grid-rows-1 flex-col flex-wrap place-content-between place-items-stretch content-between items-baseline justify-start justify-items-center gap-0 space-y-0 space-y-reverse gap-x-1 space-x-1 space-x-reverse gap-y-2 divide-x-2 divide-y-4 divide-y-reverse divide-dashed divide-black place-self-end self-baseline justify-self-stretch overflow-hidden overflow-x-auto overflow-y-scroll overscroll-auto overscroll-x-contain overscroll-y-none scroll-smooth rounded rounded-t-xl rounded-l-none rounded-tl-xl rounded-r-2xl rounded-tr-2xl rounded-b-sm rounded-br-sm rounded-bl-none border-0 border-x-2 border-y-2 border-t-4 border-r-4 border-b border-l border-solid border-black border-x-slate-50 border-y-transparent border-t-white border-r-transparent border-b-inherit border-l-current bg-current bg-none from-current via-black to-orange-500 decoration-clone bg-auto bg-fixed bg-clip-padding bg-bottom bg-no-repeat bg-origin-border fill-white stroke-white stroke-2 object-contain object-bottom p-0 px-1.5 py-px pt-1 pr-2 pb-3 pl-4 text-left indent-px align-top font-sans text-lg leading-4 font-semibold tracking-normal break-words text-ellipsis whitespace-nowrap text-current uppercase italic ordinal underline decoration-black decoration-double decoration-from-font underline-offset-auto subpixel-antialiased caret-black accent-black opacity-50 bg-blend-lighten mix-blend-darken shadow-lg ring-1 shadow-white ring-white ring-offset-2 ring-offset-current outline-0 outline-offset-1 outline-current blur brightness-50 contrast-100 drop-shadow-xl grayscale hue-rotate-90 invert saturate-100 sepia filter backdrop-blur-lg backdrop-brightness-110 backdrop-contrast-125 backdrop-grayscale backdrop-hue-rotate-90 backdrop-invert backdrop-opacity-30 backdrop-saturate-100 backdrop-sepia transition-all delay-150 duration-1000 ease-linear will-change-scroll content-none outline-dotted select-none [--scroll-offset:56px] divide-x-reverse ring-inset sm:transform-gpu sm:box-decoration-clone sm:overflow-ellipsis md:transform-none">Kitchensink</div>
-      `,
-      `
-      <div className={\`relative w-full overflow-hidden \${yolo ? "flex flex-col" : "block"}\`}>Issue #131</div>
-      `,
-      `
-      <div>
-        <h1>Issue #142</h1>
-        <div class="unselectable absolute box-content cursor-pointer rounded-full p-1.5 text-center transition-colors duration-300 select-none sm:transition-transform">1</div>
-        <div class="dark:after:border-t-blue-dark/40 dark:after:border-l-blue-dark/40 before:border-l-blue-mid before:border-t-blue-mid after:border-t-blue-subtle after:border-l-blue-subtle border-transparent before:border-transparent dark:before:border-transparent">2</div>
-        <div class="text-neutral-750 theme-contrast:text-black absolute -top-4 -right-1 cursor-pointer rounded-tr-sm rounded-bl-sm px-2.5 py-2 text-sm opacity-0 transition-opacity group-hover:opacity-50 group-hover:hover:opacity-100">3</div>
-        <div class="text-yellow-darker/50 dark:text-yellow-strong/70 hover:text-yellow-darker dark:hover:text-yellow-strong relative flex cursor-pointer items-center justify-center pt-2 pb-2 transition-colors">4</div>
-        <div class="text-yellow-darker/50 dark:text-yellow-strong/70 hover:text-yellow-darker dark:hover:text-yellow-strong relative flex cursor-pointer items-center justify-center pt-2 pb-2 transition-colors">5</div>
-        <div class="group relative -mx-1.5 my-0 block rounded px-1.5 pt-3.5 pb-4 transition-colors duration-150 hover:text-black active:top-0 dark:hover:text-white">6</div>
-        <div class="bg-neutral-70 theme-contrast:bg-white dark:bg-gray-780 pointer-events-none fixed top-0 left-0 h-screen w-screen opacity-70">7</div>
-        <div class="dark:before:border-t-blue-dark/40 dark:before:border-l-blue-dark/40 dark:after:border-t-blue-dark/40 dark:after:border-l-blue-dark/40 before:border-t-blue-subtle before:border-l-blue-subtle after:border-t-blue-subtle after:border-l-blue-subtle border-transparent">8</div>
-        <div class="dark:bg-blue-dark/40 bg-blue-subtle dark:text-blue-strong border-none text-black">9</div>
-        <div class="m-3 inline-block h-4 w-4 rounded-full transition-transform">10</div>
-      </div>
-      `,
-      `<div class>No errors while typing</div>`,
-      `
-      const func = () => ({ a: 12 });
-      <div className={clsx(['unknown relative', {
-        ...func()
-      }])}>Spread of a function return inside clsx</div>
-      `,
       `
       ctl(\`
         unknown
@@ -126,22 +100,17 @@ ruleTester.run(RULE_NAME, classnamesOrder, {
       const tw = (classes) => classes;
       const taggedTemplateExpression = tw\`unkown relative\`;
       `,
-      `
-      ctl(\`
-        container
-        flex
-        w-12
-        sm:w-6
-        lg:w-4
-      \`)`,
     ].map((testedJsxCode) => ({
       code: testedJsxCode,
     })),
     // Vue SFC
     ...[
-      `<template><div class="unkown relative">vAttributeVisitor static</div></template>`,
-      `<template><div v-bind:class="'unkown relative'">vAttributeVisitor(VAttribute)</div></template>`,
-      `<template><div :class="'unknown relative'">vAttributeVisitor with text</div></template>`,
+      `<template><h1 class="unkown relative">vAttributeVisitor static</h1></template>`,
+      `<template><h1 v-bind:class="'unkown relative'">vAttributeVisitor binding a string</h1></template>`,
+      `<template><h1 :class="'unknown relative'">vAttributeVisitor binding short</h1></template>`,
+      `<template><h1 :class="{ 'unknown relative': isActive, 'bg-black': hasError }">vAttributeVisitor Object</h1></template>`,
+      `<template><h1 :class="['unkown relative', 'bg-black']">vAttributeVisitor Array</h1></template>`,
+      `<template><h1 :class="[isActive ? 'unknown relative' : '', 'bg-black']">Array with ternary</h1></template>`,
       `
       <script>const ctl = (str) => str</script>
       <template><p :class="ctl('unknown relative')">{{ greeting }}</p></template>
@@ -161,13 +130,10 @@ ruleTester.run(RULE_NAME, classnamesOrder, {
       code: testedVueCode,
       languageOptions: withVueParser,
     })),
-    // Vue SFC + No attribute
+    // Vue SFC + Disabled attribute
     ...[
       `<template><div class="flex unkown relative">No attribute (skipped)</div></template>`,
-      `
-      <script>const tw = (str) => str + str;</script>
-      <template><div :class="tw('unknown relative')">vAttributeVisitor with CallExpression</div></template>
-      `,
+      `<template><div :class="tw('unknown relative')">No attribute but via CallExpression</div></template>`,
     ].map((testedVueCode) => ({
       code: testedVueCode,
       settings: { tailwindcss: { ...generalSettings, attributes: [] } },
@@ -177,7 +143,7 @@ ruleTester.run(RULE_NAME, classnamesOrder, {
       code: `<div className={'unknown tw:relative'}>Valid with custom prefix</div>`,
       settings: { tailwindcss: { ...prefixedSettings } },
     },
-    // JSX + Custom functions
+    // JSX + Custom functions/tag
     ...[
       `<div className={ctl('flex unknown relative')}>Ignored CallExpression inside a prop</div>`,
       `<div title={myTag('unknown relative')}>Ignored CallExpression inside a prop</div>`,
@@ -332,32 +298,59 @@ ruleTester.run(RULE_NAME, classnamesOrder, {
     },
     {
       /* prettier-ignore */
-      code:   `<div className={'tw:flex unknown tw:relative'}>Error with custom prefix</div>`,
-      output: `<div className={'unknown tw:relative tw:flex'}>Error with custom prefix</div>`,
+      code:   `<h1 className={'tw:flex unknown tw:relative'}>Error with custom prefix</h1>`,
+      output: `<h1 className={'unknown tw:relative tw:flex'}>Error with custom prefix</h1>`,
       settings: { tailwindcss: { ...prefixedSettings } },
       errors: errors,
     },
-    {
-      /* prettier-ignore */
-      code:   `<template><div class="relative unkown">??</div></template>`,
-      output: `<template><div class="unkown relative">??</div></template>`,
-      errors: errors,
-      languageOptions: withVueParser,
-    },
-    {
-      /* prettier-ignore */
-      code:   `<template><div :class="['relative unknown']">??</div></template>`,
-      output: `<template><div :class="['unknown relative']">??</div></template>`,
-      errors: errors,
+    // Vue SFC + Disabled attribute
+    ...[
+      [
+        `<template><h1 class="relative unkown">??</h1></template>`,
+        `<template><h1 class="unkown relative">??</h1></template>`,
+      ],
+      [
+        `<template><h1 :class="['relative unknown']">??</h1></template>`,
+        `<template><h1 :class="['unknown relative']">??</h1></template>`,
+      ],
+      [
+        `<template><h1 class="grid grid-cols-1 sm:grid-cols-2 sm:px-8 sm:py-12 sm:gap-x-8 md:py-16">:)</h1></template>`,
+        `<template><h1 class="grid grid-cols-1 sm:grid-cols-2 sm:gap-x-8 sm:px-8 sm:py-12 md:py-16">:)</h1></template>`,
+      ],
+      [
+        `<template><div :class="ctl(\`p-10 w-full \${some}\`)" /></template>`,
+        `<template><div :class="ctl(\`w-full p-10 \${some}\`)" /></template>`,
+      ],
+      [
+        `
+      <template>
+        <div v-bind="data" :class="[
+          'py-1.5 font-semibold transition',
+          {
+            'text-white': variant === 'white',
+            'text-blue-500 hover:text-blue-400 border-blue-500': variant === 'primary',
+            'underline decoration-2 underline-offset-[10px]': active
+          }
+        ]" />
+      </template>`,
+        `
+      <template>
+        <div v-bind="data" :class="[
+          'py-1.5 font-semibold transition',
+          {
+            'text-white': variant === 'white',
+            'border-blue-500 text-blue-500 hover:text-blue-400': variant === 'primary',
+            'underline decoration-2 underline-offset-[10px]': active
+          }
+        ]" />
+      </template>`,
+      ],
+    ].map(([input, result]) => ({
+      code: input,
+      output: result,
       languageOptions: withVueParser,
-    },
-    {
-      /* prettier-ignore */
-      code:   `<template><div class="grid grid-cols-1 sm:grid-cols-2 sm:px-8 sm:py-12 sm:gap-x-8 md:py-16">:)</div></template>`,
-      output: `<template><div class="grid grid-cols-1 sm:grid-cols-2 sm:gap-x-8 sm:px-8 sm:py-12 md:py-16">:)</div></template>`,
       errors: errors,
-      languageOptions: withVueParser,
-    },
+    })),
     {
       /* prettier-ignore */
       code:   `<div class="md:prose-2xl prose-xl prose sm:prose-sm"></div>`,
@@ -509,38 +502,5 @@ ruleTester.run(RULE_NAME, classnamesOrder, {
       ])`,
       errors: [error, error],
     },
-    {
-      /* prettier-ignore */
-      code:   `<template><div :class="ctl(\`p-10 w-full \${some}\`)" /></template>`,
-      output: `<template><div :class="ctl(\`w-full p-10 \${some}\`)" /></template>`,
-      errors: errors,
-      languageOptions: withVueParser,
-    },
-    {
-      code: `
-      <template>
-        <div v-bind="data" :class="[
-          'py-1.5 font-semibold transition',
-          {
-            'text-white': variant === 'white',
-            'text-blue-500 hover:text-blue-400 border-blue-500': variant === 'primary',
-            'underline decoration-2 underline-offset-[10px]': active
-          }
-        ]" />
-      </template>`,
-      output: `
-      <template>
-        <div v-bind="data" :class="[
-          'py-1.5 font-semibold transition',
-          {
-            'text-white': variant === 'white',
-            'border-blue-500 text-blue-500 hover:text-blue-400': variant === 'primary',
-            'underline decoration-2 underline-offset-[10px]': active
-          }
-        ]" />
-      </template>`,
-      errors: errors,
-      languageOptions: withVueParser,
-    },
   ],
 });

src/rules/classnames-order.ts

@@ -208,9 +208,8 @@ export const classnamesOrder = createRule<Options, MessageIds>({
             //*/
             break;
           }
-          default: {
-            console.log("child.type: " + child.type);
-          }
+          default:
+          // console.log("child.type: " + child.type);
         }
       }
       // Process the extracted classnames and report
@@ -315,8 +314,9 @@ export const classnamesOrder = createRule<Options, MessageIds>({
           }
           case "ObjectExpression": {
             for (const property of expressionContainer.expression.properties) {
-              // sortNodeArgumentValue(node, property); // 🎯
-              console.log(property);
+              if (property.type === "Property") {
+                sortNodeArgumentValue(node, property); // 🎯
+              }
             }
             break;
           }

src/rules/my-rule.ts

@@ -85,18 +85,17 @@ export const myRule = createRule<Options, MessageIds>({
     },
   ],
   create: (context, options) => {
-    // Reading inline configuration
-    // console.log("\n", new Date(), "\n", "Options (rule):", "\n", options[0]);
-
     // Shared settings
+    // @ts-expect-error 'sharedSettings' is declared but its value is never read.ts(6133)
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const sharedSettings = (context.settings?.tailwindcss ||
       DEFAULT_SETTINGS) as PluginSharedSettings;
-    console.log("\n", "sharedSettings (rule):", "\n", sharedSettings);
 
     // Merged settings
     // const settings = parsePluginSettings(options[0]) as RuleOptions;
+    // @ts-expect-error 'sharedSettings' is declared but its value is never read.ts(6133)
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const settings = parsePluginSettings(context.settings);
-    console.log("\n", "settings (rule):", "\n", settings);
 
     return {
       VariableDeclaration: (node) => {

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

@@ -9,6 +9,5 @@ test(`load theme from "tiny-prefixed.css"`, () => {
   expect(theme.keyframes.size).toBe(
     ["spin", "ping", "pulse", "bounce"].length * 2
   );
-  // console.log("Theme values:", theme.values);
   expect(theme.values.size).toBe(3);
 });