Open damianobarbati opened 1 year ago
cc @lbltavares
It looks like directives are honored only if under the settings definition:
{
"root": true,
"parser": "@typescript-eslint/parser",
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2022,
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"es2022": true,
"node": true
},
"plugins": [
"@typescript-eslint",
"prettier",
"simple-import-sort",
"react",
"react-hooks",
"testing-library",
"tailwindcss"
],
"extends": [
"plugin:@typescript-eslint/recommended",
"prettier",
"plugin:react-hooks/recommended",
"plugin:tailwindcss/recommended"
],
"overrides": [
// Only uses Testing Library lint rules in test files
{
"files": [
"**/*.test.[jt]s?(x)"
],
"extends": ["plugin:testing-library/react"]
}
],
"rules": {
"no-console": "off",
"prettier/prettier": [
"error",
{
"singleQuote": true,
"printWidth": 100
}
],
"@typescript-eslint/consistent-type-assertions": "off",
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-unused-vars": "warn",
"simple-import-sort/imports": [
"error",
{
"groups": [
[
// Node and React and related packages come first
"^(react|node:)", "^@?\\w",
// Internal packages.
"^(@|components)(/.*|$)",
// Side effect imports.
"^\\u0000",
// Parent imports. Put `..` last.
"^\\.\\.(?!/?$)", "^\\.\\./?$",
// Other relative imports. Put same-folder imports and `.` last.
"^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$",
// Style imports.
"^.+\\.?(css)$"
]
]
}
],
"simple-import-sort/exports": "error",
"tailwindcss/no-custom-classname": "error"
},
"settings": {
"react": {
"version": "detect"
},
"tailwindcss": {
"config": "./services/web/tailwind.config.js",
"cssFiles": [
"./services/web/src/**/*.css"
]
}
}
}
Already tried with the settings solution, still not working for me, by my case is that I use a tailwind.config.ts
config, so maybe is because of that?
In the config I also import the theme stuff from outside the module:
import { Config } from 'tailwindcss';
import {
color,
spacing,
borderRadius,
shadow,
fontWeight,
} from './app/src/styles';
const config: Config = {
content: ['./index.html', './app/src/**/*.{js,ts,jsx,tsx}'],
theme: {
spacing,
colors: color,
borderRadius,
boxShadow: shadow,
dropShadow: shadow,
fontWeight,
extend: {},
},
plugins: [],
};
export default config;
Just found this
I'm seeing this issue too, it can also be related to the plugin not being able to resolve the tailwind config, do you know if there's a way to debug it?
I tried running eslint with --debug
but I didn't see any logs related to the tailwind config
I personally think that the plugin should throw instead of returning {}
Same issue
(This might not be related) Spent hours trying to figure this out. Turns out eslint was confused because my project in Vscode is open in a monorepo view. Fix it by adding this setting to my .vscode
file at the root of the monorepo:
"eslint.workingDirectories": [
{
"pattern": "./name-of-project"
},
]
also had to specify working directories in WebStorm (monorepo, flat config) https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_eslint_manual_configuration
Describe the bug
I see the rule
no-custom-classname
not being applied correctly:cssFiles
paths array, my custom classes are not found and do trigger the ruleFor instance in my repo the following will trigger, even if the color
orange-accent
is defined and.loading
class is in myindex.css
file:I'm using the latest versions of everything:
To Reproduce
.eslintrc
content:tailwind.config.js
content:index.css
content: