css2xr 🎨🕶️

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

wasm-pack build --target web

2. JavaScript Integration

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:

[
  {
    "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 file for details.