🎬 Story CSS - Bring Your Styles to Life!

Story CSS is an interactive, educational VS Code extension that translates dry CSS rules into a living, breathing visualization. Designed for both beginner developers learning the ropes and veteran engineers aiming to optimize browser render performance, it visualizes layout rules through animated characters that react dynamically to your code.

Story CSS, kuru CSS kurallarını canlı ve etkileşimli bir simülasyona dönüştüren eğitim odaklı bir VS Code eklentisidir. Web mizanpaj kurallarını sevimli ve akıllı karakterlerle hikayeleştirerek kodun mantığını görsel olarak kavramanıza yardımcı olur.

✨ Features / Özellikler

🎨 Liquid Glass UI (Akıcı Cam Arayüzü)

• Fluid Gradient Background: A 60 FPS hardware-accelerated fluid mesh animation canvas that moves organically.
• Glassmorphism Design: Deep space colors, frosted glass cards (backdrop-filter: blur(25px)), and neon highlights.

🎬 Story Mode (Hikaye Modu)

• Flex & Grid Monsters: Box elements are styled as cute characters with custom facial expressions.
• Dynamic Adaptations:
  • Writing display: flex aligns them in a row.
  • Adding flex-grow: 2 makes the character grow proudly with starry eyes.
  • Decreasing space with justify-content: space-between makes characters look sad and look away.
  • Enabling flex-wrap: wrap causes elements that wrap to sweat and tumble to the next line.
  • position: absolute detaches the character, causing them to float with low-gravity animation.
  • padding and margin generate visual glowing protective shields and overlays.

⚠️ CSS Conflict Radar (Çatışma Radarı)

• Real-time detection of conflicting style combinations:
  • display: flex with vertical-align or float.
  • position: absolute with float.
  • display: inline with block metrics (width, height, vertical padding).
• Instantly triggers a vibrating stress state on characters, turning their faces confused, and displays a glowing warning card explaining why the combination is ineffective and suggesting alternatives.

⚙️ Under the Hood (İşin Mutfağı)

• Analyzes properties to evaluate Reflow (Layout), Repaint (Paint), and GPU Composite impacts.
• Displays where properties trigger calculations along the browser's Critical Rendering Path (JS ➔ Layout ➔ Paint ➔ Composite), helping you write performant 60 FPS CSS.

📋 Cheat-Sheet (Akıllı İpucu)

• Lists browser compatibility score (CanIUse metrics).
• Suggests modern replacements (e.g., using gap instead of margins, or direct translate/rotate properties).

🧬 Sandbox Render & X-Ray (Canlı Tarayıcı Önizlemesi)

• Dual-Layer split view: Seamlessly toggle between Story Mode and the Sandbox Render Mode.
• X-Ray blueprint: Hover over elements in the live preview to display neon overlays mapping out Content (blue), Padding (green), and Margin (orange). Flex and Grid items project laser guide axis lines.
• State Simulators: Inject and trigger pseudoclasses like :hover, :active, and :focus and scrub animation speed with the timeline scrubber.

🛠️ How it Works / Nasıl Çalışır?

1. AST Parser Engine: Story CSS registers a text document listener in the active VS Code editor.
2. Cursor Detection: It finds the CSS rule wrapping your current cursor position (line and selector).
3. Webview Update: The parsed declarations, conflicts, and performance metrics are sent to the sidebar view.
4. Interactive Simulation: The characters and sandbox dynamically update in real time as you type!

🚀 How to Run Locally / Yerel Olarak Çalıştırma

To test the extension locally:

1. Clone or copy this repository to your projects folder.
2. Open the directory in VS Code.
3. Install dependencies:

   npm install
   

4. Compile the source code:

   npm run compile
   

5. Press F5 to launch a new Extension Development Host window.
6. Open any .css, .scss, or .html file in the new window.
7. Click the Story CSS icon in the sidebar Activity Bar to open the panel!

📦 How to Publish / Nasıl Yayınlanır?

1. Pre-requisites (Gereksinimler)

Ensure you have the VS Code Extension CLI (vsce) installed globally:

npm install -g @vscode/vsce

2. Create Azure DevOps Token

To publish, you need a Personal Access Token (PAT) from Azure DevOps:

1. Go to Azure DevOps.
2. Select Personal Access Tokens from the user settings menu.
3. Create a new token with:
   • Organization: All accessible organizations
   • Scopes: Custom Defined ➔ Marketplace (Acquire, Publish, Manage)
4. Copy the generated token string.

3. Login to Publisher

Register or login to your publisher ID using the terminal:

vsce login <publisher-name>
# Paste your Personal Access Token (PAT) when prompted

If you don't have a publisher ID yet, create one at the Visual Studio Marketplace Management Portal.

4. Package and Publish

Compile and bundle your extension file (.vsix package):

# Package extension into .vsix file
vsce package

# Publish directly to the marketplace
vsce publish

📄 License / Lisans

Distributed under the MIT License. See LICENSE for more information.