Skip to content

docs: simplify CSS modification state management#3014

Merged
SoonIter merged 5 commits intomainfrom
syt/fix-css
Jan 16, 2026
Merged

docs: simplify CSS modification state management#3014
SoonIter merged 5 commits intomainfrom
syt/fix-css

Conversation

@SoonIter
Copy link
Copy Markdown
Member

@SoonIter SoonIter commented Jan 15, 2026

Summary

  • Refactor CssModificationContext to use useSyncExternalStore for precise subscriptions
    • Only re-render components when their specific styleId changes
    • Add useCssEntry hook for simplified state management (similar to useState API)
  • Rename CssLiveCodeEditorWithTabs to CssLiveCodeEditorWithSelect (dropdown only)
  • Simplify CssLiveCodeEditor by using the new useCssEntry hook
  • Improve CssPickerEditor:
    • Color picker is now standalone (not a tab)
    • Using picker sets activeTab to 0 with "Custom" label
    • Add debounce to prevent lag during rapid color changes

Test plan

  • Visit the docs site and test the CSS live editors
  • Verify color picker updates CSS in real-time without lag
  • Test reset functionality restores default values
  • Verify theme switcher dropdown works correctly

🤖 Generated with Claude Code

SoonIter and others added 4 commits January 15, 2026 21:30
@SoonIter
docs: upgrade mdx
454c454
@SoonIter
chore: upgrade
1dcccad
@SoonIter
chore: upgrade
b3999cc
@SoonIter @claude
refactor(docs): simplify CssPickerEditor color picker interaction
2118ddb 
- Make color picker standalone instead of a tab
- Set activeTab to 0 (Custom) when using picker
- Simplify useEffect sync logic

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings January 15, 2026 15:20
@netlify
Copy link
Copy Markdown

netlify Bot commented Jan 15, 2026 •
edited
Loading

✅ Deploy Preview for rspress-v2 ready!

Name Link
🔨 Latest commit 9eceabc
🔍 Latest deploy log https://app.netlify.com/projects/rspress-v2/deploys/69690771828065000861a73f
😎 Deploy Preview https://deploy-preview-3014--rspress-v2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jan 15, 2026 •
edited
Loading

Rsdoctor Bundle Diff Analysis

Found 3 projects in monorepo, 3 projects with changes.

📊 Quick Summary
Project Total Size Change
node 10.4 MB -65.7 KB (-0.6%)
node_md 1.3 MB -311.0 B (-0.0%)
web 15.9 MB -3.2 KB (-0.0%)
📋 Detailed Reports (Click to expand)

📁 node

Path: website/doc_build/diff-rsdoctor/node/rsdoctor-data.json

📌 Baseline Commit: 85708fe11d | PR: #3011

Metric Current Baseline Change
📊 Total Size 10.4 MB 10.5 MB -65.7 KB (-0.6%)
📄 JavaScript 0 B 0 B 0
🎨 CSS 0 B 0 B 0
🌐 HTML 10.4 MB 10.5 MB -65.7 KB (-0.6%)
📁 Other Assets 0 B 0 B 0

📦 Download Diff Report: node Bundle Diff

📁 node_md

Path: website/doc_build/diff-rsdoctor/node_md/rsdoctor-data.json

📌 Baseline Commit: 85708fe11d | PR: #3011

Metric Current Baseline Change
📊 Total Size 1.3 MB 1.3 MB -311.0 B (-0.0%)
📄 JavaScript 0 B 0 B 0
🎨 CSS 0 B 0 B 0
🌐 HTML 0 B 0 B 0
📁 Other Assets 1.3 MB 1.3 MB -311.0 B (-0.0%)

📦 Download Diff Report: node_md Bundle Diff

📁 web

Path: website/doc_build/diff-rsdoctor/web/rsdoctor-data.json

📌 Baseline Commit: 85708fe11d | PR: #3011

Metric Current Baseline Change
📊 Total Size 15.9 MB 15.9 MB -3.2 KB (-0.0%)
📄 JavaScript 15.1 MB 15.1 MB -9.0 KB (-0.1%)
🎨 CSS 125.7 KB 126.3 KB -608.0 B (-0.5%)
🌐 HTML 0 B 0 B 0
📁 Other Assets 722.6 KB 716.2 KB +6.4 KB (0.9%)

📦 Download Diff Report: web Bundle Diff

Generated by Rsdoctor GitHub Action

Copilot AI reviewed Jan 15, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR refactors the CSS modification state management in the documentation site to use useSyncExternalStore for precise subscriptions, ensuring components only re-render when their specific CSS entry changes. The refactor introduces a new useCssEntry hook with a useState-like API and consolidates CSS state management into a centralized context provider.

Changes:

  • Introduced CssModificationContext with store-based state management using useSyncExternalStore for granular subscriptions
  • Renamed CssLiveCodeEditorWithTabs to CssLiveCodeEditorWithSelect (dropdown-only UI)
  • Refactored CssPickerEditor to make color picker standalone with debouncing to prevent lag
  • Added CssStyleSync component to sync CSS to DOM style elements
  • Removed Banner component from Layout

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
website/theme/index.tsx Integrated CSS modification context provider and removed deprecated Banner component
website/docs/zh/ui/vars.mdx Added required styleId prop to CSS live editors
website/docs/en/ui/vars.mdx Added required styleId prop to CSS live editors
website/docs/zh/guide/use-mdx/container.mdx Quoted frontmatter description field
website/docs/en/guide/use-mdx/container.mdx Quoted frontmatter description field
website/docs/components/ShikiThemeSwitcher.tsx Updated to use renamed component with new API
website/docs/components/CssStyleSync.tsx New component that syncs CSS context state to DOM
website/docs/components/CssPickerEditor.tsx Complete refactor with standalone color picker and debouncing
website/docs/components/CssModificationIndicator.tsx New component displaying modification status with reset button
website/docs/components/CssModificationContext.tsx New centralized state management using useSyncExternalStore
website/docs/components/CssLiveCodeEditorWithTabs.tsx Removed (replaced by CssLiveCodeEditorWithSelect)
website/docs/components/CssLiveCodeEditorWithSelect.tsx New dropdown-only CSS editor component
website/docs/components/CssLiveCodeEditor.tsx Simplified to use useCssEntry hook

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread website/docs/components/CssPickerEditor.tsx Outdated
Comment thread website/docs/components/CssPickerEditor.tsx
Comment thread website/docs/components/CssLiveCodeEditorWithSelect.tsx Outdated
Comment thread website/docs/components/CssModificationContext.tsx
@SoonIter @claude
fix: address Copilot review comments
9eceabc 
- Fix timerRef type to use `number | null` instead of `ReturnType<typeof setTimeout>`
- Use functional update in useEffect to avoid stale closure issues

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@SoonIter SoonIter changed the title refactor(docs): simplify CSS modification state management docs: simplify CSS modification state management Jan 16, 2026
@SoonIter SoonIter requested a review from Timeless0911 January 16, 2026 04:55
@SoonIter SoonIter enabled auto-merge (squash) January 16, 2026 05:23
@SoonIter SoonIter merged commit 1094824 into main Jan 16, 2026
9 checks passed
@SoonIter SoonIter deleted the syt/fix-css branch January 16, 2026 06:30
This was referenced Jan 16, 2026
Merged
Merged
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@Timeless0911 Timeless0911 Timeless0911 approved these changes

Assignees

No one assigned

Labels

change: docs

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@SoonIter @Timeless0911