[BUG] no-custom-classname rule will not honor the project setting for config

[davazp]

Describe the bug
When I add a project setting like described in the README:

"settings": {
  "tailwindcss": {
    "config": "custom-file"
  }
}

to specify the tailwind config file (in .eslintrc), the no-custom-classname will ignore it.

I can workaround the issue by specifying the rule specific config:

    "tailwindcss/no-custom-classname": [
      "warn",
      {
        // NOTE: There is a bug in the eslint-plugin-tailwindcss
        // library that prevents this rule from seeing the project
        // settings. So until that is fixed, we are forced to specify
        // the config file here.
        //
        // We need to specify the file as an absolute path because
        // eslint runs from the root yarn workspace.
        config: path.join(__dirname, 'tailwind.config.js')
      },

I debugged a little bit and it seems the options of the rule have a default defined.

I think that default shadows the project setting:

eslint-plugin-tailwindcss/lib/util/settings.js

Lines 5 to 12 in be3a826

	const options = context.options[0] || {};
	if (options[name] != undefined) {
	return options[name];
	}
	// Settings (defined at plugin level, shared accross rules)
	if (context.settings && context.settings.tailwindcss && context.settings.tailwindcss[name] != undefined) {
	return context.settings.tailwindcss[name];
	}

eslint config file or live demo
Let me know if you need further information, I can work to provide one.

[isaaccuraErnesto]

I believe this may be happening with all rules as I'm experiencing the same with both classnames-order and no-custom-classname.

[francoismassart]

@davazp & @isaaccuraErnesto ,

Can you try to provide the path to the config in the shared settings via an absolute path ?

// .eslintrc.js
const path = require("path");

...

"settings": {
  "tailwindcss": {
    "config": path.join(__dirname, "custom-file"),
  }
}

[davazp]

I did try but it doesn't work. Regardless of what I pass in the project setting, the rule config's default shadows the project config.

[francoismassart]

Please provide a demo repository and I'll investigate more 😉

[davazp]

Thanks @francoismassart . I created a sample repository here: https://github.com/davazp/eslint-plugin-tailwindcss-issue-212

You can reproduce it by npm installing it and running npm run lint.

I made a custom file for tailwind config at tailwindcss.custom.js. Then, if you look at the .eslintrc.js:

const path = require('path');

module.exports = {
  plugins: ["tailwindcss"],
  parser: '@typescript-eslint/parser',
  rules: {
    // If we remove the {} options here, it will work. With it, the
    // default for the rule takes over project setting.
    "tailwindcss/no-custom-classname": ["error", {}]
  },
  settings: {
    tailwindcss: {
      config: path.join(__dirname, 'tailwindcss.custom.js')
    }
  }
};

I specify the config. However, the plugin will still think myviolet color is unknown. If you remove the {} from the rule options, then it works.

I hope this helps! Let me know if I can do anything else.

[isaaccuraErnesto]

@francoismassart I too have tried providing the path to the config file via an absolute path without any luck.

[francoismassart]

That is caused by the default value set in the meta block of each rule...

[francoismassart]

@davazp & @isaaccuraErnesto
=> npm i eslint-plugin-tailwindcss@3.10.1-beta.4 -D

Waiting for your feedback(s) 😉

[davazp]

@davazp & @isaaccuraErnesto => npm i eslint-plugin-tailwindcss@3.10.1-beta.4 -D

Waiting for your feedback(s) 😉

The upgrade fixes it for me! Thanks for the work.

[francoismassart]

👉 eslint-plugin-tailwindcss@3.10.1

[damianobarbati]

@francoismassart I'm working in a mono-repository having a top .eslintrc and a nested .eslintrc for the react application, but I see no luck in having the tailwindcss/no-custom-classname rule working.

To test I added the following:

    "tailwindcss/no-custom-classname": ["off", {
      "config": "ciao",
      "cssFiles": ["src/*.css", "src/**/*.css"]
    }]

ciao file does not exist but the plugin does not throw so I'm assuming that it's not picking the configuration.

Any advice? I tried to move every dependency in both folder's package.json with no luck.

[felicio]

@damianobarbati please, have you ever resolved it or maybe opened a new issue?