styled modern normalize

スタイルのコンポーネント用のModern-normalize.css

modern-normalize.cssの一般的な輸入方法は、 Vanilla CSSまたはSass/Lessのような前処理者のワークフローやWebpackのようなバンドラーのワークフローで正常に機能する名前のない輸入品を使用することですが、 Styled Components 、EG AutoprefixingおよびCSSの最適化などのCSS-in-JSライブラリの利点を使用していません。

Styled-Modern-Normalizeは、スタイルのコンポーネントのCSSをテンプレートとして補間としてテンプレートとして提供するための最新のノルマライズcssのプロキシパッケージです。これにより、 injectGlobalまたはその他のスタイルのコンポーネントを介してインポートおよび使用できます。

パッケージは、 Modern-Normalize.CSSバージョン0.5.0に基づいており、互換性があります。提供されたスタイルは、スタイルのコンポーネントV2、V3、V4と互換性があります。

はじめる

インストール

プロジェクトへの依存関係としてパッケージを追加します。

npm install --save styled-modern-normalize

プロジェクトルート内からnpm install実行して、プロジェクトをブートストラップし、開発とランタイムの依存関係をインストールします。これは、ピア依存関係として定義されている必要なスタイルのコンポーネントパッケージをインストールしないことに注意してください。以下のピア依存関係セクションで説明されているように、個別にインストールする必要があります。

ピア依存関係

このパッケージでは、Reactコンポーネントを返すスタイルのコンポーネントAPI関数を使用します。

したがって、このパッケージは、ピア依存関係として定義されたスタイルのコンポーネントと反応パッケージに依存します。

Linux＆MacOSユーザーは、 NPM 5以下に束縛されているNPXを使用して、すべてのピア依存関係を簡単にインストールできます。

npx install-peerdeps styled-modern-normalize

NPM <5を使用する場合、 NPXツールは事前バンドルされていませんが、ユーザーはグローバルにインストールしてから上記のコマンドを実行するか、インストールPeerDepsパッケージをローカル/グローバルにインストールして、すべてのピア依存関係のインストールを処理できます。

 # 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

手動で

すべてのピア依存関係は、各パッケージの正しいバージョンをインストールすることにより、手動で手動でインストールすることもできます（たとえば、Microsoft Windowsベースのシステムを実行しているユーザーの場合）。

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

使用法

Styled-Modern-Normalizeは、デフォルトまたは名前付きExport modernNormalizeインポートすることで使用できます。

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

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

スタイルのコンポーネントv4を使用するときにスタイルを挿入するには、 createGlobalStyle API関数を使用して、 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 > ;
/* ... */

スタイルのコンポーネントV2またはV3を使用する場合、 injectGlobal APIを使用してスタイルを注入できます。

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

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

Modern-normalize.cssのバージョンこのパッケージは現在MODERN_NORMALIZE_VERSIONに基づいています。

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

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

開発ワークフロー

プロジェクトルート内からnpm install実行して、プロジェクトをブートストラップし、開発とランタイムの依存関係をインストールします。 src/ディレクトリの実行のソースファイルの変更で自動再コンパイルで開発を開始するには

npm run dev

このプロジェクトは、多くの編集者がSaveのソースファイルを自動的にフォーマットするように統合サポートを提供する、意見のあるコードフォーマッタプリティア向けにも構成されています。

建物

実行することで、配布ビルドを作成できます

npm run dist

Circle CIおよびTravis CIでは、継続的な統合ビルドが実行されています。

テスト

糸くず

JavaScriptソースは、ArticaStudio-base構成を使用してESLINTで糸くされています。

npm run lint:js

Markdownソースには、ArticiceStudio Presetを使用して吹き替えリントが並んでいます。

npm run lint:md

すべての糸くずのタスクは実行できます

npm run lint

貢献

開発プロセスと、強化提案を提案する方法、バグ、プロジェクトのスタイルガイド、ブランチ組織、バージョンモデルを報告する方法について、開発プロセスとレポートバグを提案する方法について学ぶための寄稿ガイドをお読みください。

このガイドには、既存の問題の改善や問題やプルリクエストに関するフィードバックなど、プロジェクトに貢献するための最小限の完全な、検証可能な例やその他の方法に関する情報も含まれています。

Copyright©2018-Present Arctic Ice Studio＆Sven Greb