Change Request: support linting .scss files

[NateRadebaugh]

Environment

ESLint version:
@eslint/css version: 0.5.0
Node version: 22.14.0
npm version: 10.9.2
Operating System: Windows 11

What problem do you want to solve?

I'd love to be able to use @eslint/css but most of my project code using SCSS for styles. Can this library support .scss files? All of the documentation only includes css.

What do you think is the correct solution?

Stylelint supports scss via postcss and also can enable plugins like postcss-angular postcss-html . It would be great if eslint supported this level of integration for scss as well.

Participation

• I am willing to submit a pull request for this change.

Additional comments

No response

[nzakas]

Thanks for the suggestion. I'm not sure how to go about doing this for this plugin.

Stylelint is built on PostCSS, so it's easy for them to work with PostCSS plugins. This plugin is based on CSSTree, which means there's no easy path to supporting PostCSS plugins. I'm not saying it's impossible, just that there would have to be a different as-yet-unknown approach.

I'm not very familiar with the differences between CSS and SCSS, can you provide a high-level overview?

And have you tried using the tolerant: true option? What happens if you do that?

[NateRadebaugh]

SCSS provides a handful of syntax/features on top of base CSS, such as:

• nesting
• variables
• mixins/functions

ex:

$primary-color: blue;
$secondary-color: white;

.button {
  background-color: $primary-color;
  color: $secondary-color;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

Changing to tolerant: true does seem to allow some of the linting, so that's great, but in my eslint.config.mjs file I'm seeing the following error from the TS service:

Object literal may only specify known properties, and 'tolerant' does not exist in type 'LanguageOptions'.ts(2353)

{
  files: ["**/*.css", "**/*.scss"],
  plugins: {
    css,
  },
  language: "css/css",
  languageOptions: {
    tolerant: true,
  },
  rules: {
    "css/prefer-logical-properties": "error",
  },
},

[nzakas]

Thanks for the examples. I'm not sure the best way to look at this. It could be a custom parser or maybe some changes to CSSTree. It will take me some time to investigate.

Object literal may only specify known properties, and 'tolerant' does not exist in type 'LanguageOptions'.ts(2353)

Thanks for pointing this out. It looks like this is an error in the types coming from the eslint package. I'll dig into that.

[TheAlexGo]

+1! I would like to completely abandon the stylelint solution, but without sass/scss support (and there is also stylus), it is problematic to do so. But I believe that eslint/css has a great future!

[nzakas]

@scripthunter7 I'm curious if, with your experience with CSSTree, if you think it's possible to extend it to parse SCSS?

[scripthunter7]

@nzakas Actually, CSS Tree is quite modular and also supports the fork option, so I wouldn’t rule out the possibility of adapting it for SCSS as well

[nzakas]

Okay, I think I have an idea of how to do this. Here's what I'm working on:
#112

You can follow along with the progress on the PR and give it a try. (Note: linting and type checking is currently failing. That's expected at this point.)

[nzakas]

Okay, I severely underestimated the amount of effort this would take. The syntax surface area of SCSS is pretty large and it will likely take me a long time to work through every piece of it.

At this point, I'm looking for a company or person willing to sponsor development of an SCSS parser for this plugin.

[NateRadebaugh]

A way to shortcut this effort could be to not write your own parser for SCSS and instead pull in postcss and postcss-scss plugins directly.

• https://github.com/postcss/postcss-scss
• stylelint-config-recommended-scss

[nzakas]

Thanks for the suggestion. That would eliminate some of the work. It's still going to be a lot of work because we need to translate the AST into a format that this plugin would understand. As I mentioned, SCSS syntax surface area is quite large and needing to define and test AST nodes that won't interfere with what this plugin does is a large effort. I don't have enough free time to do that and also the other work that ESLint requires.

If someone else wants to take that on, I'd say go for it. For me, I can't afford to spend that much time on it without being paid.