fix: Use 'class' instead of 'className' in Astro MDX for proper CSS styling#4
Merged
pyros-projects merged 1 commit intomainfrom Nov 24, 2025
Merged
fix: Use 'class' instead of 'className' in Astro MDX for proper CSS styling#4pyros-projects merged 1 commit intomainfrom
pyros-projects merged 1 commit intomainfrom
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🐛 Bug Fix
Fixes CSS styling issues in the Astro documentation site that worked locally but failed in production builds.
🔍 Problem
The documentation homepage () was using JSX/React syntax (
className) instead of standard HTML syntax (class) for CSS class attributes.Symptoms:
npm run dev).hero-grid,.hero-pill,.aha-card, etc.) were ignoredRoot Cause:
Astro's dev server is more permissive with JSX syntax, but production builds require standard HTML attributes. Starlight generates static HTML and expects
class, notclassName.�� Changes
Modified Files
docs-site/src/content/docs/index.mdx- Changed allclassNametoclasspyproject.toml- Bumped version to0.2.2Specific Replacements
className="hero hero-grid"→class="hero hero-grid"className="hero-main"→class="hero-main"className="hero-copy-kicker"→class="hero-copy-kicker"className="hero-title"→class="hero-title"className="hero-code"→class="hero-code"className="hero-code-footer"→class="hero-code-footer"className="hero-subtitle"→class="hero-subtitle"className="hero-pill-row"→class="hero-pill-row"className="hero-pill"→class="hero-pill"className="hero-footnote"→class="hero-footnote"className="aha-grid"→class="aha-grid"className="aha-card"→class="aha-card"✅ Result
Now the documentation site displays correctly in both local development and production with:
theme.css�� Testing
Before: Plain unstyled HTML with default Starlight theme
After: Full custom styling with gradients, cards, and branded colors
🎯 Impact
*Small fix, big visual improvement/home/ai/projects/wishful && git diff main...fix/astro-css --stat 🎉