doc.md

Quick Usage

Component

button.module.scss

@include "@wolfulus/component" as *;
@include "@wolfulus/props" as props;

@include component(Button) {
  @include stylesheet {
    @apply px-4 py-2 rounded bg-slate-400;
    &:hover {
      @apply bg-slate-200;
    }
  }
}

TSX

some_page.tsx

// Import the component module
import { Button } from "./components/button.module.scss";

export function Page() {
  return <Button />
}

Components

Description

You can define components by including the component mixin. If no element is defined for the component, div is used.

Definition

@include component(MyButton) {
	//
}

Usage

<MyButton>
	Hello
</MyButton>

Output

<div>
	Hello
</div>

---

Default Element

Description

You can specify which element the component will instantiate when rendering the component. This is useful when you want to specify a default element to be used with the component.

Note that you can override the element upon usage, thus it's not recommended to create selectors using element names to select custom components.

Definition

@include component(MyButton) {
	@include element(button);
}

Usage

<MyButton>
	Hello
</MyButton>
<MyButton component={"a"} href="#" role="button">
	Hello
</MyButton>

Output

<button>
	Hello
</button>
<a href="#" role="button">
	Hello
</a>

Default Element Attributes

Description

You can specify default attribute values of the component element. You can still override those attributes if needed.

Definition

@include component(MyButton) {
	@include element(button);
	@include attribute(type, "button");
}

or

@include component(MyButton) {
	@include element(button, (
		type: "button",
	));
}

Usage

<MyButton>
	Hello
</MyButton>
<MyButton type="submit">
	Hello
</MyButton>

Output

<button type="button">Hello</button>
<button type="submit">Hello</button>

Styles

Description

Components can be stylized using a stylesheet mixing block inside the component definition.

The contents of the mixin block will be nested within a simple class selector (e.g. .component) that is always added as the first class in component's className root element. This means that anything that written stylesheet is effectively nested within the root element. block will be nested within this class and & targets the root element class .RootElement.

The stylesheet block generates a class that is applied to the component's root element. Anything inside the stylesheet block is is nested within the component's root class.

Definition

@include component(MyButton) {
	@include element(button);
	@include attribute(type, "button");
	@include stylesheet {
	  @apply mx-4 my-2 bg-green-400 text-white;
	}
}

Usage

<MyButton>
	Hello
</MyButton>
<MyButton type="submit">
	Hello
</MyButton>

Output

<button type="button">Hello</button>
<button type="submit">Hello</button>

@include component(Button) {
	@include stylesheet {
		@apply mx-4 my-2; 
	}
}

styles

@include component(Button) {
	@include stylesheet {
		@apply mx-4 my-2; 
	}
}