3.0 composing

3.0 Composing components

<sketch> ... </sketch> is a special tag to create components in isolation, and keep a base template for smoother workflows.
It will be discussed later with other Custom tags.

Symbolic Class Syntax

A symbolic class (symlink) is structured as:

{group}{scope-op}{identifier}

group: A collection or group of classes. Use characters A-Z, a-z, 0-9, and -.

• Use - or _ only to delegate to an open group at declaration; it will be hidden elsewhere.
• scope-op: Defines the access scope of the styles.
  • $ for Local scope: styles are available only within the declared file.
  • $$ for Global scope: styles are available across all valid files in target folders.
• identifier: Specific name within the group, consisting of A-Z, a-z, 0-9, and -.

External Grouping for Compositions

When composing styles, you can wrap groups externally using any of these delimiters to avoid conflicts:

• Backticks: ` ... `
• Square brackets: [ ... ]
• Curly braces: { ... }
• Parentheses: ( ... )
• Single quotes: ' ... '
• Double quotes: " ... "

Note: Avoid using the same type of quotes internally and externally to prevent parsing issues.

Composing a Symlink

Compose Operators

Alchira provides two compose operators as replacements for traditional CSS composition directives:

• + (equivalent to @--apply): Merges and flattens the provided symlinks.
• ~ (equivalent to @--attach): Creates a dependency node to the referenced symlinks.

Both produce the same final CSS output. They coexist for developer convenience and clarity.

Example Usage

<!-- 
    group    = "demo"
    scope      = "global"
    identifier = "button"
-->
<sketch 
demo$$button="
	+ tx$weight-600 border-none cursor-pointer px-0 py-0;
	--button_radius: 0.75em;
	--button_color: #e8e8e8;
	--button_outline_color: #000000;
	font-size: 17px;
	border-radius: var(--button_radius);
	background: var(--button_outline_color);
	& > span {
		+ tfx$duration-100 d-flex px-6 py-4 mod$-translate-y-6;
		box-sizing: border-box;
		border: 2px solid var(--button_outline_color);
		border-radius: var(--button_radius);
		background: var(--button_color);
		color: var(--button_outline_color);
	}
	&:hover > span {
		+ mod$-translate-y-8;
	}
	&:active > span {
		+ mod$translate-y-0;
	}
"
> <!-- Template follows -->
    <span> Click Me </span>
</sketch>

• This defines a symlink demo$$button with global scope.
• Combines animations, typography, utility classes with custom properties and pseudo-class styles.

Tip: If the class name is demo$button, you can declare it once per file. However, if you use demo$$button, it becomes globally scoped and must appear only once across all files—otherwise, it will trigger an error.