css components 다운로드 -CSS css components 소스 코드 다운로드

@phntms/css-components

CSS 스타일을 구성 요소와 같은 구조로 랩핑 할 수있는 간단하고 가볍고 사용자 정의 가능한 CSS 구성 요소 라이브러리. Styled Component 및 Stitches와 같은 CSS-In-JS 라이브러리에서 영감을 얻었습니다.

소개

핵심적으로 CSS 구성 요소는 표준 CSS 주변의 간단한 래퍼입니다. CSS를 작성하여 원하는 방법을 작성한 다음 React에서 사용할 준비가 된 구성 요소로 구성 할 수 있습니다.

다음은 선택적 변형이있는 버튼 구성 요소의 최소 예입니다.

 import { styled } from "@phntms/css-components" ;
import css from "./styles.module.css" ;

export const Button = styled ( "button" , {
  css : css . root ,
  variants : {
    primary : {
      true : css . primary ,
    } ,
  } ,
} ) ;

이것은 React에서 사용할 수있는 멋진 깨끗한 구성 요소를 출력합니다.

 import { Button } from "./Button" ;

export const App = ( ) => (
  < div >
    < Button > Default </ Button >
    < Button primary > Primary </ Button >
  </ div >
) ;

설치

npm 으로이 패키지를 설치하십시오.

npm i @phntms/css-components

용법

다음은 primary 이라는 선택적 변형이있는 버튼 구성 요소의 전체 예입니다.

구성 요소/버튼/스타일 .module.css

. root {
  background-color : grey;
  border-radius : 4 px ;
}

. primary {
  background-color : black;
}

구성 요소/버튼/스타일

 import { styled } from "@phntms/css-components" ;
import css from "./styles.module.css" ;

export const StyledButton = styled ( "button" , {
  css : css . root ,
  variants : {
    primary : {
      true : css . primary ,
    } ,
  } ,
} ) ;

구성 요소/버튼/index.tsx

 import { StyledButton } from "./styles.ts" ;

interface Props {
  title : string ;
  onClick : ( ) => void ;
  primary ?: boolean ;
}

export const Button = ( { title , onClick , primary } : Props ) => (
  < StyledButton onClick = { onClick } primary = { primary } >
    { title }
  </ StyledButton >
) ;

변형 구성 객체

변형 구성 객체는 구성 요소가 지원하는 변형을 정의 할 수있는 간단한 객체입니다. 각 변형은 객체의 핵심이며 값은 해당 변형의 가능한 값 (CSS 클래스)을 정의하는 객체입니다.

 const StyledButton = styled ( "button" , {
  css : css . root ,
  variants : {
    big : {
      // Boolean values are supported
      true : css . big ,
    } ,
    color : {
      // String values are supported
      primary : css . primary ,
      secondary : css . secondary ,
    } ,
    size : {
      // Number values are supported
      1 : css . size1 ,
      2 : css . size2 ,
    } ,
  } ,
} ) ;

기본 변형

defaultVariants 기능을 사용하여 기본적으로 변형을 설정할 수 있습니다.

 const StyledButton = styled ( "button" , {
  css : css . root ,
  variants : {
    big : {
      // Boolean values are supported
      true : css . big ,
    } ,
  } ,
  defaultVariants : {
    big : true ,
  } ,
} ) ;

복합 변형

보다 복잡한 변형 설정의 경우 복합 변형 인수를 사용하여 여러 변형을 사용할 때 어떤 스타일을 적용 해야하는지 정의 할 수 있습니다.

 const StyledButton = styled ( "button" , {
  css : css . root ,
  variants : {
    border : {
      true : css . bordered ,
    } ,
    color : {
      primary : css . primary ,
      secondary : css . secondary ,
    } ,
  } ,
  compoundVariants : [
    {
      border : true ,
      color : "primary" ,
      css : css . blueBorder ,
    } ,
    {
      border : true ,
      color : "secondary" ,
      css : css . greyBorder ,
    } ,
  ] ,
} ) ;

다른

클래스 배열

CSS 선택기를 지정할 때마다 스타일을 작성하고 재사용하는 데 도움이되는 다양한 클래스를 전달할 수도 있습니다.

 import { styled } from "@phntms/css-components" ;
import shared from "../sharedstyles.module.css" ;
import css from "./styles.module.css" ;

const Link = styled ( "a" , {
  css : [ shared . link , shared . fontNormal , css . root ] ,
  variants : {
    big : {
      true : [ css . big , shared . fontBold ] ,
    } ,
  } ,
} ) ;

다른 구성 요소

다른 생태계의 다른 구성 요소를 스타일링 할 수도 있습니다. 구성 요소에 className 소품이있는 한 스타일은 전파되어야합니다.

예제 표준 확장 다음 Next.js Link 구성 요소 :

 import { styled } from "@phntms/css-components" ;
import NextLink from "next/link" ;
import css from "./styles.module.css" ;

const Link = styled ( NextLink , {
  css : css . link ,
  variants : {
    big : {
      true : css . big ,
    } ,
  } ,
} ) ;

통과

기본적으로 변형 값은 확장되는 요소로 전파되지 않으며 현재 구성 요소 스타일링에만 독점적으로 사용됩니다. 이는 DOM과 관련하여 특정 런타임 오류가 발생하는 것을 막는 것입니다. 확장중인 요소에 변형 값을 전달하려면 passthrough 옵션을 사용할 수 있습니다.

다음 예에서 readOnly 는 스타일을 유지하려는 고유의 HTML 속성이지만 DOM 요소로 계속 통과합니다.

 import { styled } from "@phntms/css-components" ;
import css from "./styles.module.css" ;

const Input = styled ( "input" , {
  css : css . root ,
  variants : {
    readOnly : {
      true : css . disabledStyle ,
    } ,
  } ,
  passthrough : [ "readOnly" ] ,
} ) ;

도우미를 입력하십시오

정의한 변형의 유형에 액세스 할 수있는 도우미가 포함되어 있습니다.

 import { VariantProps } from "@phntms/css-components" ;
import css from "./styles.module.css" ;

const Button = styled ( "button" , {
  css : css . baseButton ,
  variants : {
    primary : { true : css . primary } ,
  } ,
} ) ;

type ButtonVariants = VariantProps < typeof Button > ;
type PrimaryType = ButtonVariants [ "primary" ] ;

CLI 도구 (실험)

CSS 및 SCSS 파일에서 구성 요소를 생성 할 수있는 CLI 도구가 포함되어있어 특정 명명 규칙을 확인합니다. 이것은 매우 실험적이며 변화의 대상입니다.

이 CSS 파일을 고려하십시오.

 /* styles.module.css */
nav . topBar {
  background-color : # aaa ;
  padding : 32 px ;
}

nav . topBar_fixed_true {
  position : fixed;
  bottom : 0 ;
  left : 0 ;
  right : 0 ;
}

또는 SCSS (Sassy CSS) 사용 :

 // styles.module.scss
nav .topBar {
  background-color : #aaa ;
  padding : 32 px ;

  & _fixed_true {
    position : fixed ;
    bottom : 0 ;
    left : 0 ;
    right : 0 ;
  }
}

다음 명령 으로이 파일에서 구성 요소를 생성 할 수 있습니다.

 # For CSS
npx @phntms/css-components --css styles.module.css

# For SCSS
npx @phntms/css-components --css styles.module.scss

# or if you have the package installed
npx css-components --css styles.module.css
npx css-components --css styles.module.scss

이렇게하면 다음과 같이 보이는 styles.ts 라는 파일을 출력합니다.

 import { styled } from "@phntms/css-components" ;

import css from "./test.css" ;

export const TopBar = styled ( "nav" , {
  css : css . topBar ,
  variants : {
    fixed : {
      true : css . topBar_fixed_true ,
    } ,
  } ,
} ) ;

가능한 CSS 정의 :

a.link 구성 요소의 기본 스타일을 정의 할 수 있습니다. 이것은 CSS 클래스 link 있는 앵커 태그가 될 것임을 의미합니다.
a.link_big_true 사용하면 true 값을 가진 big 라는 변형의 스타일을 설정할 수 있습니다.
a.link_theme_light_default 위와 동일하지만 변형을 기본값으로 설정합니다.
a.link_big_true_theme_light 복합 변형 스타일을 정의 할 수있는 기능을 제공합니다.

CLI 옵션

--css 구성 요소를 생성하려는 CSS 또는 SCSS 파일의 경로입니다. 또한 전체 구성 요소 디렉토리를 스캔 할 수있는 재귀 적 글로벌 패턴 일 수도 있습니다.
-출력 파일의 파일 이름을 --output . CSS 파일과 동일한 디렉토리에 저장되는 기본값으로 styles.ts 로 저장됩니다.
--overwrite 출력 파일이 이미 존재하는 경우이를 덮어 씁니다. 기본값으로 false .

예제 구성 요소 디렉토리의 모든 CSS 및 SCSS 파일에서 구성 요소를 생성하는 것 :

 # From CSS
npx @phntms/css-components --css ./src/components/ ** / * .css --output styles.ts

# Or from SCSS
npx @phntms/css-components --css ./src/components/ ** / * .scss --output styles.ts

# Or from both CSS and SCSS
npx @phntms/css-components --css ./src/components/ ** / * .{css,scss} --output styles.ts