3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-07 20:07:59 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(core): always use hash for CSS module class names (#10423)

Browse source
This commit is contained in:
Sébastien Lorber 2024-08-21 18:25:36 +02:00 • committed by GitHub
parent 97bd815d9a
commit 2b28b06f67
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/docusaurus/src/webpack/base.ts
View file

@ -231,9 +231,9 @@ export async function createBaseConfig({
test: CSS_MODULE_REGEX, test: CSS_MODULE_REGEX,
use: getStyleLoaders(isServer, { use: getStyleLoaders(isServer, {
modules: { modules: {
localIdentName: isProd // Using the same CSS Module class pattern in dev/prod on purpose
? `[local]_[contenthash:base64:4]` // See https://github.com/facebook/docusaurus/pull/10423
: `[local]_[path][name]`, localIdentName: `[local]_[contenthash:base64:4]`,
exportOnlyLocals: isServer, exportOnlyLocals: isServer,
}, },
importLoaders: 1, importLoaders: 1,

2
website/docs/styling-layout.mdx
View file

@ -63,7 +63,7 @@ If you want to add CSS to any element, you can open the DevTools in your browser
- **Theme class names**. These class names are listed exhaustively in [the next subsection](#theme-class-names). They don't have any default properties. You should always prioritize targeting those stable class names in your custom CSS. - **Theme class names**. These class names are listed exhaustively in [the next subsection](#theme-class-names). They don't have any default properties. You should always prioritize targeting those stable class names in your custom CSS.
- **Infima class names**. These class names are found in the classic theme and usually follow the [BEM convention](http://getbem.com/naming/) of `block__element--modifier`. They are usually stable but are still considered implementation details, so you should generally avoid targeting them. However, you can [modify Infima CSS variables](#styling-your-site-with-infima). - **Infima class names**. These class names are found in the classic theme and usually follow the [BEM convention](http://getbem.com/naming/) of `block__element--modifier`. They are usually stable but are still considered implementation details, so you should generally avoid targeting them. However, you can [modify Infima CSS variables](#styling-your-site-with-infima).
- **CSS module class names**. These class names have a hash in production (`codeBlockContainer_RIuc`) and are appended with a long file path in development. They are considered implementation details and you should almost always avoid targeting them in your custom CSS. If you must, you can use an [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) (`[class*='codeBlockContainer']`) that ignores the hash. - **CSS module class names**. These class names end with a hash which may change over time (`codeBlockContainer_RIuc`). They are considered implementation details and you should almost always avoid targeting them in your custom CSS. If you must, you can use an [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) (`[class*='codeBlockContainer']`) that ignores the hash.
### Theme Class Names {#theme-class-names} ### Theme Class Names {#theme-class-names}