chore: Update styling READMEs CSS modules info (#30334)

gatsbyjs · Mar 18, 2021 · 85b6420 · 85b6420
1 parent e786b47
commit 85b6420
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/packages/gatsby-plugin-less/README.md b/packages/gatsby-plugin-less/README.md
@@ -37,8 +37,8 @@ plugins: [
 ]
 ```
 
-If you need to override the default options passed into [`css-loader`](https://github.com/webpack-contrib/css-loader/tree/version-1)
-**Note:** Gatsby is using `css-loader@1.0.1`.
+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
 // in gatsby-config.js
@@ -56,8 +56,8 @@ plugins: [
 
 ### With CSS Modules
 
-Using CSS modules requires no additional configuration. Simply prepend `.module` to the extension. For example: `App.less` -> `App.module.less`.
-Any file with the `module` extension will use CSS modules.
+Using CSS modules requires no additional configuration. Simply prepend `.module` to the extension. For example: `app.less` -> `app.module.less`.
+Any file with the `module` extension will use CSS modules. CSS modules are imported as ES Modules to support treeshaking. You'll need to import styles as: `import { yourClassName, anotherClassName } from './app.module.less'`.
 
 ### PostCSS plugins
 

diff --git a/packages/gatsby-plugin-postcss/README.md b/packages/gatsby-plugin-postcss/README.md
@@ -20,8 +20,8 @@ If you need to pass options to PostCSS use the plugins options; see [`postcss-lo
 
 ### With CSS Modules
 
-Using CSS modules requires no additional configuration. Simply prepend `.module` to the extension. For example: `App.css` -> `App.module.css`.
-Any file with the `module` extension will use CSS modules.
+Using CSS modules requires no additional configuration. Simply prepend `.module` to the extension. For example: `app.css` -> `app.module.css`.
+Any file with the `module` extension will use CSS modules. CSS modules are imported as ES Modules to support treeshaking. You'll need to import styles as: `import { yourClassName, anotherClassName } from './app.module.css'`
 
 ### PostCSS plugins
 

diff --git a/packages/gatsby-plugin-sass/README.md b/packages/gatsby-plugin-sass/README.md
@@ -125,8 +125,8 @@ plugins: [
 
 ### With CSS Modules
 
-Using CSS Modules requires no additional configuration. Simply prepend `.module` to the extension. For example: `App.scss` -> `App.module.scss`.
-Any file with the `module` extension will use CSS Modules.
+Using CSS Modules requires no additional configuration. Simply prepend `.module` to the extension. For example: `app.scss` -> `app.module.scss`.
+Any file with the `module` extension will use CSS Modules. CSS modules are imported as ES Modules to support treeshaking. You'll need to import styles as: `import { yourClassName, anotherClassName } from './app.module.scss'`
 
 ## Sass & CSS Modules file Regexes
 

diff --git a/packages/gatsby-plugin-stylus/README.md b/packages/gatsby-plugin-stylus/README.md
@@ -20,8 +20,8 @@ plugins: [`gatsby-plugin-stylus`]
 
 ### With CSS Modules
 
-Using CSS modules requires no additional configuration. Simply prepend `.module` to the extension. For example: `App.styl` -> `App.module.styl`.
-Any file with the `module` extension will use CSS modules.
+Using CSS modules requires no additional configuration. Simply prepend `.module` to the extension. For example: `app.styl` -> `app.module.styl`.
+Any file with the `module` extension will use CSS modules. CSS modules are imported as ES Modules to support treeshaking. You'll need to import styles as: `import { yourClassName, anotherClassName } from './app.module.styl'`
 
 ### With Stylus plugins