css componentsダウンロード-CSS css componentsソースコードのダウンロード

@phntms/css-components

CSSスタイルをコンポーネントのような構造に包むことができる、シンプルで軽量でカスタマイズ可能なCSSコンポーネントライブラリ。スタイルのコンポーネントやステッチなどのCSS-in-JSライブラリに触発されました。

導入

その中心では、CSS-Componentsは標準の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と呼ばれるオプションのバリアントを備えたボタンコンポーネントの完全な例です。

コンポーネント/ボタン/styles.module.css

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

. primary {
  background-color : black;
}

コンポーネント/ボタン/styles.ts

 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 >
) ;

バリアント構成オブジェクト

Variants Configオブジェクトは、コンポーネントがサポートするバリアントを定義できるシンプルなオブジェクトです。各バリアントはオブジェクトのキーであり、値はそのバリアントの可能な値（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 、スタイリングしたいだけでなく、DOM要素に渡り続けたい本質的なHTML属性です。

 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（生意気な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使用するとbigと呼ばれるバリアントのスタイリングをtrueで設定できます。
a.link_theme_light_default上記と同じですが、バリアントをデフォルト値として設定します。
a.link_big_true_theme_light 、複合バリアントスタイルを定義する機能を提供します。

CLIオプション

--css CSSまたはSCSSファイルへのパスをから生成したい。これはまた、再帰的なGLOBパターンであり、コンポーネント全体のディレクトリ全体をスキャンできます。
--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