styled modern normalize

스타일의 경쟁자를위한 Modern-Normanment.CSS

modern-normalize.css 의 일반적인 수입 방법은 Sass/Less와 같은 바닐라 CSS 또는 사전 프로세서 워크 플로우 및 웹 팩과 같은 번들러와 같은 프로젝트에 적합한 이름없는 수입을 사용하는 것입니다. 그러나 Style-Components , EG Auto-Proxing 및 CSS 최적화와 같은 CSS-In-JS 라이브러리의 장점을 사용하지는 않습니다.

Styled-Modern-Normanimes는 Styled 회사 의 css API 기능을 사용하여 CSS를 보간 문자로 제공하기위한 현대-normanment.css의 프록시 패키지입니다. 이를 통해 injectGlobal 또는 기타 스타일 구성 요소를 통해 가져 와서 사용할 수 있습니다.

이 패키지는 Modern-Normanize.css 버전 0.5.0을 기반으로하며 호환됩니다. 제공된 스타일은 Styled-Components V2, V3 및 V4와 호환됩니다.

시작하기

설치

프로젝트의 종속성으로 패키지를 추가하십시오.

npm install --save styled-modern-normalize

프로젝트 루트 내에서 npm install 실행하여 프로젝트를 부트 스트랩하고 개발 및 런타임 종속성을 설치하십시오. 이는 피어 종속성으로 정의 된 필수 스타일 컴포넌트 패키지를 설치하지 않으며 아래 피어 종속성 섹션에 설명 된대로 별도로 설치해야합니다.

피어 의존성

이 패키지는 반응 구성 요소를 반환하는 스타일 컴포넌트 API 기능을 사용합니다.

따라서이 패키지는 스타일링 컴포넌트 및 피어 종속성으로 정의 된 반응 패키지에 따라 다릅니다.

Linux & MacOS 사용자는 NPM 5 이상으로 사전 번지는 NPX를 사용하여 모든 피어 종속성을 쉽게 설치할 수 있습니다.

npx install-peerdeps styled-modern-normalize

NPM <5를 사용하는 경우 NPX 도구는 사전 번지는 것이 아니지만 사용자는 전역에서 단순히 설치 한 다음 위 명령을 실행하거나 설치 피어 듀스 패키지를 로컬/전 세계적으로 설치하여 모든 피어 종속성의 설치를 처리 할 수 있습니다.

 # 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

용법

스타일의 모체-정상화는 기본값 또는 명명 된 내보내기 modernNormalize 가져 오면 사용할 수 있습니다.

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

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

스타일 을 사용할 때 스타일을 주입하려면 createGlobalStyle 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-Normance.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

이 프로젝트는 또한 의견이 많은 Code Formatter Prettier에 대해 구성되어 있으며, 이는 Save의 소스 파일을 자동으로 포맷하기 위해 많은 편집자에 대한 통합 지원을 제공합니다.

건물

실행을 통해 분배 빌드를 만들 수 있습니다

npm run dist

Circle CI 및 Travis CI에서 지속적인 통합 빌드가 실행 중입니다.

테스트

일선

JavaScript 소스는 Arcticicestudio-Base 구성을 사용하여 ESLINT와 함께 보풀로 채워져 있습니다.

npm run lint:js

Markdown 소스는 Arcticicestudio Preset을 사용하여 Waricklint로 채워져 있습니다.

npm run lint:md

모든 일린 작업을 실행할 수 있습니다

npm run lint

기여

기고 가이드를 읽고 개발 프로세스에 대한 배우고 강화 제안 및보고 버그를 제안하는 방법, 풀 요청을 제출하는 방법 및 프로젝트 스타일 가이드, 지점 조직 및 버전 관리 모델을 제출하는 방법을 읽으십시오.

이 안내서에는 최소, 완전 및 검증 가능한 예제 및 기존 문제를 개선하고 문제에 대한 피드백을 제공하고 요청을 가져 오는 것과 같은 프로젝트에 기여하는 기타 방법에 대한 정보도 포함되어 있습니다.

Copyright © 2018-Present Arctic Ice Studio & Sven Greb