styled modern normalize

Modern-normalize.css para componentes com estilo

Um método de importação comum para modern-normalize.css é usar importações sem nome, que funcionam bem para projetos com CSS de baunilha ou fluxos de trabalho de pré-processadores como SASS/LEINTE e um empacão como Webpack, mas não utiliza as vantagens das bibliotecas de CSS-JS, como o componente , eg-se otimista.

Estilo-Normalize Modlen-Normalize é um pacote proxy do modern-normalize.css para componentes de estilo para fornecer o CSS como modelo literal com interpolação usando a função API css do Styled-Component . Isso permite importar e usá -lo via injectGlobal ou qualquer outro componente com estilo.

O pacote é baseado e compatível com o modernize.css versão 0.5.0. Os estilos fornecidos são compatíveis com os componentes V2, V3 e V4 com estilo .

Começando

Instalação

Adicione o pacote como dependência ao seu projeto:

npm install --save styled-modern-normalize

Execute npm install de dentro da raiz do projeto para inicializar o projeto e instalar as dependências de desenvolvimento e tempo de execução. Observe que isso não instalará o pacote de componentes de estilo necessário , que é definido como dependência de pares e deve ser instalado separadamente, conforme descrito na seção de dependências de pares abaixo.

Dependências de pares

Este pacote usa as funções da API de componentes de estilo que retornam componentes do React.

Portanto, este pacote depende dos pacotes de componentes e reação de estilo definidos como dependências de pares.

Os usuários do Linux & MacOS podem instalar facilmente todas as dependências de pares usando o NPX, que vem pré -prebobinado com o NPM 5 ou superior:

npx install-peerdeps styled-modern-normalize

Ao usar o NPM <5, a ferramenta NPX não é pré-prebobrada, mas os usuários podem simplesmente instalá-la globalmente e executar o comando acima ou instalar o pacote Install-PeerDeps localmente/globalmente para deixá-lo lidar com a instalação de todas as dependências de pares.

 # Via local installation…
npm install install-peerdeps
./node_modules/.bin/install-peerdeps styled-modern-normalize

# …or globally.
npm install -g install-peerdeps
install-peerdeps styled-modern-normalize

Manualmente

Todas as dependências de pares também podem ser instaladas manualmente (por exemplo, para usuários executando um sistema baseado no Microsoft Windows) instalando a versão correta de cada pacote:

npm info " styled-modern-normalize@latest " peerDependencies

Uso

Normalize com estilo moderno pode ser usado importando o padrão ou o nome de exportação modernNormalize .

 // With default export…
import modernNormalize from "styled-modern-normalize" ;

// …or via named export.
import { modernNormalize } from "styled-modern-normalize" ;

Para injetar os estilos ao usar componentes de estilo v4 A função da API createGlobalStyle pode ser usada que gera um componente de alcance StyledComponent :

 // Usage with the latest "styled-components" v4.
import { createGlobalStyle } from "styled-components" ;

const ModernNormalize = createGlobalStyle `
  ${ modernNormalize }
  /* ... */
` ;

// Use the generated component in your rendering logic to inject the styles.
/* ... */
< React . Fragment >
  < ModernNormalize />
</ React . Fragment > ;
/* ... */

Ao usar componentes de estilo V2 ou V3, os estilos podem ser injetados usando a API injectGlobal :

 // Usage with "styled-components" v2 or v3.
import { injectGlobal } from "styled-components" ;

const cssBaseline = injectGlobal `
  ${ modernNormalize }
  /* ... */
` ;

A versão do modern-normalize.css Este pacote é baseado atualmente é exportado como MODERN_NORMALIZE_VERSION :

 import { MODERN_NORMALIZE_VERSION } from "styled-modern-normalize" ;

// Example:
console . log ( MODERN_NORMALIZE_VERSION ) ; // "0.5.0"

Fluxo de trabalho de desenvolvimento

Execute npm install de dentro da raiz do projeto para inicializar o projeto e instalar as dependências de desenvolvimento e tempo de execução. Para iniciar o desenvolvimento com recompilação automática em qualquer alteração de arquivo de origem no src/ Directory Run

npm run dev

O projeto também está configurado para o formatador de código opinativo mais bonito, que fornece suporte de integração a muitos editores para, por exemplo, formatar automaticamente o arquivo de origem no SAVE.

Prédio

Uma construção de distribuição pode ser criada executando

npm run dist

As compilações de integração contínua estão sendo executadas no Circle CI e Travis CI.

Teste

LING

Fontes JavaScript são fiadas com Eslint usando a configuração ArcticicStudio-Base que pode ser executada com

npm run lint:js

As fontes de marcação são fiadas com o comutação usando a predefinição do ArcticEstudio que pode ser executado com

npm run lint:md

Todas as tarefas de linha podem ser executadas com

npm run lint

Contribuindo

Leia o guia contribuinte para saber sobre o processo de desenvolvimento e como propor sugestões de aprimoramento e relatar bugs, como enviar solicitações de puxar e os guias de estilo do projeto, organização de filial e modelo de versão.

O guia também inclui informações sobre exemplos mínimos, completos e verificáveis e outras maneiras de contribuir para o projeto, como melhorar os problemas existentes e fornecer feedback sobre problemas e obter solicitações.

Copyright © 2018-presente Arctic Ice Studio e Sven Greb