@yuuble/rcr

Rule-Compiled Responsiveness (RCR) — A lightweight, type-safe compiler that generates strict responsive CSS from JSON rules.

Built by Yuuble.

Why RCR?

Writing manual media queries is error-prone and hard to automate. RCR treats responsive design as data, not just code.

• Single Source of Truth: Define layout logic in one JSON structure.
• Automation Ready: Perfect for website builders, CMS tools, and AI-generated UIs.
• Zero Dependencies: Fast, lightweight, and pure logic.
• Type-Safe: Written in TypeScript with full type support.

Installation

npm install @yuuble/rcr

Usage

1. Basic Example

RCR takes a JSON object (the "Document") and compiles it into a CSS string.

import { compileRcr } from '@yuuble/rcr';

const layoutConfig = {
  targets: [
    {
      selector: ".hero-card",
      // Base styles (applied globally)
      base: {
        width: "100%",
        padding: "20px",
        display: "block",
      },
      // Responsive overrides
      rules: [
        {
          when: { min: 1024, max: 1920 },
          set: {
            width: "50%",
            padding: "40px",
          },
        },
      ],
    },
  ],
};

const result = compileRcr(layoutConfig);

console.log(result.css);

2. Output CSS

The compiler generates standard CSS media queries based on your rules.

.hero-card {
  width: 100%;
  padding: 20px;
  display: block;
}

@media (min-width: 1024px) and (max-width: 1920px) {
  .hero-card {
    width: 50% !important;
    padding: 40px !important;
  }
}

The JSON Schema

The RCR structure is simple and strictly typed.

{
  "targets": [
    {
      "selector": "string (e.g. #id, .class)",
      "base": {
        "property": "value"
      },
      "rules": [
        {
          "when": {
            "min": "number",
            "max": "number"
          },
          "set": {
            "property": "value"
          }
        }
      ]
    }
  ]
}

Notes

• CamelCase Support: You can write properties like marginTop or backgroundColor. RCR automatically converts them to kebab-case (margin-top) for CSS.
• !important: RCR rules are prioritized to ensure layout stability across viewports.

AI & Automation

RCR was designed to simplify programmatic UI generation.

• For AI Agents: It is much safer for an LLM to generate structured JSON rules than to hallucinate complex CSS media queries.
• For Builders: Store your user's layout preferences as JSON and compile them on the fly.

License

MIT © Yuuble