docs: add CSS language documentation

[MohamedAbdElwahabOka]

What type of PR is this? (check all applicable)

• ✨ Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• ♻️ Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🤖 Build
• 🔁 CI
• 📦 Chore (Release)
• ⏩ Revert
• 🌐 Internationalization / Translation

Description

This PR adds documentation for the CSS language page, which was previously a placeholder (TODO...).

Related Tickets & Documents

Fixes #769

Desktop Recordings

add.css.mp4

Added tests?

• 👍 yes
• 🙅 no, because they aren't needed

Added to documentations?

• 📓 docs (./docs)
• 📕 storybook (./storybook)
• 📜 README.md
• 🙅 no documentation needed

Summary by CodeRabbit

Release Notes

• Documentation
  • Significantly expanded CSS language documentation with practical examples and best practices
  • Added interactive demonstration feature for hands-on CSS code experimentation
  • Introduced new reference sections covering usage, processors, auto-update functionality, style imports, language specifications, compiler configuration, and resource links

[netlify]

✅ Deploy Preview for livecodes ready!

Name	Link
🔨 Latest commit	98abfa3
🔍 Latest deploy log	https://app.netlify.com/projects/livecodes/deploys/6995dda842652800087ae4ae
😎 Deploy Preview	https://deploy-preview-946--livecodes.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

---

Walkthrough

A TODO placeholder in the CSS language documentation was replaced with a complete LiveCodes demo. The change adds a new exported configuration object containing HTML and CSS content samples, includes the LiveCodes component render, and expands the documentation with multiple sections covering CSS features and compiler information.

Changes

Cohort / File(s)	Summary
CSS Language Documentation docs/docs/languages/css.mdx	Replaced placeholder TODO with fully functional CSS demo including LiveCodes component import, new cssConfig export with sample markup and styles, and expanded documentation sections covering Usage, CSS Processors, Auto-update, Style Imports, Language Info, Compiler, and Links.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'docs: add CSS language documentation' directly and clearly describes the main change—adding CSS documentation to the project.
Linked Issues check	✅ Passed	The PR successfully addresses issue #769 by adding CSS language documentation, completing one of the missing language doc checklist items.
Out of Scope Changes check	✅ Passed	All changes are scoped to CSS language documentation; no unrelated modifications are present in the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}