Hey everyone! 👋 I've been deep-diving into cleaning up our team's front-end code and hit a familiar crossroad. We use ESLint religiously for our JavaScript/TypeScript, but our CSS (and CSS-in-JS) is... a bit of a wild west. I know we need linting there too, but I'm curious how others are structuring this.
Do you all use Stylelint alongside ESLint? Or do you try to make ESLint handle CSS linting somehow? I've seen some ESLint plugins for CSS-in-JS patterns, but they seem limited compared to a dedicated tool.
What about your configs? I'm thinking of separate config files (`.eslintrc.js`, `.stylelintrc.json`), but then how do you manage the overlap? Like, what if you want to enforce the same naming convention in both your JS variables and your CSS custom properties? And for build integration—running two separate linter commands feels clunky. Do you combine them in a single npm script or use a pre-commit hook that runs both?
Also, what about the CSS-in-JS libraries (Styled Components, Emotion)? Do you find Stylelint handles those well with its dedicated plugins, or is there a compelling reason to keep all linting under the ESLint umbrella in that case?
I'd love to hear about your setups, pain points, and any "aha!" moments you've had!
Words matter