Help with error

[FooNameBar]

Hi there!

I just installed the plugin via packer and received this error when trying :TailwindSort

[tailwind-sorter.nvim]: Error during class sorting: (node:682711) 
Warning: To load an ES module set "type": "module" in the package.json or use the .mjs extension.
 (Use `node --trace-warnings ...` to show where the warning was created)  /home/name/.local/share/nvim/site/pack/packer/start/tailwind-sorter.nvim/formatter/dist/index.js:1
import { argv } from "process";
 ^^^^^^
 SyntaxError: Cannot use import statement outside a module
     at internalCompileFunction (node:internal/vm:73:18)
     at wrapSafe (node:internal/modules/cjs/loader:1178:20)
     at Module._compile (node:internal/modules/cjs/loader:1220:27)
     at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
     at Module.load (node:internal/modules/cjs/loader:1119:32)
     at Module._load (node:internal/modules/cjs/loader:960:12)
     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
     at node:internal/main/run_main_module:23:47
 Node.js v18.16.1.

Running NVIM v0.10.0-dev-347+g6b19170d4

Not sure where to start

[laytan]

Hey, very strange, what is the content of "/home/name/.local/share/nvim/site/pack/packer/start/tailwind-sorter.nvim/formatter/dist/index.js" for you?

It seems like it has an import statement, which it shouldn't have because this is build output. This is what it should look like for example:

var $8zHUo$process = require("process");
var $8zHUo$tailwindcssliblibsetupContextUtilsjs = require("tailwindcss/lib/lib/setupContextUtils.js");
var $8zHUo$tailwindcssresolveConfigjs = require("tailwindcss/resolveConfig.js");
var $8zHUo$tailwindcsslibutilresolveConfigPathjs = require("tailwindcss/lib/util/resolveConfigPath.js");

function $parcel$interopDefault(a) {
  return a && a.__esModule ? a.default : a;
}

var $882b6d93070905b3$require$createContext = $8zHUo$tailwindcssliblibsetupContextUtilsjs.createContext;

var $882b6d93070905b3$require$resolveConfigPath = ($parcel$interopDefault($8zHUo$tailwindcsslibutilresolveConfigPathjs));
const $882b6d93070905b3$var$configPath = $882b6d93070905b3$require$resolveConfigPath();
const $882b6d93070905b3$var$config = $882b6d93070905b3$var$configPath ? require($882b6d93070905b3$var$configPath) : {};
const $882b6d93070905b3$var$ctx = $882b6d93070905b3$require$createContext($8zHUo$tailwindcssresolveConfigjs($882b6d93070905b3$var$config));
const $882b6d93070905b3$var$texts = JSON.parse($8zHUo$process.argv[2]);
const $882b6d93070905b3$var$replacements = $882b6d93070905b3$var$texts.map($882b6d93070905b3$var$sortClasses);
console.log(JSON.stringify($882b6d93070905b3$var$replacements));
function $882b6d93070905b3$var$sortClasses(classStr) {
    if (typeof classStr !== "string" || classStr === "") return classStr;
    // Ignore class attributes containing `{{`, to match Prettier behaviour:
    // https://github.com/prettier/prettier/blob/main/src/language-html/embed.js#L83-L88
    if (classStr.includes("{{")) return classStr;
    let result = "";
    const parts = classStr.split(/(\s+)/);
    let classes = parts.filter((_, i)=>i % 2 === 0);
    const whitespace = parts.filter((_, i)=>i % 2 !== 0);
    if (classes[classes.length - 1] === "") classes.pop();
    classes = $882b6d93070905b3$var$sortClassList(classes);
    for(let i = 0; i < classes.length; i++)result += `${classes[i]}${whitespace[i] ?? ""}`;
    return result;
}
function $882b6d93070905b3$var$bigSign(bigIntValue) {
    return Number(bigIntValue > 0n) - Number(bigIntValue < 0n);
}
function $882b6d93070905b3$var$sortClassList(classList) {
    const classNamesWithOrder = $882b6d93070905b3$var$ctx.getClassOrder(classList);
    return classNamesWithOrder.sort(([, a], [, z])=>{
        if (a === z) return 0;
        if (a === null) return -1;
        if (z === null) return 1;
        return $882b6d93070905b3$var$bigSign(a - z);
    }).map(([className])=>className);
}

//# sourceMappingURL=index.js.map

I am unsure what could cause your issue, you are sure that the cd formatter && npm i && npm run build has been executed?

[FooNameBar]

I removed the package, verified it was removed, reinstalled, and manually ran npm i && npm run build in the formatter dir just be sure.

This is what my "/home/name/.local/share/nvim/site/pack/packer/start/tailwind-sorter.nvim/formatter/dist/index.js" looks like after doing that:

var $8zHUo$process = require("process");
var $8zHUo$tailwindcssliblibsetupContextUtilsjs = require("tailwindcss/lib/lib/setupContextUtils.js");
var $8zHUo$tailwindcssresolveConfigjs = require("tailwindcss/resolveConfig.js");
var $8zHUo$tailwindcsslibutilresolveConfigPathjs = require("tailwindcss/lib/util/resolveConfigPath.js");

function $parcel$interopDefault(a) {
  return a && a.__esModule ? a.default : a;
}

var $882b6d93070905b3$require$createContext = $8zHUo$tailwindcssliblibsetupContextUtilsjs.createContext;

var $882b6d93070905b3$require$resolveConfigPath = ($parcel$interopDefault($8zHUo$tailwindcsslibutilresolveConfigPathjs));
const $882b6d93070905b3$var$configPath = $882b6d93070905b3$require$resolveConfigPath();
const $882b6d93070905b3$var$config = $882b6d93070905b3$var$configPath ? require($882b6d93070905b3$var$configPath) : {};
const $882b6d93070905b3$var$ctx = $882b6d93070905b3$require$createContext($8zHUo$tailwindcssresolveConfigjs($882b6d93070905b3$var$config));
const $882b6d93070905b3$var$texts = JSON.parse($8zHUo$process.argv[2]);
const $882b6d93070905b3$var$replacements = $882b6d93070905b3$var$texts.map($882b6d93070905b3$var$sortClasses);
console.log(JSON.stringify($882b6d93070905b3$var$replacements));
function $882b6d93070905b3$var$sortClasses(classStr) {
    if (typeof classStr !== "string" || classStr === "") return classStr;
    // Ignore class attributes containing `{{`, to match Prettier behaviour:
    // https://github.com/prettier/prettier/blob/main/src/language-html/embed.js#L83-L88
    if (classStr.includes("{{")) return classStr;
    let result = "";
    const parts = classStr.split(/(\s+)/);
    let classes = parts.filter((_, i)=>i % 2 === 0);
    const whitespace = parts.filter((_, i)=>i % 2 !== 0);
    if (classes[classes.length - 1] === "") classes.pop();
    classes = $882b6d93070905b3$var$sortClassList(classes);
    for(let i = 0; i < classes.length; i++)result += `${classes[i]}${whitespace[i] ?? ""}`;
    return result;
}
function $882b6d93070905b3$var$bigSign(bigIntValue) {
    return Number(bigIntValue > 0n) - Number(bigIntValue < 0n);
}
function $882b6d93070905b3$var$sortClassList(classList) {
    const classNamesWithOrder = $882b6d93070905b3$var$ctx.getClassOrder(classList);
    return classNamesWithOrder.sort(([, a], [, z])=>{
        if (a === z) return 0;
        if (a === null) return -1;
        if (z === null) return 1;
        return $882b6d93070905b3$var$bigSign(a - z);
    }).map(([className])=>className);
}

//# sourceMappingURL=index.js.map

Also the Lsp is giving the following hints for the file: Line 1:

Diagnostics:                                                              
1. File is a CommonJS module; it may be converted to an ES module. [80001]

Line 2:

Diagnostics:                                                                                                                                                            
1. Could not find a declaration file for module 'tailwindcss/lib/lib/setupContextUtils.js'. '/home/name/.local/share/nvim/site/pack/packer/start/tailwind-sorter.nvim/formatter/node_modules/tailwindcss/lib/lib/setupContextUtils.js' implicitly has an 'any' type.                                                                          
     If the 'tailwindcss' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module 'tailwindcss/lib/lib/setupContextUtils.js';` [7016] 

Line 4:

Diagnostics:                                                                                                                                                            
1. Could not find a declaration file for module 'tailwindcss/lib/util/resolveConfigPath.js'. '/home/name/.local/share/nvim/site/pack/packer/start/tailwind-sorter.nvim/formatter/node_modules/tailwindcss/lib/util/resolveConfigPath.js' implicitly has an 'any' type.                                                                         
     If the 'tailwindcss' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module 'tailwindcss/lib/util/resolveConfigPath.js';` [7016] 

Also I just noticed the error changed to:

[tailwind-sorter.nvim]: Error during class sorting: /home/name/Projects/Misc/chirp/tailwind.config.ts:1
 import { type Config } from "tailwindcss";
 ^^^^^^
 SyntaxError
: Cannot use import statement outside a module
     at internalCompileFunction (node:internal/vm:73:18)
     at wrapSafe (node:internal/modules/cjs/loader:1178:20)
     at Module._compile (node:internal/modules/cjs/loader:1220:27)
     at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
     at Module.load (node:internal/modules/cjs/loader:1119:32)
     at Module._load (node:internal/modules/cjs/loader:960:12)
     at Module.require (node:internal/modules/cjs/loader:1143:19)
     at require (node:internal/modules/cjs/helpers:110:18)
     at Object.<anonymous> (/home/name/.local/share/nvim/site/pack/packer/start/tailwind-sorter.nvim/formatter/dist/index.js:16:73)
     at Module._compile (node:internal/modules/cjs/loader:1256:14)
 Node.js v18.16.1.

[laytan]

Looking at the error at this point it seems like the formatter is working but trying to read your config at "/home/name/Projects/Misc/chirp/tailwind.config.ts" fails.

I guess this error is because your tailwind config is in typescript and I don't handle that correctly, I didn't even know that was possible.

I will see if this is easily fixable in the coming days, in the meantime I suggest using 'tailwind.config.js'.

[FooNameBar]

Renaming to .js had no effect, but deleting the config file did. The sorter works without issue now.

tailwind.config.ts

import { type Config } from "tailwindcss";

export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

[FooNameBar]

After playing around, changing tailwind.config.ts to the following works:

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Relevant docs

[laytan]

Typescript configuration should now work as well. Thanks for the example configuration and documentation link!

[FooNameBar]

Glad I could help. Thanks for the quick commit; it's a great plugin!