feat: enable better cssOptions override for modules (#30112)

Co-authored-by: Lennart <lekoarts@gmail.com>
Co-authored-by: Justin Waite <jdeanwaite@gmail.com>
Co-authored-by: gatsbybot <mathews.kyle+gatsbybot@gmail.com>

packages/gatsby-plugin-less/src/__tests__/gatsby-node.js

@@ -49,6 +49,14 @@ describe(`gatsby-plugin-less`, () => {
           camelCase: false,
         },
       },
+      "css-loader use commonjs": {
+        cssLoaderOptions: {
+          esModule: false,
+          modules: {
+            namedExport: false,
+          },
+        },
+      },
     },
   }
 

packages/gatsby-plugin-less/src/gatsby-node.js

@@ -23,16 +23,29 @@ exports.onCreateWebpackConfig = (
       ? [loaders.null()]
       : [
           loaders.miniCssExtract(),
-          loaders.css({ ...cssLoaderOptions, importLoaders: 2 }),
+          loaders.css({
+            importLoaders: 2,
+            ...cssLoaderOptions,
+            modules: false,
+          }),
           loaders.postcss({ plugins: postCssPlugins }),
           lessLoader,
         ],
   }
   const lessRuleModules = {
     test: /\.module\.less$/,
     use: [
-      !isSSR && loaders.miniCssExtract({ modules: true }),
-      loaders.css({ ...cssLoaderOptions, modules: true, importLoaders: 2 }),
+      !isSSR &&
+        loaders.miniCssExtract({
+          modules: {
+            namedExport: cssLoaderOptions.modules?.namedExport ?? true,
+          },
+        }),
+      loaders.css({
+        importLoaders: 2,
+        ...cssLoaderOptions,
+        modules: cssLoaderOptions.modules ?? true,
+      }),
       loaders.postcss({ plugins: postCssPlugins }),
       lessLoader,
     ].filter(Boolean),

packages/gatsby-plugin-postcss/README.md

@@ -1,6 +1,6 @@
 # gatsby-plugin-postcss
 
-Gatsby plugin to handle PostCSS.
+Provides drop-in support for PostCSS
 
 ## Install
 
@@ -11,13 +11,28 @@ Gatsby plugin to handle PostCSS.
 1.  Include the plugin in your `gatsby-config.js` file.
 2.  Write your stylesheets using PostCSS (`.css` files) and require or import them as normal.
 
-```javascript
-// in gatsby-config.js
-plugins: [`gatsby-plugin-postcss`],
+```javascript:title=gatsby-config.js
+plugins: [`gatsby-plugin-postcss`]
 ```
 
 If you need to pass options to PostCSS use the plugins options; see [`postcss-loader`](https://github.com/postcss/postcss-loader) for all available options.
 
+If you need to override the default options passed into [`css-loader`](https://github.com/webpack-contrib/css-loader).
+**Note:** Gatsby is using `css-loader@^5.0.0`.
+
+```javascript:title=gatsby-config.js
+plugins: [
+  {
+    resolve: `gatsby-plugin-postcss`,
+    options: {
+      cssLoaderOptions: {
+        camelCase: false,
+      },
+    },
+  },
+]
+```
+
 ### With CSS Modules
 
 Using CSS modules requires no additional configuration. Simply prepend `.module` to the extension. For example: `app.css` -> `app.module.css`.
@@ -27,8 +42,7 @@ Any file with the `module` extension will use CSS modules. CSS modules are impor
 
 If you would prefer to add additional postprocessing to your PostCSS output you can specify plugins in the plugin options:
 
-```javascript
-// in gatsby-config.js
+```javascript:title=gatsby-config.js
 plugins: [
   {
     resolve: `gatsby-plugin-postcss`,
@@ -41,8 +55,7 @@ plugins: [
 
 Alternatively, you can use `postcss.config.js` to specify your particular PostCSS configuration:
 
-```javascript
-// in postcss.config.js
+```javascript:title=postcss.config.js
 const postcssPresetEnv = require(`postcss-preset-env`)
 
 module.exports = () => ({
@@ -58,8 +71,7 @@ If you need to override the default options passed into [`css-loader`](https://g
 
 In this example `css-loader` is configured to output classnames as is, instead of converting them to camel case. Named exports must be disabled for this to work, and so you have to import CSS using `import styles from './file.css` instead of `import * as styles from './file.module.css'`
 
-```javascript
-// in gatsby-config.js
+```javascript:title=gatsby-config.js
 plugins: [
   {
     resolve: `gatsby-plugin-postcss`,