10 Plugins PostCSS impressionantes para fazer de você um assistente de CSS

PostCSS é uma ferramenta incrivelmente versátil que torna possível Transformar estilos CSS com plugins JavaScript. Sua flexibilidade está na maneira como é construída.

A parte principal do PostCSS é um módulo do Node.js que você pode instalar com o npm e tem um ecossistema de mais de 200 plugins que você pode escolher para usar em seu projeto.

O PostCSS não é um pré-processador nem um pós-processador, pois diferentes plug-ins PostCSS podem se enquadrar em uma dessas categorias ou em ambos; depende inteiramente de você o que você faz dele. Com o PostCSS, você não precisa aprender uma sintaxe diferente como no caso de Sass ou LESS; você pode começar imediatamente a usá-lo.

O PostCSS pega seu arquivo CSS existente e o transforma em dados legíveis por JavaScript. Em seguida, os plug-ins de JavaScript executam as modificações e PostCSS retorna a versão alterada do arquivo original. Parece legal, não é??

Neste post vamos dar uma olhada em 10 plugins PostCSS para dar-lhe uma visão sobre algumas das grandes coisas que você pode alcançar com esta ferramenta incrível.

1. Autoprefixer

Autoprefixer é provavelmente o plugin PostCss mais conhecido, já que é usado por empresas de tecnologia notáveis como Google, Twitter e Shopify. isto adiciona prefixos de fornecedores às regras de CSS, onde é necessário.

O autoprefixer usa dados do Can I Use. Desta forma, não fica desatualizado e pode sempre aplicar as regras mais recentes. Você pode conferir como funciona em seu site de demonstração interativo.

2. CSSnext

CSSnext é um transpiler CSS que permite que você use futuras sintaxes CSS em sites atuais. O W3C tem muitas novas regras de CSS que atualmente não são implementadas pelos navegadores, mas pode permitir que desenvolvedores escrevam CSS mais sofisticados de maneira mais rápida e fácil. CSSnext foi feito para colmatar esta lacuna.

Vale a pena dar uma olhada em seus recursos para ver o que você pode realizar com ele, por exemplo, use consultas de mídia personalizadas, seletores personalizados, modificadores de cor, filtros SVG e novos pseudoclasses em seus projetos.

3. PreCSS

PreCSS é um dos plugins PstCSS que funcionam como um pré-processador CSS. Torna possível tirar proveito de uma marcação Sass-like em seus arquivos sytlesheet.

Ao introduzir o PreCSS em seu fluxo de trabalho, você pode usar variáveis, if-else afirmações, para loops, mixins, @ampliar e @importar regras, aninhamento e muitos outros recursos úteis em seu código CSS. A documentação do Github do PreCSS fornece instruções detalhadas sobre como aproveitar ao máximo.

4. StyleLint

StyleLint é um linter CSS moderno que revisa e valida seu código CSS. Isso torna fácil evitar erros e leva você a seguir convenções de codificação consistentes.

StyleLint entende a mais recente sintaxe CSS, para que possa ser usada junto com o plugin PreCSS mencionado anteriormente. Também permite que você faça sua própria configuração e até verifica se suas configurações são válidas.

5. Ativos do PostCSS

O plugin PostCSS Assets é útil gerenciador de ativos para seus arquivos CSS. Pode ser uma ótima opção se você tiver problemas com caminhos de URL, pois os Ativos PostCSS isolam seus arquivos de folhas de estilo de alterações ambientais.

Você precisa definir caminhos de carregamento, caminhos relativos e um caminho base, e o plug-in procurará automaticamente os recursos de que você precisa. Por exemplo, você pode escrever o seguinte código se precisar da URL apropriada do foobar.jpg imagem:

 corpo background: resolve ('foobar.jpg');

Ativos PostCSS também cuida do cache de ativos, como você pode definir o cachebuster variável para true se você quiser que os caminhos de URL sejam alterados automaticamente no caso de um ativo ser modificado. Este plugin inteligente também calcula as dimensões (largura e altura) dos arquivos de imagem, ou até os redimensiona usando uma proporção predefinida..

6. CSSNano

Se você precisa de arquivos CSS otimizados e minimizados para um site de produção, vale a pena conferir CSSNano. É um plugin modular que consiste em muitos plugins PostCSS menores e de responsabilidade única. Ele não executa apenas técnicas básicas de minificação, como a remoção de espaços em branco, mas também oferece opções avançadas que possibilitam otimizações focadas..

Entre muitos outros recursos, o CSSNano é capaz de rebasing de valores de índice z, reduzindo identificadores personalizados, convertendo valores de comprimento, tempo e cor, e removendo prefixos de fornecedores desatualizados.

7. Mago da Fonte

Se você é um fã de tipografia sofisticada, você certamente irá gostar do Mago da Fonte Plugin PostCSS. A magia do Magista da Fonte depende de sua capacidade de gerando automaticamente todo o necessário @Tipo de letra regras.

Como funciona é bastante simples, você só precisa adicionar o font-family: "Minha fonte do Fav"; Regra CSS para um elemento HTML, e o Font Magician faz o resto do trabalho. Ele pode adicionar fontes do Google, a cópia local de uma fonte, a tipografia do Bootstrap e também pode carregar fontes de forma assíncrona. Aqui está o site de demonstração interativo.

8. Escreva SVG

Alguma vez você já se perguntou sobre como seria legal escrever SVG diretamente em seus arquivos CSS? Com a ajuda do plugin Write SVG PostCSS, você pode facilmente atingir esse objetivo.

Este prático plugin, por exemplo, torna possível armazene seus fundos e ícones SVG em seu arquivo CSS, e depois adicione-os ao elemento HTML relevante Da seguinte maneira:

 @svg square @rect fill: var (- cor, preto); largura: 100%; altura: 100%;  .example background: white svg (par quadrado (- cor # 00b1ff)) capa;

9. Grade Perdida

Grade Perdida é um ótimo plugin PostCSS que fornece um impressionante Sistema de grade CSS isso não só funciona com CSS simples mas também com linguagens de pré-processador (Sass, LESS, Stylus). Ele usa o calc () Função CSS para criar belas grades que você pode usar facilmente sem gastar muito tempo com personalização.

O Lost Grid tem regras muito diretas, por exemplo, definir uma coluna com 25% de largura não requer mais do que esse pequeno trecho de código:

 div coluna perdida: 1/4;

10. Sprites PostCSS

o Sprite PostCSS plugin torna mais fácil gerar sprites de imagem, ou seja, coleções de imagens colocadas em um único arquivo. Depois de definir algumas opções, o plug-in pega as imagens do seu arquivo de folha de estilo, as mescla em um sprite e atualiza as referências da imagem sempre que necessário.

Você pode usar diferentes filtros e garoupas para determinar quais imagens você deseja colocar no sprite, e também pode definir as dimensões da imagem de saída.