Technical Specification: CSS to CSS-in-JS Converter

Overview

This utility is a high-performance, client-side developer tool designed to bridge the gap between standard CSS and modern CSS-in-JS libraries like Emotion and Styled Components. It provides a clean, side-by-side interface for immediate code transformation.

Core Features

• Real-time Conversion: As the user types or pastes CSS into the input pane, the output updates instantly.
• Dual Output Modes: Users can toggle between Styled Components (Template Literals) and Emotion (Object Styles or Template Literals).
• One-Click Copy: A prominent action button to copy the transformed code directly to the clipboard.
• Formatting Intelligence: Auto-formats generated JS code (e.g., camelCasing CSS properties like background-color to backgroundColor).
• Zero-Latency/Offline First: Fully functional without server requests.

UI/UX Layout

• Header: Simple, clear title and a brief instructional subtitle.
• Main Tool Area: A responsive grid layout (side-by-side on desktop, stacked on mobile).
  • Left Pane: A code input area for raw CSS.
  • Right Pane: A read-only code display area for the resulting JS.
• Controls: A toggle switch to select the library (Styled Components vs. Emotion) and a secondary toggle for output style (Object vs. Template Literal).
• Aesthetic:
  • Palette: White (#FFFFFF) background, soft light gray (#F8F9FA) panels, subtle indigo borders (#E0E7FF), and dark slate text (#1E293B).
  • Typography: Inter or system sans-serif fonts.
  • Shadows: Soft, diffused shadows to create depth for the input/output containers.

Technical Directives (Mandatory)

• Architecture: Single HTML file. CSS must be embedded in <style> tags or via Tailwind CDN. JS logic must be within a single <script> block.
• Sandboxing Compliance:
  • NO LocalStorage/SessionStorage: State must be managed strictly via volatile JS variables.
  • NO External Dependencies: Use CDN links for frameworks if absolutely necessary (e.g., Tailwind CSS, PrismJS for highlighting).
  • Security: Ensure all inputs are sanitized. Do not use eval() or new Function() on user input.
• Responsiveness: Use Flexbox/Grid to collapse panels when the viewport width is below 768px.
• Performance: Use requestAnimationFrame for UI updates to ensure the interface remains snappy during rapid text input.

Interaction Design

• Transitions: All UI changes (such as toggle switches) must use 200ms cubic-bezier ease-in-out transitions.
• Micro-interactions: A visual "Copied!" indicator (fade in/out) upon successful clipboard copy.
• Focus States: High-visibility ring/border focus states for the text area to ensure accessibility.