O suporte a CSS e à linha de base foi enviado no ESLint

Jeremy Wagner

Publicado em 12 de março de 2025, última atualização em 26 de março de 2025

ESLint é o linter preferido para JavaScript há muito tempo, oferecendo uma variedade de configurações e regras que ajudam os desenvolvedores a aplicar um bom estilo para JavaScript nos projetos. Recentemente, o ESLint passou a oferecer suporte à inspeção de CSS em projetos, oferecendo regras adicionais para verificar aspectos de folhas de estilo.

Como parte do lançamento do suporte a CSS, o ESLint agora oferece a regra require-baseline, que permite especificar qual limite de referência você quer usar ao inspecionar CSS nos projetos. Nesta postagem rápida, você vai aprender a usar essa regra para garantir que seu CSS atenda aos limites de referência recém-disponibilizados e amplamente disponíveis.

Como usar o ESLint para aplicar recursos de CSS de referência

Se você já usou o ESLint antes, o processo de adição da inspeção de CSS ao projeto deve ser razoavelmente rápido. Para começar, instale o pacote @eslint/css para seu projeto:

npm install @eslint/css --save-dev

Depois de instalado, você poderá adicionar suporte à inspeção de CSS ao projeto importando o pacote @eslint/css para a configuração do ESLint:

// eslint.config.js
import css from "@eslint/css";

export default [
  // Lint css files
  {
    files: ["src/css/**/*.css"],
    plugins: {
      css,
    },
    language: "css/css",
    rules: {
      "css/no-duplicate-imports": "error",
      // Lint CSS files to ensure they are using
      // only Baseline Widely available features:
      "css/require-baseline": ["warn", {
        available: "widely"
      }]
    },
  },
];

Embora a inspeção de CSS seja útil por si só, o valor agregado que o ESLint oferece ao fazer isso é pela regra require-baseline do linter. No snippet de código anterior, os avisos são gerados sempre que um recurso que não está amplamente disponível é encontrado. Isso é especificado pela propriedade available da regra, que também aceita um valor de "newly" para garantir que todos os recursos de CSS usados estejam pelo menos recém-disponibilizados.

Depois de configurar a configuração, você pode executar o ESLint na raiz do projeto, como mostrado abaixo, para inspecionar o CSS do projeto:

npx eslint

Quando terminar, o ESLint vai fornecer avisos sobre o CSS do projeto, que será semelhante a este:

/var/www/my-cool-web-project/src/css/styles.css
  269:3   warning  Property 'overflow' is not a widely available baseline feature                     css/require-baseline
  427:3   warning  Property 'overflow' is not a widely available baseline feature                     css/require-baseline
  444:12  warning  Value 'contents' of property 'display' is not a widely available baseline feature  css/require-baseline
  500:3   warning  Property 'resize' is not a widely available baseline feature                       css/require-baseline
  573:5   warning  Property 'overflow' is not a widely available baseline feature                     css/require-baseline

Um ótimo resultado do ESLint que envia essa funcionalidade é que você pode usá-la em qualquer fluxo de trabalho de ferramentas que use o ESLint. Por exemplo, se você usar o webpack, poderá fazer com que ele gere a saída do linter durante os builds do projeto usando eslint-webpack-plugin:

// Import the ESLint plugin:
import ESLintPlugin from "eslint-webpack-plugin";

// Webpack config:
export default {
  // Prior config code omitted...
  plugins: [
    new ESLintPlugin({
      // Add the `"css"` extension to ensure
      // CSS files are linted as well:
      extensions: ["js", "css"]
    })
  ]
};

Com essas novas adições úteis ao ESLint, agora você poderá garantir que seus projetos estejam usando recursos de CSS de referência sem muito esforço adicional. Vale a pena tentar! Você pode se surpreender ao descobrir alguns dos recursos de referência usados no projeto. Para mais informações sobre como isso funciona, leia a documentação da regra require-baseline.