CSS Validator

A lightweight, interactive CSS validator built with Svelte 5 runes.
It provides a live editor, preview, and built-in CSS validation with syntax highlighting — perfect for experimenting with styles safely.

✨ Features

• Svelte 5 runes: $state, $derived, $effect, $props
• Interactive Editor: live CSS editing with auto-resizing textarea
• Preview Panel: renders selected UI component with applied styles
• CSS Validation: checks property names and values with warnings and errors
• CodeView Component: syntax highlighting for CSS/HTML with copy-to-clipboard
• Multilingual: English and Russian translations
• Theme toggle: built-in light/dark mode
• Zero CSS files: styles are inline or generated by the css() helper

🚀 Quick Start

# clone
git clone https://github.com/MaestroFusion360/css-validator.git
cd css-Validator

# install
npm install

# dev / build / preview
npm run dev
npm run build
npm run preview

📁 Project Structure

src/
├── App.svelte          # Main validator UI (editor + preview + output)
├── CssValidator.svelte # CSS property/value validation logic
└── CodeView.svelte     # Syntax highlighter + copy button

🧩 Components

App.svelte

• Main container for the validator
• Handles language switching (EN/RU)
• Provides editor, preview, and output sections
• Uses compileStyles() to validate and inject CSS dynamically

CssValidator.svelte

• Module-only utility
• Validates CSS properties and values
• Returns errors and warnings for invalid or suspicious rules
• Validator recognizes modern CSS functions inside values (calc(), var(), min(), max(), clamp())

CodeView.svelte

• Syntax highlighting for CSS and HTML
• Line numbers, editable textarea (for editor mode)
• Copy-to-clipboard button with feedback
• Lightweight, no external dependency

🎨 Example

Type CSS into the editor:

color: white;
background-color: blue;
padding: 8px 16px;
border-radius: 4px;

See the result instantly in the preview panel, with validated CSS output shown in the result pane.

♿ Accessibility

• Semantic HTML (button/input/select/textarea/table/etc.)
• High-contrast color schemes
• Keyboard friendly

🗺️ Roadmap

• Add more UI components to preview (tabs, modals, etc.)
• Export/import playground state as JSON
• Web version deployment (GitHub Pages / Vercel)

📄 License

MIT License — See LICENSE for details.