Skip to content
This repository has been archived by the owner on Feb 18, 2024. It is now read-only.

Commit

Permalink
Enable CSS Modules by default in *.module.css files (#495)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
eliperelman committed Dec 1, 2017
1 parent cd5fa51 commit 708b135
Show file tree
Hide file tree
Showing 9 changed files with 244 additions and 64 deletions.
19 changes: 11 additions & 8 deletions docs/packages/preact/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
7 changes: 5 additions & 2 deletions docs/packages/react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
70 changes: 66 additions & 4 deletions docs/packages/style-loader/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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+
Expand Down Expand Up @@ -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: {}
}
});
```

Expand All @@ -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

Expand All @@ -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
Expand Down
2 changes: 2 additions & 0 deletions docs/packages/web/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand Down
5 changes: 4 additions & 1 deletion packages/preact/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 4 additions & 1 deletion packages/react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
68 changes: 65 additions & 3 deletions packages/style-loader/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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+
Expand Down Expand Up @@ -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: {}
}
});
```

Expand All @@ -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

Expand All @@ -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

Expand Down

0 comments on commit 708b135

Please sign in to comment.