css2xr 0.1.0

A lightweight, pure Rust HTML/CSS layout engine for WebXR (Flexbox, Grid, Animation).
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

# css2xr 🎨🕶️

[![Crates.io](https://img.shields.io/crates/v/css2xr.svg)](https://crates.io/crates/css2xr)
[![License: MPL 2.0](https://img.shields.io/badge/License-MPL_2.0-brightgreen.svg)](https://opensource.org/licenses/MPL-2.0)
[![Wasm](https://img.shields.io/badge/target-wasm32-purple.svg)](https://rustwasm.github.io/wasm-pack/)

**css2xr** is a lightweight, pure Rust HTML/CSS layout engine designed for **WebXR**.
It parses HTML/CSS strings and calculates layout (Flexbox, Grid), styles, and animations, outputting a JSON structure ready to be rendered in 3D space (e.g., via Three.js or A-Frame).

## ✨ Features

- **Layout Engine**:
  - **Flexbox**: `row`, `column`, `justify-content`, `align-items`, `flex-grow`, `gap`
  - **CSS Grid**: `grid-template-columns/rows` (fr, px), `grid-column/row`, `gap`
  - **Box Model**: `margin`, `padding`, `width`, `height`, `position` (absolute/relative)
- **Styling**:
  - Colors (hex, rgba, names), `opacity`, `border-radius`
  - **3D Transforms**: `translate3d`, `rotate3d`, `scale3d`
- **Animation**:
  - Full `@keyframes` support
  - Properties: `opacity`, `transform`, `background-color`
- **Interaction**:
  - Event binding (`onclick`, `onmouseenter`, etc.)
  - Cursor states
- **Portable**:
  - Compiles to **WebAssembly (WASM)**
  - No DOM dependency (Runs in Web Worker)

## 🚀 Usage

### 1. Build WASM

```bash
wasm-pack build --target web
```

### 2. JavaScript Integration

```javascript
import init, { process_to_json } from './pkg/css2xr.js';

async function run() {
    await init();

    const html = `<div class="container"><div class="box">Hello XR</div></div>`;
    const css = `
        .container { display: flex; justify-content: center; width: 500px; height: 300px; background: #333; }
        .box { width: 100px; height: 100px; background: red; animation: spin 3s infinite; }
        @keyframes spin { 100% { transform: rotateY(360deg); } }
    `;

    // Calculate layout for a virtual viewport of 1024x1024
    const jsonStr = process_to_json(html, css, 1024.0, 1024.0);
    const elements = JSON.parse(jsonStr);

    // Render 'elements' in your WebXR scene (Three.js, etc.)
    renderToScene(elements);
}
```

### 3. Output Format (JSON)

The engine outputs a flat array of elements with calculated geometry:

```json
[
  {
    "id": 1,
    "x": 200.0, "y": 100.0, "w": 100.0, "h": 100.0,
    "bg": [1.0, 0.0, 0.0, 1.0],
    "transform": { ... },
    "animation": {
      "name": "spin",
      "keyframes": [ ... ]
    },
    "text": "Hello XR"
  }
]
```

## 📄 License

This project is licensed under the **Mozilla Public License 2.0 (MPL-2.0)**.
See the [LICENSE](LICENSE) file for details.