Possible to process/lint CSS files?

[AObuchow]

Hi, I have a kind of weird use case for this eslint plugin.

Eclipse Wild Web Developer supports ESLint for the Typescript language server (using this). However, Wild Web Developer is missing CSS formatting.

I had the idea of using the prettier plugin for eslint to add CSS formatting warnings & possibly auto-CSS-format, however I'm not sure if it's possible to have eslint-plugin-prettier processing CSS files.

Does anyone have an idea as to whether this is possible?

[BPScott]

This isn't possible. eslint has to work with a javascript AST. You can't transform CSS content into anything resembling a meaningful javascript AST.

Wild Web Developer should add support for stylelint if it wants linting of css.

[AObuchow]

@BPScott Thanks for the information I appreciate it, will look into stylelint.

[LLoydall]

This can actually be hacked together reasonably easily with some of the recent releases:

// ... other imports ...
import css from '@eslint/css'; // ^0.4.0
import { tailwindSyntax } from '@eslint/css/syntax'; 
import prettierPlugin from 'eslint-plugin-prettier'; // ^10.1.1

export default [
  // ...other config blocks...
  {
    files: ['**/*.css'],
    plugins: {
      css,
      prettier: {
        ...prettierPlugin,
        rules: {
          ...prettierPlugin.rules,
          // Create a custom 'prettier-css' rule extending the default prettier rule
          'prettier-css': {
            ...prettierPlugin.rules.prettier,
            create: (context) => {
              const baseCreator = prettierPlugin.rules.prettier.create(context);

              // Patch sourceCode.getLocFromIndex for CSS
              context.sourceCode.getLocFromIndex = (index) => {
                const snippet = context.sourceCode.text.substring(0, index);
                const lines = snippet.split('\n');
                return {
                  line: lines.length,
                  column: lines[lines.length - 1].length,
                };
              };

              // Pass StyleSheet nodes to the default Program function
              return {
                ...baseCreator,
                StyleSheet: baseCreator.Program,
              };
            },
          },
        },
        // Use the CSS parser from @eslint/css
        languages: {
          css: css.languages.css,
        },
      },
    },
    language: 'css/css',
    languageOptions: {
      tolerant: true,
      customSyntax: tailwindSyntax,
    },
    rules: {
      'prettier/prettier-css': [
        'warn',
        {},
        {
          usePrettierrc: true,
        },
      ],
    },
  },
  // ...other config blocks...
];

[JounQin]

In case we have https://github.com/ota-meshi/eslint-plugin-css and https://github.com/eslint/css, I'm reopening this issue, PR welcome to contribute.

[dotcarmen]

quick little update since i just came across this for json files

eslint supports linting more than js now, but this plugin still doesn't support non-js files. the problem seems to be that this plugin only matches Program nodes while eg @eslint/json i think returns Document nodes

[JounQin]

That's hard to know what's the root type for all potential parsers unfortunately. Maybe ESLint should expose a special root type.

Actually we've already been able to get the root node via sourceCode.ast. That would just be [soutceCode.ast.type] AFIK. @dotcarmen Do you want to raise a PR for it?

[dotcarmen]

sounds good. fyi i also had to reimplement getLocFromOffset because eg @eslint/json doesn't support such a method on their SourceCode class :)

PR incoming...