css components
0.4.0
Простая, легкая и настраиваемая библиотека компонентов CSS, которая позволяет вам обернуть стили CSS в компонентную структуру. Вдохновленный библиотеками 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 :
Компоненты/Button/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 >
) ; Объект конфигурации вариантов - это простой объект, который позволяет вам определять варианты, которые поддерживает ваш компонент. Каждый вариант является ключом в объекте, а значение - это объект, который определяет возможные значения (классы 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 опору, стиль должен распространять.
Пример расширяет стандартный компонент Link next.js:
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, которые подтверждают конкретное соглашение о именовании. Это очень экспериментально и может быть изменено.
Рассмотрим этот файл 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 ,
} ,
} ,
} ) ;a.link позволяет вам определить базовый стиль для компонента. Это означает, что это будет якорь -тег со link класс CSS.a.link_big_true позволяет вам установить стиль для варианта, называемого big с значением true .a.link_theme_light_default так же, как указано выше, но также устанавливает вариант в качестве значения по умолчанию.a.link_big_true_theme_light дает вам возможность определять стили составных вариантов.--css Путь к файлу CSS или SCSS, из которого вы хотите сгенерировать компонент. Это также может быть рекурсивным шаблоном глобуса, позволяющий вам сканировать весь каталог компонентов.--output имя файла для выходного файла. По умолчанию styles.ts , которые будут сохранены в том же каталоге, что и файл CSS.--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
