Master

Create reusable and extensible styled elements in one line

## Features Vanilla, Next, React, Vue, Tailwind CSS, and [Master CSS](https://rc.css.master.co/docs/installation) are available: * ⚡️ Ultra-lightweight **~1.5KB**, powered by [`Proxy`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy) * 🛡️ Type safety * 🌈 Dynamically change styles based on properties * 💫 Re-expand existing elements, like `NextLink` * 🧩 Compatible with server and client components * 🪄 Built-in first-class [`clsx`](https://github.com/lukeed/clsx) handling ## Why? 😰 **Before**: Creating a simple styled element using a FunctionalComponent is unpleasant. ```tsx function Button(props) { return ( ) } ``` 🥳 **After**: It's in one line and ~80% code less. ```tsx import styled from '@master/styled.react' // or .vue const Button = styled.button`inline-flex font:14` ``` Apply it as usual: ```tsx export default function App() { return ( ) } ``` It will be rendered as: ```html ``` ## Getting Started Install the package depending on your framework: ### Vanilla ```bash npm install class-variant ``` ```js import cv from 'class-variant' const btn = cv(...params) const btn = cv`...` // or btn(props) // -> string ``` ### React ```bash npm install @master/styled.react ``` ```js import styled from '@master/styled.react' const Button = styled.button(...params) const Button = styled.button`...` // or ``` > ⚠️ Custom properties that are not element-owned properties must be prefixed with `$prop`, otherwise they will be reflected on the final element and an error may be thrown. You can set default properties for elements. ```tsx Button.default = { $size: 'md' } return ( ``` ### Apply based on function properties Dynamically apply class names based on function properties. ```tsx const Element = styled.div('fg:white', ({ $color }) => $color && `bg:${$color}` ) return ( ) ``` ```html

``` ### Apply based on matching properties Applies the target class name matching all specified property keys and their values. ```tsx const Button = styled.button('inline-flex', ['uppercase', { $intent: 'primary', $size: 'md' }] ) return ( ) ``` ```html ``` ## Extended ### Extend a styled element Extend an existing styled element and add additional classes or conditions. ```tsx const A = styled.p('a') const B = styled.p(A)`b` return ( A B ) ``` ```html

``` It also supports client components, taking Next.js’s `Link` as an example: ```tsx 'use client' import styled from '@master/styled.react'; import Link from 'next/link'; const Button = styled(Link)`inline-flex text:center` return ( ) ``` > ⚠️ If the extended target contains client components, the `'use client'` directive is required. ### Change an element's tag name Changing the original tag name of an element, such as ` link ) ``` ```html link ``` ### Extend multiple styled elements Extend multiple style elements at once. ```tsx const A = styled.p`a` const B = styled.p`b` const C = styled.p`c` const D = styled(A)(B)(C)`d` return ( A B C D ) ``` ```html

``` ## Typings ```ts declare type Props = { $size: 'sm' | 'md' } const Button = styled.button('flex', { $size: { sm: 'font:12 size:8x', md: 'font:14 size:12x' }, disabled: 'opacity:.5' }) ``` ## Overview `class-variant` APIs ```ts import cv from 'class-variant' const btn = cv( 'inline-flex rounded', { intent: { primary: 'bg:blue fg:white bg:blue-60:hover', secondary: 'bg:white fg:slate-30 bg:slate-90:hover', }, size: { sm: 'text:14 p:5|15', md: 'text:16 p:10|25' } }, ['uppercase', { intent: 'primary', size: 'md' }], ({ indent, size }) => indent && size && 'font:semibold' ) btn.default = { intent: 'primary', size: 'sm' } btn() // inline-flex rounded bg:blue fg:white bg:blue-55:hover text:14 p:5|8 font:semibold btn({ indent: 'secondary', size: 'sm' }) // inline-flex rounded bg:white fg:slate-30 bg:slate-90:hover text:14 p:5|8 font:semibold btn({ indent: 'primary', size: 'md' }) // inline-flex rounded bg:blue fg:white bg:blue-55:hover text:16 p:10|25 uppercase font:semibold ``` ## Community The Master community can be found here: - [Discuss on GitHub](https://github.com/master-co/styled/discussions) - Ask questions, voice ideas, and do any other discussion - [Join our Discord Server](https://discord.com/invite/sZNKpAAAw6) - Casually chat with other people using the language ^{_{✓ 中文}} _{Our [《 Code of Conduct 》](https://github.com/master-co/styled/blob/main/.github/CODE_OF_CONDUCT.md) applies to all Master community channels.} ## Contributing Please see our [CONTRIBUTING](https://github.com/master-co/styled/blob/main/.github/CONTRIBUTING.md) for workflow. ## Inspiration Some of our core concepts and designs are inspired by these giants. - **Template Literal** - The use of template literals as syntactic sugar for reusing components is inspired by [Styled Components](https://styled-components.com/).