Skip to content

docs: clarify CSS Modules class name generation #5419

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 14, 2025

Conversation

chenjiahan
Copy link
Member

Summary

Clarify CSS Modules class name generation, added examples showing how CSS class names are automatically appended with hash values during development and production to prevent conflicts.

Checklist

  • Tests updated (or not required).
  • Documentation updated (or not required).

@Copilot Copilot AI review requested due to automatic review settings June 14, 2025 09:36
Copy link

netlify bot commented Jun 14, 2025

Deploy Preview for rsbuild ready!

Name Link
🔨 Latest commit 15cf929
🔍 Latest deploy log https://app.netlify.com/projects/rsbuild/deploys/684d428eb2015d0008327cae
😎 Deploy Preview https://deploy-preview-5419--rsbuild.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 75 (🔴 down 10 from production)
Accessibility: 97 (no change from production)
Best Practices: 100 (no change from production)
SEO: 100 (no change from production)
PWA: 60 (no change from production)
View the detailed breakdown and full score reports

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

Copy link
Contributor

@Copilot 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 updates the documentation to clarify how CSS Modules generate class names by appending hash values and provides examples for both development and production modes.

  • Updated wording for file-specific usage instructions in Chinese and English.
  • Added code examples demonstrating the generated CSS class naming patterns.
  • Included a tip section linking to custom class name configuration options.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
website/docs/zh/guide/styling/css-modules.mdx Clarified instructions and added examples for CSS Modules class name generation (Chinese version).
website/docs/en/guide/styling/css-modules.mdx Clarified instructions and added examples for CSS Modules class name generation (English version).
Comments suppressed due to low confidence (2)

website/docs/zh/guide/styling/css-modules.mdx:36

  • Consider mentioning that the hash value is generated based on the build configuration and may vary between projects.
+经过编译后,CSS Modules 中的类名会自动添加一个哈希值,以避免类名冲突:

website/docs/en/guide/styling/css-modules.mdx:36

  • Consider clarifying that the appended hash value is configurable and may change based on the build settings.
+After compilation, CSS Modules class names are automatically appended with a hash value to prevent class name conflicts:

@chenjiahan chenjiahan merged commit a257bcf into main Jun 14, 2025
12 checks passed
@chenjiahan chenjiahan deleted the css_modules_class_name_0614 branch June 14, 2025 09:46
@chenjiahan chenjiahan mentioned this pull request Jun 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant