Enable CSS Modules by default in *.module.css files (#495)

* Enable CSS Modules by default in *.module.css files

* Enable CSS modules when options.modules = true in style-loader

* Fix double-compile bug when matching both .css and .module.css files

* Use extension API for css modules

* Revert bad rebase of web READMEs

* Use a function to test css modules input

* Use ignoreOrder with CSS modules

docs/packages/preact/README.md

@@ -14,14 +14,17 @@
 - Automatic import of `Preact.h`, no need to import `h` or `createElement` yourself
 - Compatibility and pre-configured aliasing for React-based modules and packages
 - Extends from [@neutrinojs/web](../web)
-  - Modern Babel compilation supporting ES modules, last 2 major browser versions, async functions, and dynamic imports
-  - webpack loaders for importing HTML, CSS, images, icons, fonts, and web workers
-  - webpack Dev Server during development
-  - Automatic creation of HTML pages, no templating necessary
-  - Hot Module Replacement support
-  - Tree-shaking to create smaller bundles
-  - Production-optimized bundles with Babel minification, easy chunking, and scope-hoisted modules for faster execution
-  - Easily extensible to customize your project as needed
+  - Zero upfront configuration necessary to start developing and building a web app
+    - Modern Babel compilation supporting ES modules, last 2 major browser versions, async functions, and dynamic imports
+    - webpack loaders for importing HTML, CSS, images, icons, fonts, and web workers
+    - webpack Dev Server during development
+    - Automatic creation of HTML pages, no templating necessary
+    - Automatic stylesheet extraction; importing stylesheets into modules creates bundled external stylesheets
+    - Pre-configured to support CSS Modules via `*.module.css` file extensions
+    - Hot Module Replacement support including CSS
+    - Tree-shaking to create smaller bundles
+    - Production-optimized bundles with Babel minification, easy chunking, and scope-hoisted modules for faster execution
+    - Easily extensible to customize your project as needed
 
 ## Requirements
 

docs/packages/react/README.md

@@ -14,13 +14,16 @@
 - Write JSX in .js or .jsx files
 - Automatic import of `React.createElement`, no need to import `react` or `React.createElement` yourself
 - Extends from [@neutrinojs/web](../@neutrinojs/web/README.md)
+  - Zero upfront configuration necessary to start developing and building a web app
   - Modern Babel compilation supporting ES modules, last 2 major browser versions, async functions, and dynamic imports
   - webpack loaders for importing HTML, CSS, images, icons, fonts, and web workers
   - webpack Dev Server during development
   - Automatic creation of HTML pages, no templating necessary
-  - Hot Module Replacement support
+  - Automatic stylesheet extraction; importing stylesheets into modules creates bundled external stylesheets
+  - Pre-configured to support CSS Modules via `*.module.css` file extensions
+  - Hot Module Replacement support including CSS
   - Tree-shaking to create smaller bundles
-  - Production-optimized bundles with Babili minification, easy chunking, and scope-hoisted modules for faster execution
+  - Production-optimized bundles with Babel minification, easy chunking, and scope-hoisted modules for faster execution
   - Easily extensible to customize your project as needed
 
 ## Requirements

docs/packages/style-loader/README.md

@@ -6,6 +6,14 @@
 [![NPM downloads][npm-downloads]][npm-url]
 [![Join the Neutrino community on Spectrum][spectrum-image]][spectrum-url]
 
+## Features
+
+- Zero upfront configuration necessary to import stylesheets into modules
+- Automatic stylesheet extraction; importing stylesheets into modules creates bundled external stylesheets
+- Pre-configured to support CSS Modules via `*.module.css` file extensions
+- CSS Hot Module Replacement support
+- Very extensible to customize as needed
+
 ## Requirements
 
 - Node.js v6.10+
@@ -43,7 +51,21 @@ neutrino.use(styles);
 // Usage showing default options
 neutrino.use(styles, {
   style: {},
-  css: {}
+  css: {},
+  test: /\.css$/,
+  ruleId: 'style',
+  styleUseId: 'style',
+  cssUseId: 'css',
+  hotUseId: 'hot',
+  hot: true,
+  modules: true,
+  modulesSuffix: '-modules',
+  modulesTest: /\.module.css$/,
+  extractId: 'extract',
+  extract: {
+    plugin: {},
+    loader: {}
+  }
 });
 ```
 
@@ -60,14 +82,42 @@ module.exports = {
   use: [
     ['@neutrinojs/style-loader', {
       style: {},
-      css: {}
+      css: {},
+      test: /\.css$/,
+      ruleId: 'style',
+      styleUseId: 'style',
+      cssUseId: 'css',
+      hotUseId: 'hot',
+      hot: true,
+      modules: true,
+      modulesSuffix: '-modules',
+      modulesTest: /\.module.css$/,
+      extractId: 'extract',
+      extract: {
+        plugin: {},
+        loader: {}
+      }
     }]
   ]
 };
 ```
 
 - `style`: Set options for the style-loader used when loading CSS files.
 - `css`: Set options for the css-loader used when loading CSS files.
+- `test`: File extensions which support stylesheets
+- `ruleId`: The ID of the webpack-chain rule used to identify the stylesheet loaders
+- `styleUseId`: The ID of the webpack-chain `use` used to identify the style-loader
+- `cssUseId`: The ID of the webpack-chain `use` used to identify the css-loader
+- `hotUseId`: The ID of the  webpack-chain `use` used to identify the css-hot-loader
+- `hot`: Enable usage of CSS Hot Module Replacement. Set to `false` to disable.
+- `modules`: Enable usage of CSS modules via `*.module.css` files. Set to `false` to disable and skip defining these rules.
+- `modulesSuffix`: A suffix added to `ruleId`, `styleUseId`, `cssUseId`, `hotUseId`, and `extractId` to derive names for
+modules-related rules. For example, the default `-modules` suffix will generate a rule ID for the CSS modules rules of
+`style-modules`, while the normal rule remains as `style`.
+- `modulesTest`: File extensions which support CSS Modules stylesheets
+- `extractId`: The ID of the webpack-chain plugin used to identify the `ExtractTextPlugin`
+- `extract`: Options relating to the `ExtractTextPlugin` instance. Override `extract.plugin` to override plugin options.
+Override `extract.loader` to override the loader options. Set to `false` to disable stylesheet extraction.
 
 ## Customization
 
@@ -76,17 +126,29 @@ ready to make changes.
 
 ### Rules
 
-The following is a list of rules and their identifiers which can be overridden:
+The following is a list of default rules and their identifiers which can be overridden:
 
 | Name | Description | Environments and Commands |
 | --- | --- | --- |
 | `style` | Allows importing CSS stylesheets from modules. Contains two loaders named `style` and `css` which use `style-loader` and `css-loader`, respectively. | all |
+| `style-modules` | Allows importing CSS Modules styles from modules. Contains two loaders named `style-modules` and `css-modules` which use `style-loader` and `css-loader`, respectively. | all |
+
+### Plugins
+
+The following is a default list of plugins and their identifiers which can be overridden:
+
+_Note: Some plugins may be only available in certain environments. To override them, they should be modified conditionally._
+
+| Name | Description | Environments and Commands |
+| --- | --- | --- |
+| `extract` | Extracts CSS from JS bundle into a separate stylesheet file. | all |
+| `extract-modules` | Extracts CSS from JS bundle into a separate stylesheet file. | all |
 
 ## Contributing
 
 This middleware is part of the [neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) repository, a monorepo
 containing all resources for developing Neutrino and its core presets and middleware. Follow the
-[contributing guide](https://neutrino.js.org/contributing) for details.
+[contributing guide](../../contributing) for details.
 
 [npm-image]: https://img.shields.io/npm/v/@neutrinojs/style-loader.svg
 [npm-downloads]: https://img.shields.io/npm/dt/@neutrinojs/style-loader.svg

docs/packages/web/README.md

@@ -339,6 +339,8 @@ _Note: Some plugins are only available in certain environments. To override them
 | Name | Description | Environments and Commands |
 | --- | --- | --- |
 | `env` | Inject environment variables into source code at `process.env`, defaults to only inject `NODE_ENV`. From `@neutrinojs/env`. | all |
+| `extract` | Extracts CSS from JS bundle into a separate stylesheet file. From `@neutrinojs/style-loader`. | all |
+| `extract-modules` | Extracts CSS from JS bundle into a separate stylesheet file. From `@neutrinojs/style-loader`. | all |
 | `html` | Automatically generates HTML files for configured main entry points. From `@neutrinojs/html-template` | all |
 | `named-modules` | Enables named modules for improved debugging and console output. From `@neutrinojs/chunk` and `@neutrinojs/hot`. | `NODE_ENV production`, `start` command |
 | `named-chunks` | Enables named chunks for improved debugging and console output. From `@neutrinojs/chunk`. | `NODE_ENV production` |

packages/preact/README.md

@@ -14,11 +14,14 @@
 - Automatic import of `Preact.h`, no need to import `h` or `createElement` yourself
 - Compatibility and pre-configured aliasing for React-based modules and packages
 - Extends from [@neutrinojs/web](https://neutrino.js.org/packages/web)
+  - Zero upfront configuration necessary to start developing and building a web app
   - Modern Babel compilation supporting ES modules, last 2 major browser versions, async functions, and dynamic imports
   - webpack loaders for importing HTML, CSS, images, icons, fonts, and web workers
   - webpack Dev Server during development
   - Automatic creation of HTML pages, no templating necessary
-  - Hot Module Replacement support
+  - Automatic stylesheet extraction; importing stylesheets into modules creates bundled external stylesheets
+  - Pre-configured to support CSS Modules via `*.module.css` file extensions
+  - Hot Module Replacement support including CSS
   - Tree-shaking to create smaller bundles
   - Production-optimized bundles with Babel minification, easy chunking, and scope-hoisted modules for faster execution
   - Easily extensible to customize your project as needed

packages/react/README.md

@@ -14,11 +14,14 @@
 - Write JSX in .js or .jsx files
 - Automatic import of `React.createElement`, no need to import `react` or `React.createElement` yourself
 - Extends from [@neutrinojs/web](https://neutrino.js.org/packages/web)
+  - Zero upfront configuration necessary to start developing and building a web app
   - Modern Babel compilation supporting ES modules, last 2 major browser versions, async functions, and dynamic imports
   - webpack loaders for importing HTML, CSS, images, icons, fonts, and web workers
   - webpack Dev Server during development
   - Automatic creation of HTML pages, no templating necessary
-  - Hot Module Replacement support
+  - Automatic stylesheet extraction; importing stylesheets into modules creates bundled external stylesheets
+  - Pre-configured to support CSS Modules via `*.module.css` file extensions
+  - Hot Module Replacement support including CSS
   - Tree-shaking to create smaller bundles
   - Production-optimized bundles with Babel minification, easy chunking, and scope-hoisted modules for faster execution
   - Easily extensible to customize your project as needed

packages/style-loader/README.md

@@ -6,6 +6,14 @@
 [![NPM downloads][npm-downloads]][npm-url]
 [![Join the Neutrino community on Spectrum][spectrum-image]][spectrum-url]
 
+## Features
+
+- Zero upfront configuration necessary to import stylesheets into modules
+- Automatic stylesheet extraction; importing stylesheets into modules creates bundled external stylesheets
+- Pre-configured to support CSS Modules via `*.module.css` file extensions
+- CSS Hot Module Replacement support
+- Very extensible to customize as needed
+
 ## Requirements
 
 - Node.js v6.10+
@@ -43,7 +51,21 @@ neutrino.use(styles);
 // Usage showing default options
 neutrino.use(styles, {
   style: {},
-  css: {}
+  css: {},
+  test: /\.css$/,
+  ruleId: 'style',
+  styleUseId: 'style',
+  cssUseId: 'css',
+  hotUseId: 'hot',
+  hot: true,
+  modules: true,
+  modulesSuffix: '-modules',
+  modulesTest: /\.module.css$/,
+  extractId: 'extract',
+  extract: {
+    plugin: {},
+    loader: {}
+  }
 });
 ```
 
@@ -60,14 +82,42 @@ module.exports = {
   use: [
     ['@neutrinojs/style-loader', {
       style: {},
-      css: {}
+      css: {},
+      test: /\.css$/,
+      ruleId: 'style',
+      styleUseId: 'style',
+      cssUseId: 'css',
+      hotUseId: 'hot',
+      hot: true,
+      modules: true,
+      modulesSuffix: '-modules',
+      modulesTest: /\.module.css$/,
+      extractId: 'extract',
+      extract: {
+        plugin: {},
+        loader: {}
+      }
     }]
   ]
 };
 ```
 
 - `style`: Set options for the style-loader used when loading CSS files.
 - `css`: Set options for the css-loader used when loading CSS files.
+- `test`: File extensions which support stylesheets
+- `ruleId`: The ID of the webpack-chain rule used to identify the stylesheet loaders
+- `styleUseId`: The ID of the webpack-chain `use` used to identify the style-loader
+- `cssUseId`: The ID of the webpack-chain `use` used to identify the css-loader
+- `hotUseId`: The ID of the  webpack-chain `use` used to identify the css-hot-loader
+- `hot`: Enable usage of CSS Hot Module Replacement. Set to `false` to disable.
+- `modules`: Enable usage of CSS modules via `*.module.css` files. Set to `false` to disable and skip defining these rules.
+- `modulesSuffix`: A suffix added to `ruleId`, `styleUseId`, `cssUseId`, `hotUseId`, and `extractId` to derive names for
+modules-related rules. For example, the default `-modules` suffix will generate a rule ID for the CSS modules rules of
+`style-modules`, while the normal rule remains as `style`.
+- `modulesTest`: File extensions which support CSS Modules stylesheets
+- `extractId`: The ID of the webpack-chain plugin used to identify the `ExtractTextPlugin`
+- `extract`: Options relating to the `ExtractTextPlugin` instance. Override `extract.plugin` to override plugin options.
+Override `extract.loader` to override the loader options. Set to `false` to disable stylesheet extraction.
 
 ## Customization
 
@@ -76,11 +126,23 @@ ready to make changes.
 
 ### Rules
 
-The following is a list of rules and their identifiers which can be overridden:
+The following is a list of default rules and their identifiers which can be overridden:
 
 | Name | Description | Environments and Commands |
 | --- | --- | --- |
 | `style` | Allows importing CSS stylesheets from modules. Contains two loaders named `style` and `css` which use `style-loader` and `css-loader`, respectively. | all |
+| `style-modules` | Allows importing CSS Modules styles from modules. Contains two loaders named `style-modules` and `css-modules` which use `style-loader` and `css-loader`, respectively. | all |
+
+### Plugins
+
+The following is a default list of plugins and their identifiers which can be overridden:
+
+_Note: Some plugins may be only available in certain environments. To override them, they should be modified conditionally._
+
+| Name | Description | Environments and Commands |
+| --- | --- | --- |
+| `extract` | Extracts CSS from JS bundle into a separate stylesheet file. | all |
+| `extract-modules` | Extracts CSS from JS bundle into a separate stylesheet file. | all |
 
 ## Contributing