docs: add SCSS, Less and Stylus language pages#999
Conversation
✅ Deploy Preview for livecodes ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (3)
WalkthroughThree CSS preprocessor docs pages are expanded from placeholders into full MDX documentation with live demos and reference sections. The Sass docs page also gains a compiler version note and a formatting cleanup. ChangesCSS Preprocessor Language Documentation
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![pullfrog[bot]](https://avatars.githubusercontent.com/in/1768019?s=60&v=4){kind=small}
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes — 3 new language documentation pages for Less, SCSS, and Stylus, replacing TODO... placeholders with complete content following the existing sass.mdx template.
- New
less.mdxpage — covers Less syntax,@importfor external styles, Less.js compiler, custom settings via thelessconfig property, and Prettier formatting. - New
scss.mdxpage — covers SCSS syntax,@use/@import/meta.load-css()for external styles, Dart Sass compiler, custom settings via thescssconfig property, Prettier formatting, and a cross-link tosass.mdx. - New
stylus.mdxpage — covers Stylus flexible syntax,@importfor external styles, Stylus compiler, notes that Prettier code formatting is not available for Stylus.
DeepSeek Pro (free via Pullfrog for OSS) ｜ 𝕏
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/docs/languages/scss.mdx`:
- Around line 119-120: The meta.load-css() example URL uses an incorrect GitHub
raw content path format with /refs/heads/develop/ which will fail when users
execute the code snippet. Fix the URL by replacing the /refs/heads/develop/
segment with the correct raw content format where develop is the branch name in
the standard raw.githubusercontent.com path structure. The corrected URL should
point directly to the raw file content on the develop branch without the
/refs/heads/ intermediary path.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: ee97d148-facd-436d-821f-c9c193a854ed
📒 Files selected for processing (3)
docs/docs/languages/less.mdxdocs/docs/languages/scss.mdxdocs/docs/languages/stylus.mdx
| 'https://raw.githubusercontent.com/live-codes/livecodes/refs/heads/develop/src/livecodes/styles/app.scss' | ||
| ); |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Fix the meta.load-css() example URL format.
At Line 119, the raw GitHub URL uses /refs/heads/develop/, which is not the direct raw-content path format and will likely fail when users try the snippet.
Proposed fix
`@include` meta.load-css(
- 'https://raw.githubusercontent.com/live-codes/livecodes/refs/heads/develop/src/livecodes/styles/app.scss'
+ 'https://raw.githubusercontent.com/live-codes/livecodes/develop/src/livecodes/styles/app.scss'
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| 'https://raw.githubusercontent.com/live-codes/livecodes/refs/heads/develop/src/livecodes/styles/app.scss' | |
| ); | |
| `@include` meta.load-css( | |
| 'https://raw.githubusercontent.com/live-codes/livecodes/develop/src/livecodes/styles/app.scss' | |
| ); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/docs/languages/scss.mdx` around lines 119 - 120, The meta.load-css()
example URL uses an incorrect GitHub raw content path format with
/refs/heads/develop/ which will fail when users execute the code snippet. Fix
the URL by replacing the /refs/heads/develop/ segment with the correct raw
content format where develop is the branch name in the standard
raw.githubusercontent.com path structure. The corrected URL should point
directly to the raw file content on the develop branch without the /refs/heads/
intermediary path.
|
Thank you @Posterfo I made some minor edits to add compiler versions. Keep up the great contributions ❤️ |
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes — the latest commit adds compiler version sections to the new CSS preprocessor docs and cleans up two formatting notes.
- Added
### Versionsubsections toless.mdx,scss.mdx,stylus.mdx, andsass.mdx, listing the versions shipped by@live-codes/browser-compilers@0.22.10(less4.4.2,sass/Dart Sass 1.93.3,stylus0.54.5). - Cleaned up formatting notes in
sass.mdxandstylus.mdx(removed trailing whitespace and shortened the Stylus formatting sentence).
Kimi K2 (free via Pullfrog for OSS) ｜ 𝕏
|
2 participants
What type of PR is this? (check all applicable)
Description
Related Tickets & Documents
Mobile & Desktop Screenshots/Recordings
Added tests?
Added to documentations?
[optional] Are there any post-deployment tasks we need to perform?
[optional] What gif best describes this PR or how it makes you feel?
Summary by CodeRabbit
@use/@import/dynamic loading guidance, Dart Sass compiler/version details, custom settings examples, formatting guidance, and links.@importguidance, compiler/version details, notes on formatting support, and links.