Stylelint - O que é isso?

Stylelint é o linter do CSS, ele funciona analisando seu CSS e avisando se alguma regra configurada for violada. Essas regras podem detectar erros CSS e impor convenções de estilo, é bem semelhante à verificação ortográfica e gramatical do Google Docs ou do Microsoft Word - tornando assim essencialmente, um revisor automático para seu CSS!

O Stylelint executa um arquivo de configuração chamado .stylelintrc.json. Este arquivo de configuração é dividido em regras , plug-ins e extensões .

Começando com as Regras

As regras definem o que o Stylelint procurará em seu código. Eles são definidos na rules seção da configuração como pares de valores-chave. A chave é a regra e o valor alterna a regra e define as opções. Habilitar uma regra depende da própria regra - algumas regras podem ser tão simples quanto definir o valor para true outros têm a capacidade de sintonizar diretamente por meio de uma palavra-chave, como exemplificado abaixo:

module.exports = {
  rules: {
    'declaration-no-important': true,
    'color-hex-case': 'upper',
  },
};

Algumas regras também permitem personalizá-lo ainda mais com opções de configuração adicionais. Nesse caso, a opção principal e as configurações adicionais são uma matriz.

module.exports = {
  rules: {
    'font-weight-notation': ['numeric', { ignore: ['relative'] }],
  },
};

Desativar é muito mais simples - basta definir o valor como null

module.exports = { 
  rules: { 
    'comment-no-empty': null, 
  }, 
};

Que tal uns plugins?

O Stylelint nativamente fornece quase 200 regras, mas essas regras não cobrem tudo. É aqui que entram os plugins - eles permitem que os desenvolvedores criem regras que você pode habilitar em sua configuração. Estes são alguns exemplos de plugins Stylelint:

Stylelint a11y - Usado para regras de acessibilidade
Stylelint SCSS - Como próprio nome já entrega sua funcionalidade... utilizado para regras de utilização do SCSS
Stylelint CSS - Utilizando para ordenação do CSS

Para integrar, defina esses plug-ins na plugins seção de configuração. Então você pode usar as regras do plugin na rules seção.

module.exports = { 
  plugins: [ 
    'stylelint-a11y', 
  ], 
  regras: { 
    "a11y / no-outline-none": true, 
  }, 
};

Extensões

Com tantas regras nativas e plug-ins contribuindo com ainda mais regras, as extensões Stylelint tornam-nas mais consumíveis, então você não está puxando o cabelo tentando entendê-las todas. Por meio de extensões, você herda os plug-ins e as regras para que não precise fazer isso sozinho. Aqui estão alguns exemplos de extensões Stylelint:

Stylelint Config Standard - Configuração de Stylelint recomendada pelos criadores do Stylelint
Stylelint Config Recommended SCSS - Configuração de Stylelint recomendada para SCSS
Stylelint a11y - Configuração de Stylelint recomendada para acessibilidade

As extensões são definidas na extensions seção da configuração.

module.exports  = { 
  extends: [ 
    'stylelint-config-standard', 
    'stylelint-config-recommended-scss', 
    'stylelint-a11y / recomendado', 
  ], 
};

Substituindo e Desativando

Mas o uso de extensões produz um efeito colateral, e você acaba concordando com eles se não observar... mas e se houver algumas regras que você preferisse ajustar ou desativar completamente? É aqui que entra a substituição e a desativação. Suas próprias regras definidas terão precedência e substituirão as regras da extensão.

module.exports = {
  extends: [
    'stylelint-config-standard',
  ],
  rules: {
    'color-hex-case': 'upper',
    'length-zero-no-unit': null,
  },
};

Mesmo se você tentar o seu melhor para cumprir uma regra, pode haver casos em que a regra não funcionará. Para impedir que o Stylelint falhe, você pode desabilitar temporariamente o Stylelint para linhas específicas com comentários dá seguinte forma:

/* stylelint-disable */ - Desativa Stylelint para todas as linhas abaixo até ser reativado com /* stylelint-enable */
/* stylelint-disable-line */ - Desativa Stylelint apenas para a linha atual.
/* stylelint-disable-next-line */ - Desativa Stylelint apenas para a próxima linha.

Você também pode especificar regras específicas (separadas por vírgula) após o comentário de desabilitação para desabilitar algumas regras, em vez de desabilitar todas.

div {
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  font-size: 12px !important; /* stylelint-disable-line declaration-no-important */

  /* stylelint-disable */
  :focus {
    outline: none;
  }
  /* stylelint-enable */
}

Eles devem ser usados com moderação, então, se você desabilita constantemente essas regras, considere desligá-las permanentemente.

CSS em JS

Se você estiver usando CSS popular em estruturas JS, como Emotion ou Styled Components , ainda será capaz de lintar seu CSS após um pouco de configuração extra. O stylelint-processor-styled-components processador extrairá os estilos de Emotion ou Styled Components para que o Stylelint possa soltá-los. Além disso, certas regras são incompatíveis com essas estruturas, portanto, devem ser desativadas usando stylelint-config-styled-components.

module.exports = {
  extends: ['stylelint-config-styled-components'],
  processors: ['stylelint-processor-styled-components'],
};

Múltiplas configurações

Se você estiver usando várias estruturas CSS, pode ser necessário ter várias configurações, cada uma direcionada a uma estrutura específica. Por exemplo, se você estiver usando vanilla CSS (uai não sabia que existia?) e componentes estilizados, precisará de uma configuração para cada um, devido às diferenças entre as duas configurações.

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-a11y/recommended'
  ],
};
// stylelint.styled.config.js
module.exports = {
  extends: [
    './stylelint.config.js',
    'stylelint-config-styled-components'
  ],
  processors: ['stylelint-processor-styled-components'],
};

Dica rápida: você pode estender suas configurações umas às outras para que não precise definir as mesmas regras, extensões de plug-ins novamente!

Executando

Para executar o Stylelint (com várias configurações), adicione os seguintes aliases a package.json.

{
  "scripts": {
    "lint:js": "stylelint '{**/*,*}.js' --config stylelint.styled.config.js",
    "lint:css": "stylelint '{**/*,*}.css'",
    "lint:css:fix": "stylelint '{**/*,*}.css' --fix"
  },
}

npm run lint:js(ou yarn run lint:js) executará Stylelint em componentes estilizados (arquivos com .jsextensão) e npm run lint:css (ou yarn run lint:css) executará Stylelint em vanilla CSS (arquivos com .css extensão). Além disso, o Stylelint suporta correção automática para que você possa executar npm run lint:css:fix (ou yarn run lint:css:fix) e qualquer violação do Stylelint que possa ser corrigida automaticamente. Infelizmente, a correção automática não é suportada quando você usa processadores exigidos pelos componentes estilizados.

Stylelint é o complemento perfeito para ESLint para impor e manter uma base de código de alta qualidade. Embora o Stylelint seja um pouco complicado de configurar inicialmente, quando estiver pronto, você pode confiar na qualidade e consistência do CSS. É apenas uma coisa a menos com que você precisa se preocupar para poder se concentrar na construção de um ótimo produto.

Fontes onde pesquisei esse conteúdo:

Blog