From 0564e04bd5ea2a5a3b7156a5f5af58ce426e34f9 Mon Sep 17 00:00:00 2001
From: Grant Wong <2908767+dddlr@users.noreply.github.com>
Date: Tue, 21 Jan 2025 11:09:19 +1100
Subject: [PATCH] Add hash to stylesheet extraction docs (#1784)

* Add hash to stylesheet extraction docs

* Add contenthash to Webpack example
---
 examples/webpack/webpack.config.js                    |  2 +-
 .../docs/src/pages/css-extraction-webpack.mdx         | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/examples/webpack/webpack.config.js b/examples/webpack/webpack.config.js
index c0539bd49..a8aaa3305 100644
--- a/examples/webpack/webpack.config.js
+++ b/examples/webpack/webpack.config.js
@@ -65,7 +65,7 @@ module.exports = {
   plugins: [
     ...(extractCSS
       ? [
-          new MiniCssExtractPlugin({ filename: '[name].css' }),
+          new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
           new CompiledExtractPlugin({ sortShorthand: true }),
         ]
       : []),
diff --git a/website/packages/docs/src/pages/css-extraction-webpack.mdx b/website/packages/docs/src/pages/css-extraction-webpack.mdx
index ea37b45aa..607b1da1c 100644
--- a/website/packages/docs/src/pages/css-extraction-webpack.mdx
+++ b/website/packages/docs/src/pages/css-extraction-webpack.mdx
@@ -173,7 +173,7 @@ module.exports = {
 		],
 	},
 	plugins: [
-+		new MiniCssExtractPlugin(),
++		new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
 		new CompiledExtractPlugin(),
 	],
 };
@@ -227,16 +227,17 @@ All extracted styles will be placed in a file called `compiled-css.css`.
 
 #### Filename
 
-Pass the `filename` option to the extract plugin,
-we recommend using `[contenthash]` in the name.
+Some production environments may require you to include a hash in the filename to allow the stylesheet to be cached correctly.
+
+To do this, pass the `filename` option to the extract plugin, including `[contenthash]` in the name.
 
 ```diff
 // webpack.config.js
 -new MiniCssExtractPlugin()
-+new MiniCssExtractPlugin({ filename: '[contenthash].[name].css' })
++new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' })
 ```
 
-See [`mini-css-extract-plugin` docs](https://github.com/webpack-contrib/mini-css-extract-plugin/#long-term-caching) for more information on these options.
+See the [`mini-css-extract-plugin` docs](https://github.com/webpack-contrib/mini-css-extract-plugin/#long-term-caching) for more information on the available options.
 
 ### CSS minification