Skip to content

Commit

Permalink
doc
Browse files Browse the repository at this point in the history
  • Loading branch information
slorber committed Aug 21, 2024
1 parent 724de24 commit da40a6d
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 1 deletion.
2 changes: 2 additions & 0 deletions packages/docusaurus/src/webpack/base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,8 @@ export async function createBaseConfig({
test: CSS_MODULE_REGEX,
use: getStyleLoaders(isServer, {
modules: {
// 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,
},
Expand Down
2 changes: 1 addition & 1 deletion website/docs/styling-layout.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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}

Expand Down

0 comments on commit da40a6d

Please sign in to comment.