DEV Community: Aron

Create reusable and extensible styled elements in one line

Aron — Fri, 01 Mar 2024 05:01:44 +0000

Features

Vanilla.js, React, Vue.js, Tailwind CSS, and Master CSS are available:

⚡️ Ultra-lightweight ~1.5KB, powered by 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 handling

Why?

😰 Traditionally, creating a simple styled element using a FunctionalComponent is unpleasant.

function Button(props) {
    return (
        <button {...props} className={"inline-flex font:14" + (props.className ? ' ' + props.className : '')}>
            {props.children}
        </button>
    )
}

🥳 Now it's in one line and ~80% code less.

import styled from '@master/styled.react' // or .vue

const Button = styled.button`inline-flex font:14`

Then apply it as usual:

export default function App() {
    return (
        <Button className="uppercase">submit</Button>
    )
}

It will be rendered as:

<button class="inline-flex font:14 uppercase">submit</button>

Getting Started

Install the package npm i class-variant, npm i @master/styled.react, or npm i @master/styled.vue depending on your framework:

Vanilla JS

import cv from 'class-variant'

const btn = cv(...params)
const btn = cv`...` // or

btn(props) // -> string

React, Vue

import styled from '@master/styled.react'
import styled from '@master/styled.vue' // or

const Button = styled.button(...params)
const Button = styled.button`...` // or

<Button {...props}>

Basic usage

Create a styled element

Declared in two ways: function or template literal, and parameters inherit all features of clsx.

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

return (
    <Element className="uppercase">Hello World</Element>
)

<div class="flex text:center uppercase">Hello World</div>

Apply based on predefined variants

Predefine the class variant corresponding to the property.

const Button = styled.button('flex', {
    $size: {
        sm: 'font:12 size:8x',
        md: 'font:14 size:12x'
    },
    disabled: 'opacity:.5',
    ...
})

return (
    <Button $size="sm" disabled />
)

<button class="flex font:12 size:8x opacity:.5" disabled></button>

⚠️ 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.

Button.defaultProps = {
    $size: 'md'
}

return (
    <Button />
)

<button class="font:14 size:12x"></button>

Apply based on function properties

Dynamically apply class names based on function properties.

const Element = styled.div('fg:white',
    ({ $color }) => $color && `bg:${$color}`
)

return (
    <Element $color="blue" />
)

<div class="inline-flex text:center fg:white bg:blue"></div>

Apply based on matching properties

Applies the target class name matching all specified property keys and their values.

const Button = styled.button('inline-flex',
    ['uppercase', { $intent: 'primary', $size: 'md' }]
)

return (
    <Button $intent="primary">Not matched</button>
    <Button $size="md">Not matched</button>
    <Button $intent="primary" $size="md">Matched</button>
)

<button class="inline-flex">Not matched</button>
<button class="inline-flex">Not matched</button>
<button class="inline-flex uppercase">Matched</button>

Extended

Extend a styled element

Extend an existing styled element and add additional classes or conditions.

const A = styled.p('a')
const B = styled.p(A)`b`

return (
    <A>A</A>
    <B>B</B>
)

<p class="a">A</p>
<p class="a b">B</p>

Change an element's tag name

Changing the original tag name of an element, such as <button> to <a>. Left empty "" even if there are no additional classes.

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

return (
    <Button>button</Button>
    <Link href="#example">link</Link>
)

<button class="inline-flex">button</button>
<a class="inline-flex" href="#example">link</a>

Extend multiple styled elements

Extend multiple style elements at once.

const A = styled.p`a`
const B = styled.p`b`
const C = styled.p`c`
const D = styled(A)(B)(C)`d`

return (
    <A>A</A>
    <B>B</B>
    <C>C</C>
    <D>D</D>
)

<p class="a">A</p>
<p class="b">B</p>
<p class="c">C</p>
<p class="a b c d">D</p>

Typings

declare type Props = {
    $size: 'sm' | 'md'
}

const Button = styled.button<Props>('flex', {
    $size: {
        sm: 'font:12 size:8x',
        md: 'font:14 size:12x'
    },
    disabled: 'opacity:.5'
})

Overview `class-variant` APIs

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 - Ask questions, voice ideas, and do any other discussion
Join our Discord Server - Casually chat with other people using the language ^{✓ 中文}

Our 《 Code of Conduct 》 applies to all Master community channels.

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.

Getting started with a whole new CSS language —— Master CSS

Aron — Thu, 18 Aug 2022 09:29:00 +0000

A Virtual CSS language with enhanced syntax. ~13KB

Visit css.master.co for full documentation.
Browse our discussion community.
Join our discord channel.
Follow our twitter.

Features

Let's have a quick overview of the groundbreaking features of Master CSS:

🔥 A whole new CSS language instead of utilities/libraries.
🔓 Write CSS properties, functions, selectors and even media queries directly in class="...".
🧠 Automatically generate corresponding CSS rules based on class names.
💖 With enhanced CSS syntax, you can build UIs with less code.
⚡️ Directly use performant JIT in production. ~13KB
🧬 An enhanced and structured CSS syntax for class names.
🌈 A forerunner to syntax highlighting for class names.
✨ Hybrid Rendering that allows you to pre-generate CSS from HTML on the server side, and then continue to use JIT on the client side.
✨ Group Styles that allows you to extract the same selectors and media query styles and make it short.
✨ Reactive Styles that allows you to style an element based on parent/sibling state.

To learn more, check out the documentation.

Why Master CSS

A brief introduction starts by giving you an understanding of markup-driven CSS.

😐 Traditional

<style>
    .home-section {
        background-color: blue;
        padding: 2rem;
        text-align: center;
    }

    .home-section:hover {
        background-color: red;
    }

    @media (min-width: 1024px) {
        .home-section {
            padding: 3rem;
        }
    }
</style>

<section class="home-section">...</section>

🤩 Now, refactor it with a whole new CSS language to make it easier. ↓ 86% code

<section class="bg:blue bg:red:hover p:32 p:48@md text:center">...</section>

To learn more, check out the Why Master CSS documentation.

Quick Start

This is a quick start guide, check out the full setup guide to integrate with your build tools and frameworks.

npm install @master/css

import '@master/css';

or use a CDN

<script src="https://cdn.master.co/css"></script>

Now, start styling HTML with Master CSS. 🎉

<h1 class="font:40 font:heavy italic m:50 text:center">Hello World</h1>

To learn more, check out the Syntax tutorial documentation.

Developer Tools

Master CSS Language Service - A Visual Studio Code extension for Master CSS. Provides code-completion and syntax highlighting.

Inspiration

Some of our core concepts and designs are inspired by these giants.

Language - Master is a language, but it was originally inspired by ACSS's concept of atomic classes.
Virtual CSS - Difference algorithms, virtual models, etc. are inspired by Virtual DOM.

@master/normal.css - Normalize browser's styles. ~1KB
@master/keyframes.css - Simple and useful CSS keyframes. ~0.4KB
@master/style-element.react - Quickly create styled React elements with conditional class names. ~800B

Press ⭐️ star on GitHub! If you like it.

DEV Community: Aron

Create reusable and extensible styled elements in one line

Features

Why?

Getting Started

Vanilla JS

React, Vue

Basic usage

Create a styled element

Apply based on predefined variants

Apply based on function properties

Apply based on matching properties

Extended

Extend a styled element

Change an element's tag name

Extend multiple styled elements

Typings

Overview `class-variant` APIs

Community

Inspiration

Getting started with a whole new CSS language —— Master CSS

On this page

Features

Why Master CSS

Quick Start

Developer Tools

Inspiration

Related

DEV Community: Aron

Create reusable and extensible styled elements in one line

Features

Why?

Getting Started

Vanilla JS

React, Vue

Basic usage

Create a styled element

Apply based on predefined variants

Apply based on function properties

Apply based on matching properties

Extended

Extend a styled element

Change an element's tag name

Extend multiple styled elements

Typings

Overview class-variant APIs

Community

Inspiration

Getting started with a whole new CSS language —— Master CSS

On this page

Features

Why Master CSS

Quick Start

Developer Tools

Inspiration

Related

Overview `class-variant` APIs