Publicado em 12 de março de 2025
O ESLint é o lint preferido para JavaScript há muito tempo, oferecendo várias configurações e regras que ajudam os desenvolvedores a aplicar um bom estilo para o JavaScript nos projetos. Recentemente, o ESLint passou a oferecer suporte a linting de CSS em projetos, oferecendo regras adicionais para verificar aspectos das 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 fazer lint de CSS nos seus projetos. Neste post rápido, você vai aprender a usar essa regra para garantir que o CSS atenda aos limites de referência "Recém-disponível" e "Disponível amplamente".
Como usar o ESLint para aplicar os recursos de CSS de referência
Se você já usou o ESLint antes, o processo de adição de linting de CSS ao seu projeto será razoavelmente rápido. Para começar, instale o pacote @eslint/css para seu projeto:
npm install @eslint/css --save-dev
Depois de instalar, você poderá adicionar suporte ao linting do CSS ao seu 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 linting para 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 não disponível na versão mais recente da plataforma é encontrado. Isso é especificado pela propriedade available da regra, que também aceita um valor de "newly" para garantir que todos os recursos do CSS usados estejam pelo menos disponíveis na versão de referência.
Depois de configurar a configuração, execute o ESLint na raiz do projeto para analisar o CSS do projeto:
npx eslint
Ao terminar, o ESLint vai mostrar todos os avisos sobre o CSS do seu projeto, que será parecido com 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 envio dessa funcionalidade do ESLint é que você pode usá-la em qualquer fluxo de trabalho de ferramentas que use o ESLint. Por exemplo, se você usa o webpack, é possível fazer com que ele gere a saída do lint 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ê pode garantir que seus projetos estão usando os recursos do CSS de referência sem muito esforço. Vale a pena tentar! Você pode se surpreender ao descobrir alguns dos recursos de referência usados no seu projeto. Para mais informações sobre como isso funciona, leia a documentação da regra require-baseline.