From 2b28b06f67125872073d0609ddac1387d6c3bec4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Wed, 21 Aug 2024 18:25:36 +0200 Subject: [PATCH] fix(core): always use hash for CSS module class names (#10423) --- packages/docusaurus/src/webpack/base.ts | 6 +++--- website/docs/styling-layout.mdx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/docusaurus/src/webpack/base.ts b/packages/docusaurus/src/webpack/base.ts index abe93deb0095..76a28e215290 100644 --- a/packages/docusaurus/src/webpack/base.ts +++ b/packages/docusaurus/src/webpack/base.ts @@ -231,9 +231,9 @@ export async function createBaseConfig({ test: CSS_MODULE_REGEX, use: getStyleLoaders(isServer, { modules: { - localIdentName: isProd - ? `[local]_[contenthash:base64:4]` - : `[local]_[path][name]`, + // Using the same CSS Module class pattern in dev/prod on purpose + // See https://github.com/facebook/docusaurus/pull/10423 + localIdentName: `[local]_[contenthash:base64:4]`, exportOnlyLocals: isServer, }, importLoaders: 1, diff --git a/website/docs/styling-layout.mdx b/website/docs/styling-layout.mdx index e505e5b66e17..d99f5ac916b3 100644 --- a/website/docs/styling-layout.mdx +++ b/website/docs/styling-layout.mdx @@ -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. - **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}