@master/style-element.react NPM

Styled elements driven by class names.
Quickly create reusable styled elements.
Create styled elements with less code.
Extend existing styled elements.
Conditionally construct class names and strings with template literals.

Concepts

🔴 Traditionally, you would extract a reusable element into a functional component.

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

🟢 Now, implement the same in one line with ~80% code less

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

then apply it as usual:

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

rendered as:

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

Feature Overview

const Button = style.button(
    'font:semibold rounded',
    {
        intent: {
            // <Button $intent="primary">
            primary: 'bg:blue-50 fg:white bg:blue-60:hover',
            // <Button $intent="secondary">
            secondary: 'bg:white fg:gray-80 b:gray-40 bg:gray-50:hover',
        },
        size: {
            // <Button $size="sm">
            sm: 'font:20 py:1 px:2',
            // <Button $size="md">
            md: 'font:16 py:2 px:4'
        }
    },
    // <Button $intent="primary" $size="md"> -> <button class="uppercase">
    { intent: 'primary', size: 'md', $: 'uppercase' },
    // <Button $color="blue"> -> <button class="bg:blue-40 bg:blue-50:hover">
    ({ $color }) => `bg:${$color}-40 bg:${$color}-50:hover`
)

Installation

npm install @master/style-element.react

import style from '@master/style-element.react';

Getting Started

Make it easier and faster to implement functional components using syntactic sugar.

Create a basic styled element

import React from 'react'
import style from '@master/style-element.react'

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

export default function App() {
    return (
        <Button>...</Button>
        <button class="inline-flex font:14">...</button>
    )
}

Apply additional class names

Add uppercase for the button here.

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

return (
    <Button className="uppercase">...</Button>
    <button class="inline-flex font:14 uppercase">...</button>
)

Apply class names based on properties

If the custom property name isn't the part of the element, you must prefix it with $ to prevent it from being reflected to the element's attribute or getting type errors.

const Button = style.button(
    'inline-flex font:14',
    ({ $color }) => $color && `font:white bg:${$color}`)
)

return (
    <Button $color="blue">...</Button>
    <button class="inline-flex font:14 font:white bg:blue">...</button>

    <Button $color="red">...</Button>
    <button class="inline-flex font:14 font:white bg:red">...</button>

    <Button disabled>...</Button>
    <button class="inline-flex font:14" disabled>...</button>
)

Transform tag names

If you just want to transform a styled element tag name, leave empty.

const Button = style.button`inline-flex font:14` <button>
const Anchor = style.a(Button)`` <button> -> <a>

return (
    <Button>Button</Button>
    <button class="inline-flex font:14">Button</button>

    <Anchor href="https://css.master.co" target="blank">Anchor</Anchor>
    // <a class="inline-flex font:14" href="https://css.master.co" target="blank">Anchor</a>
)

⚠️ Extended sources only accept styled elements.

Extend styled elements

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

 // extend Button with addtional class names
const Button1 = el(Button)`text:center`

// extend Button with addtional class names and transform it into <a>
const Button2 = style.a(Button)`italic`

// extend Button1 and Button2 with addtional class names
const Button3 = el(Button1)(Button2)`font:bold`

return (
    <Button>Button</Button>
    <button class="inline-flex font:14">Button</button>

    <Button1>Button 1</Button1>
    <button class="inline-flex font:14 text:center">Button 1</button>

    <Button2>Button 2</Button2>
    <a class="inline-flex font:14 italic">Button 2</a>

    <Button3>Button 3</Button3>
    <button class="inline-flex font:14 text:center italic font:bold">Button 3</button>
)

⚠️ Extended sources only accept styled elements.

@master/css - A Virtual CSS language with enhanced syntax
@master/literal - Conditionally construct class names and strings with template literals. ~600B