Conversation
WalkthroughMigrates site styling from Sass to native CSS custom properties, replaces many Changes
Sequence Diagram(s)sequenceDiagram
participant Browser
participant App as app.tsx
participant ReactDOM
note right of App `#e0f7fa`: Old flow used createRoot().render()
Browser->>App: Load bundle
App->>ReactDOM: hydrateRoot(container, <App />)
ReactDOM-->>Browser: Hydrated app (SSR -> client)
sequenceDiagram
participant EditorInit
participant CodeMirror as CodeMirror
participant Highlight as `@lezer/highlight`
EditorInit->>CodeMirror: create editor view (extensions...)
EditorInit->>Highlight: define accessibleHighlightStyle
Highlight-->>CodeMirror: syntaxHighlighting(accessibleHighlightStyle)
CodeMirror-->>EditorInit: editor ready with accessible highlighting
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
www/src/styles/_responsive.css (1)
5-5: Consider using a CSS variable for the breakpoint.The breakpoint value
991pxis hardcoded. For better maintainability and consistency, consider defining this as a CSS custom property (e.g.,--breakpoint-tablet: 991px) in your variables file.Example refactor:
In
_variables.css:--breakpoint-tablet: 991px;Then use it here:
-@media (max-width: 991px) { +@media (max-width: var(--breakpoint-tablet)) {Note: CSS custom properties in media queries require careful consideration as they're not universally supported in all contexts. If this is a concern, keeping the hardcoded value is acceptable.
www/src/components/navigation.css (1)
1-1: Consider extracting hardcoded breakpoint to a CSS variable.The breakpoint value
991pxis hardcoded in two locations (line 1 and line 58). Per the AI summary, this was previously a Sass variable. For maintainability and consistency with the CSS variables pattern established elsewhere in this PR, consider defining this as a CSS custom property in_variables.css(if not already present) and referencing it here instead, to avoid duplication and reduce future maintenance burden.If a CSS variable for the breakpoint already exists (e.g.,
--mobile-breakpointmentioned in the AI summary), simply reference it:-@media (max-width: 991px) { +@media (max-width: var(--mobile-breakpoint)) {However, note that CSS does not natively support CSS variables in media query selectors at this time, so hardcoding may be unavoidable. If this is a known limitation, please disregard this suggestion.
Can you confirm whether CSS variables are supported in
@mediaqueries in your target browsers, or if this hardcoding is a necessary workaround?Also applies to: 58-58
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
www/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (32)
www/SSG_README.md(3 hunks)www/index.html(1 hunks)www/package.json(1 hunks)www/src/components/Navigation.tsx(2 hunks)www/src/components/Shared/SidebarNav/SidebarNav.css(1 hunks)www/src/components/Shared/SidebarNav/index.tsx(1 hunks)www/src/components/navigation.css(7 hunks)www/src/layouts/Frame.tsx(2 hunks)www/src/layouts/frame.css(1 hunks)www/src/styles/_normalize.css(1 hunks)www/src/styles/_responsive.css(1 hunks)www/src/styles/_scaffolding.css(1 hunks)www/src/styles/_scaffolding.scss(0 hunks)www/src/styles/_variables.css(1 hunks)www/src/styles/_variables.scss(0 hunks)www/src/styles/_zindex.scss(0 hunks)www/src/styles/app.css(1 hunks)www/src/styles/app.scss(0 hunks)www/src/styles/container.css(1 hunks)www/src/styles/container.scss(0 hunks)www/src/utils/CodeMirrorEditor.css(1 hunks)www/src/utils/CodeMirrorEditor.tsx(2 hunks)www/src/utils/CopyIcon.tsx(1 hunks)www/src/views/APIViewNew.tsx(1 hunks)www/src/views/ExampleView.css(1 hunks)www/src/views/ExamplesIndexView.tsx(1 hunks)www/src/views/ExamplesView.tsx(1 hunks)www/src/views/IndexView/IndexView.css(5 hunks)www/src/views/IndexView/index.tsx(1 hunks)www/src/views/NotFoundView.tsx(1 hunks)www/src/views/Storybook.tsx(1 hunks)www/vite.config.ts(1 hunks)
💤 Files with no reviewable changes (5)
- www/src/styles/_zindex.scss
- www/src/styles/_variables.scss
- www/src/styles/app.scss
- www/src/styles/_scaffolding.scss
- www/src/styles/container.scss
🧰 Additional context used
📓 Path-based instructions (1)
www/**
📄 CodeRabbit inference engine (DEVELOPING.md)
Use the www directory to add and commit examples for the documentation website (recharts.github.io)
Files:
www/index.htmlwww/src/components/Navigation.tsxwww/src/styles/container.csswww/src/styles/_normalize.csswww/src/styles/_responsive.csswww/src/styles/app.csswww/src/styles/_scaffolding.csswww/src/components/navigation.csswww/src/components/Shared/SidebarNav/SidebarNav.csswww/src/utils/CopyIcon.tsxwww/src/utils/CodeMirrorEditor.tsxwww/SSG_README.mdwww/src/views/ExamplesView.tsxwww/src/views/APIViewNew.tsxwww/src/views/ExampleView.csswww/src/views/IndexView/index.tsxwww/package.jsonwww/src/views/IndexView/IndexView.csswww/src/layouts/Frame.tsxwww/src/styles/_variables.csswww/src/layouts/frame.csswww/src/views/ExamplesIndexView.tsxwww/src/views/NotFoundView.tsxwww/src/views/Storybook.tsxwww/src/components/Shared/SidebarNav/index.tsxwww/src/utils/CodeMirrorEditor.csswww/vite.config.ts
🧠 Learnings (4)
📚 Learning: 2025-10-25T07:36:02.229Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-10-25T07:36:02.229Z
Learning: Recharts aims for simple, declarative, and composable charts; prioritize consistency, usability, performance, and accessibility
Applied to files:
www/index.htmlwww/src/components/Navigation.tsxwww/package.json
📚 Learning: 2025-10-25T07:34:46.558Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-10-25T07:34:46.558Z
Learning: Applies to www/** : Use the www directory to add and commit examples for the documentation website (recharts.github.io)
Applied to files:
www/SSG_README.md
📚 Learning: 2025-10-25T07:34:46.558Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-10-25T07:34:46.558Z
Learning: Applies to storybook/** : Use Storybook for high-fidelity examples intended for publication; prefer unit or VR tests for low-fidelity cases due to Chromatic limits
Applied to files:
www/src/views/Storybook.tsx
📚 Learning: 2025-10-25T07:34:46.558Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-10-25T07:34:46.558Z
Learning: Enable ESLint and Prettier configuration in your IDE to support linting and types checks during development
Applied to files:
www/vite.config.ts
🪛 Biome (2.1.2)
www/src/styles/container.css
[error] 19-19: Unexpected shorthand property margin after margin-bottom
(lint/suspicious/noShorthandPropertyOverrides)
www/src/styles/_scaffolding.css
[error] 58-58: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.
outline is already defined here.
Remove or rename the duplicate property to ensure consistent styling.
(lint/suspicious/noDuplicateProperties)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build, Test, Pack
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (30)
www/src/views/NotFoundView.tsx (1)
1-1: LGTM! Clean SCSS to CSS migration.The import change aligns perfectly with the PR's goal to migrate from SCSS to CSS.
www/index.html (1)
7-7: Nice accessibility improvement!Increasing
maximum-scalefrom 2 to 5 allows users with visual impairments to zoom in further on mobile devices, improving the website's accessibility.www/src/views/ExamplesIndexView.tsx (1)
7-7: LGTM! Straightforward migration.The stylesheet import change is consistent with the project-wide SCSS to CSS migration.
www/src/views/APIViewNew.tsx (1)
5-5: LGTM! Clean import update.The migration from SCSS to CSS import aligns with the PR's objectives.
www/src/views/ExampleView.css (1)
16-16: LGTM! Correct CSS custom property usage.The migration from Sass variable to CSS custom property is implemented correctly and aligns with the project's new CSS-based theming system.
www/src/views/Storybook.tsx (1)
1-1: LGTM! Consistent with migration.The stylesheet import change is consistent with the SCSS to CSS migration.
www/src/views/ExamplesView.tsx (1)
4-5: LGTM! Complete migration from SCSS to CSS.Both import updates correctly migrate from SCSS to CSS, including the third-party
simple-line-iconslibrary, which eliminates Sass dependencies.www/src/utils/CodeMirrorEditor.css (1)
26-27: LGTM! Correct CSS custom property usage.The migration from Sass variables to CSS custom properties is correctly implemented for the hover state styling.
www/src/styles/_normalize.css (1)
234-234: LGTM! Clean migration to CSS variable.The replacement of the Sass variable with
var(--font-family-code)is correct and aligns with the CSS variable definition in_variables.css.www/SSG_README.md (1)
26-26: Documentation accurately reflects the styling migration.The update from
.scssto.csscorrectly documents the file extension change.www/package.json (1)
41-41: Dependency addition aligns with CodeMirror syntax highlighting changes.The
@lezer/highlightpackage is correctly added to support the newaccessibleHighlightStyleimplementation inCodeMirrorEditor.tsx.www/src/utils/CodeMirrorEditor.tsx (2)
17-40: Good accessibility improvements with explicit contrast ratios.The custom highlight style with improved color contrast is a solid enhancement. The hardcoded color values are appropriate here since
HighlightStyle.defineexpects string literals rather than CSS variables.
118-118: Correct application of the custom highlight style.The new accessible highlight style is properly integrated into the editor extensions.
www/vite.config.ts (1)
11-11: Clean simplification of Vite config.Removing the Babel plugin configuration is appropriate given the removal of decorator and class-properties plugins from package.json. The default React plugin handles standard JSX/TSX compilation.
www/src/styles/_variables.css (1)
1-37: Well-structured CSS variable foundation.The design system is well-organized with clear semantic naming, proper fallbacks for font families, and a logical z-index hierarchy. This provides a solid foundation for the CSS migration.
www/src/utils/CopyIcon.tsx (1)
9-9: Important fix: corrected invalid CSS variable name.Changed from
var(--var-text-color)tovar(--text-color)- the previous variable name had an erroneous "var" prefix and wouldn't resolve correctly. This fix ensures the stroke color properly references the variable defined in_variables.css.www/src/components/Navigation.tsx (2)
6-6: Import path updated for CSS migration.The styling import correctly reflects the migration from SCSS to CSS.
38-38: Bug fix: corrected CSS variable name for hamburger icon.Changed from
var(--var-brand-info)tovar(--brand-info)- fixes the erroneous "var" prefix in the custom property name to match the variable defined in_variables.css.www/src/components/Shared/SidebarNav/index.tsx (1)
2-2: LGTM!The import change from SCSS to CSS is clean and aligns with the project-wide migration to CSS custom properties.
www/src/layouts/Frame.tsx (2)
5-6: LGTM!The styling imports have been correctly migrated from SCSS to CSS, consistent with the project-wide changes.
30-30: Excellent semantic HTML improvement!Wrapping the children in a
<main>element provides a proper landmark for screen readers and improves document structure.www/src/views/IndexView/index.tsx (1)
4-5: LGTM!The styling imports have been correctly updated to use CSS files, including the appropriate CSS distribution path for simple-line-icons.
www/src/layouts/frame.css (1)
17-23: LGTM!The migration from Sass variables to CSS custom properties is implemented correctly. The use of semantic variable names (
--font-family-code,--font-size-xl,--brand-info) provides clear intent and will facilitate future theming work like dark mode.www/src/views/IndexView/IndexView.css (1)
27-28: LGTM!All Sass variables have been correctly replaced with CSS custom properties. The semantic naming (
--font-family-logo,--brand-info,--subtitle-text-color, etc.) clearly expresses intent and will support future theming enhancements.Also applies to: 34-34, 83-83, 90-90, 107-107, 153-153, 166-166
www/src/styles/app.css (1)
1-9: LGTM!The new CSS structure is clean and well-organized. The imports aggregate styling partials effectively, and the
.no-wraputility class is a useful addition.www/src/styles/container.css (1)
21-21: LGTM!The CSS custom properties (
--title-color,--border-color) are correctly applied and maintain semantic naming consistency.Also applies to: 29-29
www/src/components/Shared/SidebarNav/SidebarNav.css (1)
19-32: CSS variables integration looks good.The migration from SCSS variables to CSS custom properties (--font-size-lg, --brand-primary) is clean and consistent. The styling hierarchy and states (hover, active) are correctly preserved.
www/src/components/navigation.css (1)
23-23: CSS variables usage throughout is consistent and correct.All color, typography, and theme tokens (--brand-info, --brand-primary, --font-size-lg) are properly referenced. The migration from SCSS to CSS variables is well-executed in this file.
Also applies to: 30-30, 76-76, 80-81, 122-122, 125-125, 140-140, 178-178
www/src/styles/_scaffolding.css (2)
11-43: CSS variable integration and resets are well-structured.The box-sizing reset, HTML/body resets, form element inheritance, and link styling all follow best practices. CSS variables are correctly applied for typography and colors (--font-family-base, --font-size-base, --text-color-body, --background-color, --link-color, --link-color-hover).
114-127: Button styling is appropriate for primary action.The
a.buttonselector provides consistent primary action styling with hover state, transitions, and color/border tokens (--brand-primary, --brand-second). The hardcoded hover color (#1078bb) is a minor deviation from pure variable usage but acceptable for interactive state darkenings.
| &:focus { | ||
| outline: thin dotted; | ||
| /* WebKit*/ | ||
| outline: 5px auto -webkit-focus-ring-color; | ||
| outline-offset: -2px; | ||
| } |
There was a problem hiding this comment.
Fix duplicate outline property in focus state.
The second outline declaration on line 58 completely overrides the first on line 56 due to CSS cascade semantics. The attempted browser-specific fallback pattern does not work as written—the "thin dotted" outline is unreachable.
Apply this diff to preserve the intended WebKit behavior while removing the ineffective fallback:
&:focus {
- outline: thin dotted;
- /* WebKit*/
- outline: 5px auto -webkit-focus-ring-color;
+ outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}Alternatively, if Firefox support for "thin dotted" is critical, use @supports to target the WebKit property:
a:focus {
outline: thin dotted;
outline-offset: -2px;
}
@supports (-webkit-appearance: none) {
a:focus {
outline: 5px auto -webkit-focus-ring-color;
}
}Which approach would you prefer?
🧰 Tools
🪛 Biome (2.1.2)
[error] 58-58: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.
outline is already defined here.
Remove or rename the duplicate property to ensure consistent styling.
(lint/suspicious/noDuplicateProperties)
🤖 Prompt for AI Agents
www/src/styles/_scaffolding.css lines 55-60: the focus state contains two
conflicting outline declarations where the second (WebKit) overrides the first,
making "thin dotted" unreachable; replace the duplicate by keeping the generic
outline and outline-offset in the base rule and move the WebKit-specific outline
into an @supports block targeting WebKit (e.g., @supports (-webkit-appearance:
none) { a:focus { outline: 5px auto -webkit-focus-ring-color; } }), or
alternatively remove the WebKit line and keep only the generic outline if
Firefox support is primary—apply the @supports approach unless you want to
prioritize Firefox, in which case keep only the generic outline and remove the
WebKit override.
| h1, | ||
| .page-title { | ||
| padding-top: 30px; | ||
| margin-bottom: 30px; | ||
| margin: 0; | ||
| font-size: 30px; | ||
| color: var(--title-color); | ||
| } |
There was a problem hiding this comment.
Fix the conflicting margin declarations.
Line 19's margin: 0; overrides the margin-bottom: 30px; set on line 18, resulting in no margin at all. This is likely unintentional and will affect the title spacing.
Apply this diff to fix the issue:
h1,
.page-title {
padding-top: 30px;
- margin-bottom: 30px;
- margin: 0;
+ margin: 0 0 30px 0;
font-size: 30px;
color: var(--title-color);
}Alternatively, if no margin was intended:
h1,
.page-title {
padding-top: 30px;
- margin-bottom: 30px;
margin: 0;
font-size: 30px;
color: var(--title-color);
}📝 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.
| h1, | |
| .page-title { | |
| padding-top: 30px; | |
| margin-bottom: 30px; | |
| margin: 0; | |
| font-size: 30px; | |
| color: var(--title-color); | |
| } | |
| h1, | |
| .page-title { | |
| padding-top: 30px; | |
| margin: 0 0 30px 0; | |
| font-size: 30px; | |
| color: var(--title-color); | |
| } |
🧰 Tools
🪛 Biome (2.1.2)
[error] 19-19: Unexpected shorthand property margin after margin-bottom
(lint/suspicious/noShorthandPropertyOverrides)
🤖 Prompt for AI Agents
In www/src/styles/container.css around lines 15 to 22, there are conflicting
margin declarations: line 18 sets margin-bottom: 30px but line 19 immediately
overrides it with margin: 0; remove or modify the offending rule so the bottom
margin is preserved—either delete the margin: 0; line or replace it with
margin-top: 0; margin-right: 0; margin-left: 0; to keep margin-bottom: 30px (or
if no margin at all was intended, remove the margin-bottom: 30px instead).
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #6566 +/- ##
=======================================
Coverage 91.27% 91.27%
=======================================
Files 490 490
Lines 40911 40934 +23
Branches 4581 4581
=======================================
+ Hits 37341 37364 +23
Misses 3554 3554
Partials 16 16 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Bundle ReportBundle size has no change ✅ |
|
Oops conflicts my bad |
- Remove @use 'sass:color' imports - Replace color.adjust() functions with calculated hex values - -dark: #333 (lightness -20%) - -light: #999 (lightness +20%) - -lighter: #ccc (lightness +40%) - -lightest: #ededed (lightness +53.3333%) - : #f4f4f4 (lightness +56%) - Button hover: #1078bb (brand-primary lightness -3%) This is the first step in migrating from SCSS to vanilla CSS.
CSS variables should be defined in :root for: - Higher specificity - Better convention/clarity - Portability across document types
we don't use tables in the API view, no point having styles for them
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
www/src/styles/container.css (1)
15-22: Fix the conflicting margin declarations.Line 19's
margin: 0;overrides themargin-bottom: 30px;set on line 18, resulting in no margin at all. This is likely unintentional and will affect title spacing.Apply this diff to preserve the bottom margin:
h1, .page-title { padding-top: 30px; - margin-bottom: 30px; - margin: 0; + margin: 0 0 30px 0; font-size: 30px; color: var(--title-color); }www/src/styles/_scaffolding.css (1)
55-60: Fix duplicate outline property in focus state.The second
outlinedeclaration on line 58 completely overrides the first on line 56 due to CSS cascade semantics. The attempted browser-specific fallback pattern doesn't work as written—the "thin dotted" outline is unreachable.Apply this diff to preserve the intended WebKit behavior:
&:focus { - outline: thin dotted; - /* WebKit*/ outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }Alternatively, use
@supportsfor proper fallback if Firefox support is critical:a:focus { outline: thin dotted; outline-offset: -2px; } @supports (-webkit-appearance: none) { a:focus { outline: 5px auto -webkit-focus-ring-color; } }
🧹 Nitpick comments (2)
www/src/styles/_responsive.css (1)
5-5: Consider adding a comment linking to the CSS variable.The hardcoded
991pxvalue matches--mobile-breakpointin_variables.css, but CSS custom properties cannot be used in media queries. Consider adding a comment for maintainability.Apply this diff to improve maintainability:
-@media (max-width: 991px) { +/* Uses --mobile-breakpoint value (CSS variables not supported in media queries) */ +@media (max-width: 991px) {www/src/views/IndexView/IndexView.css (1)
6-6: Consider converting hardcoded colors to CSS variables for dark-mode support.The PR objectives mention renaming variables to support future dark-mode work. However, this file still contains hardcoded color values:
- Line 6:
#e6e6e6(border)- Line 149:
#f5f5f5(hover background)- Line 150:
rgba(0, 0, 0, 0.1)(shadow)These should likely be CSS variables (e.g.,
--border-color,--hover-background,--shadow-color) to maintain consistency with the dark-mode theme strategy.Also applies to: 149-150
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
www/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (32)
www/SSG_README.md(3 hunks)www/index.html(1 hunks)www/package.json(1 hunks)www/src/components/Navigation.tsx(2 hunks)www/src/components/Shared/SidebarNav/SidebarNav.css(1 hunks)www/src/components/Shared/SidebarNav/index.tsx(1 hunks)www/src/components/navigation.css(7 hunks)www/src/layouts/Frame.tsx(2 hunks)www/src/layouts/frame.css(1 hunks)www/src/styles/_normalize.css(1 hunks)www/src/styles/_responsive.css(1 hunks)www/src/styles/_scaffolding.css(1 hunks)www/src/styles/_scaffolding.scss(0 hunks)www/src/styles/_variables.css(1 hunks)www/src/styles/_variables.scss(0 hunks)www/src/styles/_zindex.scss(0 hunks)www/src/styles/app.css(1 hunks)www/src/styles/app.scss(0 hunks)www/src/styles/container.css(1 hunks)www/src/styles/container.scss(0 hunks)www/src/utils/CodeMirrorEditor.css(1 hunks)www/src/utils/CodeMirrorEditor.tsx(2 hunks)www/src/utils/CopyIcon.tsx(1 hunks)www/src/views/APIViewNew.tsx(1 hunks)www/src/views/ExampleView.css(1 hunks)www/src/views/ExamplesIndexView.tsx(1 hunks)www/src/views/ExamplesView.tsx(1 hunks)www/src/views/IndexView/IndexView.css(5 hunks)www/src/views/IndexView/index.tsx(1 hunks)www/src/views/NotFoundView.tsx(1 hunks)www/src/views/Storybook.tsx(1 hunks)www/vite.config.ts(1 hunks)
💤 Files with no reviewable changes (5)
- www/src/styles/app.scss
- www/src/styles/_variables.scss
- www/src/styles/_zindex.scss
- www/src/styles/container.scss
- www/src/styles/_scaffolding.scss
✅ Files skipped from review due to trivial changes (1)
- www/index.html
🚧 Files skipped from review as they are similar to previous changes (17)
- www/src/utils/CodeMirrorEditor.tsx
- www/src/views/NotFoundView.tsx
- www/src/components/Shared/SidebarNav/index.tsx
- www/src/views/IndexView/index.tsx
- www/src/layouts/Frame.tsx
- www/src/utils/CodeMirrorEditor.css
- www/src/styles/_normalize.css
- www/src/views/APIViewNew.tsx
- www/package.json
- www/src/components/navigation.css
- www/src/views/ExampleView.css
- www/src/components/Shared/SidebarNav/SidebarNav.css
- www/src/styles/app.css
- www/src/views/ExamplesIndexView.tsx
- www/src/views/Storybook.tsx
- www/src/views/ExamplesView.tsx
- www/SSG_README.md
🧰 Additional context used
📓 Path-based instructions (1)
www/**
📄 CodeRabbit inference engine (DEVELOPING.md)
Use the www directory to add and commit examples for the documentation website (recharts.github.io)
Files:
www/src/utils/CopyIcon.tsxwww/src/styles/_responsive.csswww/src/components/Navigation.tsxwww/vite.config.tswww/src/layouts/frame.csswww/src/views/IndexView/IndexView.csswww/src/styles/_variables.csswww/src/styles/_scaffolding.csswww/src/styles/container.css
🧠 Learnings (2)
📚 Learning: 2025-10-25T07:36:02.229Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-10-25T07:36:02.229Z
Learning: Recharts aims for simple, declarative, and composable charts; prioritize consistency, usability, performance, and accessibility
Applied to files:
www/src/components/Navigation.tsx
📚 Learning: 2025-10-25T07:34:46.558Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-10-25T07:34:46.558Z
Learning: Enable ESLint and Prettier configuration in your IDE to support linting and types checks during development
Applied to files:
www/vite.config.ts
🪛 Biome (2.1.2)
www/src/styles/_scaffolding.css
[error] 58-58: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.
outline is already defined here.
Remove or rename the duplicate property to ensure consistent styling.
(lint/suspicious/noDuplicateProperties)
www/src/styles/container.css
[error] 19-19: Unexpected shorthand property margin after margin-bottom
(lint/suspicious/noShorthandPropertyOverrides)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build, Test, Pack
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (7)
www/src/utils/CopyIcon.tsx (1)
9-9: LGTM!The CSS variable rename from
--var-text-colorto--text-colorcorrectly aligns with the new CSS custom properties defined inwww/src/styles/_variables.css.www/src/components/Navigation.tsx (2)
6-6: LGTM!The import update from
.scssto.cssis consistent with the project-wide migration to CSS-based styling.
38-38: LGTM!The CSS variable rename from
--var-brand-infoto--brand-infocorrectly aligns with the design tokens inwww/src/styles/_variables.css.www/src/layouts/frame.css (1)
17-23: LGTM!The migration to CSS custom properties (
--font-family-code,--font-size-xl,--brand-info) is correctly implemented and aligns with the design tokens defined inwww/src/styles/_variables.css.www/vite.config.ts (1)
11-11: LGTM!The simplification of the React plugin configuration by removing custom Babel decorators and Sass preprocessor options correctly aligns with the migration from SCSS to CSS-based styling. The default
react()plugin is sufficient for the current setup.www/src/styles/_variables.css (1)
1-37: LGTM!The CSS custom properties are well-organized with clear semantic naming that supports the stated goal of future dark-mode work. The use of variable composition (e.g.,
--link-color: var(--text-color)) and the intentional separation of tokens like--text-color-bodydemonstrate good design system architecture.www/src/views/IndexView/IndexView.css (1)
1-173: No issues found — CSS variables are properly defined and CSS nesting is supported.Verification confirms all seven CSS variables referenced in IndexView.css are defined in
www/src/styles/_variables.css:
--font-family-logo,--brand-info,--subtitle-text-color,--font-size-xxl,--font-size-lg,--font-size-xxxl,--font-size-base✓The build configuration (Vite 6.4.1) includes native CSS nesting support and targets modern browsers where CSS nesting is fully supported.
|
Conflicts fixed! |
Description
I want to write unit tests for the router but I struggle to run it because vite fails when importing sass files (it demands a package that is installed in the www/node_modules but not in root node_modules).
I have observed that we never actually use anything that would require SCSS compiler, vanilla CSS has gone a long way, it has variables and nesting and imports and everything.
So I have moved everything SCSS to CSS.
Also included:
Motivation and Context
I want tests and I want to keep things simple.
Screenshots (if appropriate):
Before
After
Types of changes
Summary by CodeRabbit
New Features
Improvements
Documentation