Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/master-co/styled

Create reusable and extensible styled elements in one line
https://github.com/master-co/styled

component css element react styled

Last synced: 3 months ago
JSON representation

Create reusable and extensible styled elements in one line

Host: GitHub
URL: https://github.com/master-co/styled
Owner: master-co
License: mit
Created: 2022-07-12T14:58:14.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2024-05-06T06:46:01.000Z (9 months ago)
Last Synced: 2024-06-24T04:55:38.464Z (7 months ago)
Topics: component, css, element, react, styled
Language: TypeScript
Homepage:
Size: 1.68 MB
Stars: 36
Watchers: 3
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        






    

        

        

        

    



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 (

        

            {props.children}

        

    )

}

```

🥳 **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 (

        submit

    )

}

```

It will be rendered as:

```html

submit

```

## 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

```

### Vue

```bash

npm install @master/styled.vue

```

```js

import styled from '@master/styled.vue'

const Button = styled.button(...params)

const Button = styled.button`...` // or

```

## Basic usage

### Create a styled element

Declared in two ways: function or template literal, and parameters inherit all features of [`clsx`](https://github.com/lukeed/clsx).

```tsx

const Element = styled.div`flex text:center`

const Element = styled.div('flex text:center') // or

return (

    Hello World

)

```

```html

Hello World

```

### Apply based on predefined variants

Predefine the class variant corresponding to the property.

```tsx

const Button = styled.button('flex', {

    $size: {

        sm: 'font:12 size:8x',

        md: 'font:14 size:12x'

    },

    disabled: 'opacity:.5',

    ...

})

return (

    

)

```

```html

```

> ⚠️ 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.defaultProps = {

    $size: 'md'

}

return (

    

)

```

```html

```

### 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 (

    Not matched

    Not matched

    Matched

)

```

```html

Not matched

Not matched

Matched

```

## 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

A

B

```

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 (

    Submit

)

```

> ⚠️ 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 `` to ``. Left empty '' even if there are no additional classes.

```tsx

const Button = styled.button('inline-flex')

const Link = styled.a(Button)``


return (

    button

    link

)

```

```html

button

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

A

B

C

D

```

## 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/).