The Deterministic Right-to-Left CSS Compiler

Write CSS directly in markup.
Without limits.

Stop context-switching to configuration files. In-line keyframes, 3D transform chaining with __, true ancestor inversion via &, and programmable custom compilers.

Documentation

InteractiveCard.html

Live Compiled Output

<article
  keyframes-pulse="@[0,100]-[box-shadow-0px-0px-0px-000000/0] @50-[box-shadow-0px-0px-30px-6366f1/0.4]"
  class="
    [p-32px,br-20px,bgc-white/0.05,bf-blur-12px,b-1px-s-white/0.1]--as-glass-card
    glass-card
    tf-rotateX-10deg__rotateY--10deg
    tn-transform-0.2s-ease__box-shadow-0.2s-ease
    --hover-[tf-rotateX-0deg__rotateY-0deg,box-shadow-0px-20px-40px-6366f1/0.2]
    an-pulse adu-3s aici
  ">
  <h3 class="fs-24px fw-700 c-white m-0">Realtime Engine</h3>
  <p class="fs-14px c-gray400 lh-1.5">Chained 3D transforms & in-line motion.</p>
</article>

Live Interactive

Realtime Engine

Hover to see 3D un-tilt & chained transition smoothly execute.

Architectural Superiority

Built for total developer autonomy.

Every limitation found in legacy utility frameworks has been solved with rigorous compiler design.

✦

In-Line Keyframe DSL

Declare full multi-step keyframe timelines directly on the HTML element via keyframes-[name]. Supports grouped percentage timelines (@[0,50,100]-...) with zero external config.

⚡

Chaining Operator (`__`)

Chain multiple 2D/3D transforms (tf-rx-20deg__ry-30deg), multi-property transitions, and complex filters without creating CSS variable soup or utility conflicts.

⚓

Magic & Anchor

Invert context effortlessly. Style elements based on ancestors, parent hover states, or preceding siblings (___input--checked&-c-blue) without custom CSS files or wrapper hacks.

◄

Right-to-Left Grammar

Deterministic evaluation: [Block @-Scope] + [Selector] + [Property-Value]. Every class anchors on a real CSS property, making it 100% predictable for humans and AI agents.

📦

Semantic Export (`--as-`)

End class-string bloat. Bundle atomic utilities and export them into named CSS classes ([...]--as-btn btn) directly from the markup. Supports multi-target exports and specificity bumping.

⚙️

Programmable Design System

Not a closed vocabulary. Extend or replace native property compilers, or create group compilers (type: 'group') that emit entire design-system contracts from a single class.

Design Philosophy

Native CSS, Amplified for Humans & AI

An open compiler built to feel like another way of writing native CSS—interoperable with modern specifications, design systems, and existing workflows.

Zero New Vocabulary to Memorize

Directly mirrors standard CSS property names and values rather than introducing arbitrary terminology.

For Developers

Write native CSS declarations directly as classes without memorizing lookup tables for properties like letter-spacing or line-height.

For AI Assistants

Leverages standard web specifications and MDN naming conventions so models generate accurate classes on the first try without hallucinating custom syntax.

Predictable Structural Grammar

A 1:1 serialization from native CSS declarations directly into inline class tokens.

@md-flex-direction-column

Direct Mapping

Follows an intuitive [property]-[value] format like display-flex, opacity-0.5, and color-red.

Native Functions

Accepts standard CSS functions like calc(), min(), clamp(), and oklch() inline.

Transparent At-Rules

Directly mirrors native @layer, @media, and @container blocks right at the prefix level.

Clear Intent for AI & Automation

Eliminates translation layers between what CSS does and what a framework calls it.

Effortless Prompting

Simple instructions like 'Apply native CSS using AliasCSS tokens' work instantly across any LLM.

Forward Compatibility

Supports new CSS specifications like subgrid, container queries, and relative colors immediately without waiting for framework updates.

Self-Documenting Readability

Code remains clear, human-readable, and auditable across long-term project lifecycles.

letter-spacing-wide line-height-1.5 flex-shrink-0 aspect-ratio-16/9

No Mental Lookup

Classes explain their exact purpose inline without needing a translation guide or external cheat sheet.

Cascade Order

Keeps inline convenience while automatically compiling into deduplicated, organized CSS cascade layers.

Seamless Component-Level Abstraction

Promotes atomic utilities into reusable, semantic patterns without leaving the markup[cite: 1].

[p-16px,br-8px]--as-card card

In-Markup Bundling (--as-)

Bundle multi-rule utility groups into clean semantic classes on the fly directly inside your template[cite: 1].

Scoped Modules

Compile component-specific styles into isolated [file].module.css files with zero side effects.

Frictionless Coexistence

Integrates with native stylesheets, design systems, and external UI libraries by leveraging CSS @layer components.

Feature Matrix

What developers get out of the Box?

Features	AliasCSS	Example
Custom Keyframes	In-line Timelines: keyframes-pop="@0-[...] @100-[...]"	`<div keyframes-spin="@0-transform-rotate-0 @100-transform-rotate-360deg" class="an-spin adu-1s ait-infinite tf-linear display-inline-block" > Spin </div>`
3D Transform Stacking	Native Multi-Chaining: tf-rx-20deg__ry-40deg	`<div class="transform-rotate-45deg__scale-1.2__translateY-30px"> Transformed Card </div>`
Ancestor/Sibling Context	Magic Anchor Selectors: _html[class~=dark]&- , ___input[checked]&-	`<button class="_html[class~=dark]&bgc-black/0.8 --focus&b-2px-solid-blue700/0.4" > Theme Aware Button </button>`
Semantic Class Export	In-Markup Component Aliasing: [p-16px,br-8px]--as-card card	`<button className="@base[all-unset,b-0,px-12px,py-8px,border-radius-4px,font-weight-600,cursor-pointer]--as-btn btn" > Button-Base </button> <button className="btn bgc-primary600 --hover-bgc-primary700"> Primary </button>`
Grammar & Compilers	Programmable Grammar: extend & type: 'group'	`const config = { custom: { colors: { themeTextColor: 'var(--theme-text-color, #c3c3c3)', themeBgcolor: 'var(--theme-bg-color, #0e0e0e)', primary: 'rgba(124, 143, 234, 1)', }, }, }; export default config;`

Ready to build without constraints?

Switch to the CSS compiler built for modern web standards, complete dogfooding, and zero configuration friction.

Read the Documentation →

Write CSS directly in markup. Without limits.