styled modern normalize

moderne-normalin.css pour les composants stylisés

Une méthode d'importation courante pour modern-normalize.css consiste à utiliser des importations sans nom qui fonctionnent bien pour les projets avec Vanilla CSS ou pré-processeurs des flux de travail comme Sass / moins et un bundler comme WebPack, mais il n'utilise pas les avantages des bibliothèques CSS-en-JS comme les composants stylisés , l'auto-préparant CSSS et CSSS.

Styled-modern-normalize est un package proxy de Normalize.CSS moderne pour les composants stylisés pour fournir le CSS comme modèle littéral avec interpolation en utilisant la fonction API css de Styled-composant . Cela permet de l'importer et de l'utiliser via injectGlobal ou tout autre composant stylé.

Le package est basé sur et compatible avec la version 0.5.0 moderne-normalin.css . Les styles fournis sont compatibles avec les composants stylisés V2, V3 et V4.

Commencer

Installation

Ajoutez le package en tant que dépendance à votre projet:

npm install --save styled-modern-normalize

Exécutez npm install à partir de la racine du projet pour bootstrap le projet et installez les dépendances de développement et d'exécution. Notez que cela n'installera pas le package de composants de style requis qui est défini comme une dépendance par les pairs et doit être installé séparément comme décrit dans la section des dépendances par les pairs ci-dessous.

Dépendances des pairs

Ce package utilise des fonctions API de composants stylisés qui renvoient les composants React.

Par conséquent, ce package dépend des composants stylisés et des packages React définis comme des dépendances par les pairs.

Les utilisateurs de Linux & MacOS peuvent facilement installer toutes les dépendances par les pairs en utilisant le NPX qui est prébunché avec NPM 5 ou plus:

npx install-peerdeps styled-modern-normalize

Lorsque vous utilisez NPM <5, l'outil NPX n'est pas prébunché, mais les utilisateurs peuvent simplement l'installer globalement, puis exécuter la commande ci-dessus, soit installer le package d'installation-peerdeps localement / globalement pour le laisser gérer l'installation de toutes les dépendances par les pairs.

 # 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

Manuellement

Toutes les dépendances par les pairs peuvent également être installées manuellement (par exemple pour les utilisateurs exécutant un système basé sur Windows Microsoft) en installant la version correcte de chaque package:

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

Usage

La normalisation moderne de style peut être utilisée en important la paramètre par défaut ou nommée modernNormalize .

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

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

Pour injecter les styles lors de l'utilisation de composants stylisés V4 La fonction API createGlobalStyle peut être utilisée qui génère un composant de réalisation 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 > ;
/* ... */

Lorsque vous utilisez des composants stylisés v2 ou v3, les styles peuvent être injectés à l'aide de l'API injectGlobal :

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

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

La version de moderne-normalize.css Ce package est actuellement basé sur MODERN_NORMALIZE_VERSION :

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

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

Flux de travail de développement

Exécutez npm install à partir de la racine du projet pour bootstrap le projet et installez les dépendances de développement et d'exécution. Pour démarrer le développement avec une recompilation automatique sur tout changement de fichier source dans l'exécution de src/ répertoire

npm run dev

Le projet est également configuré pour le formateur de code d'opinion plus joli qui fournit une prise en charge d'intégration pour de nombreux éditeurs pour formater automatiquement le fichier source sur SAVE.

Bâtiment

Une construction de distribution peut être créée en exécutant

npm run dist

Les constructions d'intégration continue fonctionnent à Circle CI et Travis CI.

Essai

Libellé

Les sources JavaScript sont lintées avec Eslint en utilisant la configuration de base arcticiceStudio qui peut être exécutée avec

npm run lint:js

Les sources de marquage sont misées avec une remarque en utilisant le préréglage ArcticiceStudio qui peut être exécuté avec

npm run lint:md

Toutes les tâches de liaison peuvent être exécutées avec

npm run lint

Contributif

Lisez le guide contributeur pour en savoir plus sur le processus de développement et comment proposer des suggestions d'amélioration et des bugs de rapport, comment soumettre des demandes de traction et les style de style, l'organisation de la succursale et le modèle de version.

Le guide comprend également des informations sur des exemples minimaux, complets et vérifiables et d'autres moyens de contribuer au projet, comme l'amélioration des problèmes existants et les commentaires sur les problèmes et les demandes de traction.

Copyright © 2018 ProSent Arctic Ice Studio & Sven Greb