From e056d128ade125492f5d8ce53d735ff8302990f0 Mon Sep 17 00:00:00 2001 From: Lennart Date: Thu, 18 Mar 2021 14:04:19 +0100 Subject: [PATCH 1/4] chore: Update styling READMEs CSS modules info --- packages/gatsby-plugin-less/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/gatsby-plugin-less/README.md b/packages/gatsby-plugin-less/README.md index 0b878be765d74..8a590c84d81ba 100644 --- 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 From b0937155d801282b545049a9a36945781937926d Mon Sep 17 00:00:00 2001 From: Lennart Date: Thu, 18 Mar 2021 14:06:24 +0100 Subject: [PATCH 2/4] postcss --- packages/gatsby-plugin-postcss/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-plugin-postcss/README.md b/packages/gatsby-plugin-postcss/README.md index e699a67e8cc5a..94aebc95fda4e 100644 --- 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 From 8f654a062135bc29a6803ec2cbe78408a3c8417d Mon Sep 17 00:00:00 2001 From: Lennart Date: Thu, 18 Mar 2021 14:07:39 +0100 Subject: [PATCH 3/4] sass --- packages/gatsby-plugin-sass/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-plugin-sass/README.md b/packages/gatsby-plugin-sass/README.md index 27e7e8af461a5..eccfd99534296 100644 --- 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 From 35b06045edd99d26b5f063063493346a6121b757 Mon Sep 17 00:00:00 2001 From: Lennart Date: Thu, 18 Mar 2021 14:08:33 +0100 Subject: [PATCH 4/4] stylus --- packages/gatsby-plugin-stylus/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-plugin-stylus/README.md b/packages/gatsby-plugin-stylus/README.md index 17d28be5ffbb3..55d0819f7d182 100644 --- 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