Skip to content

Commit

Permalink
Scripts: Allow CSS modules in the build commands (#29182)
Browse files Browse the repository at this point in the history
* packages/scripts: config allow css modules

* README and CHANGELOG

Co-authored-by: Greg Ziółkowski <[email protected]>
  • Loading branch information
cpiber and gziolo authored Apr 8, 2021
1 parent 9585a45 commit a2e284d
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 1 deletion.
4 changes: 4 additions & 0 deletions packages/scripts/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### New Features

- `build` and `start` command now bundle files ending with `.module.css` as CSS modules and extracts `style.module.css` ([#29182](https://github.com/WordPress/gutenberg/pull/29182)).

## 14.1.0 (2021-04-06)

### Enhancements
Expand Down
2 changes: 2 additions & 0 deletions packages/scripts/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -540,6 +540,8 @@ If you do so, then CSS files generated will follow the names of the entry points

Avoid using `style` keyword in an entry point name, this might break your build process.

You can also bundle CSS modules by prefixing `.module` to the extension, e.g. `style.module.scss`. Otherwise, these files are handled like all other `style.scss`. They will also be extracted into `style-index.css`.

#### Using fonts and images

It is possible to reference font (`woff`, `woff2`, `eot`, `ttf` and `otf`) and image (`bmp`, `png`, `jpg`, `jpeg` and `gif`) files from CSS that is controlled by webpack as explained in the previous section.
Expand Down
5 changes: 4 additions & 1 deletion packages/scripts/config/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@ const cssLoaders = [
loader: require.resolve( 'css-loader' ),
options: {
sourceMap: ! isProduction,
modules: {
auto: true,
},
},
},
{
Expand Down Expand Up @@ -107,7 +110,7 @@ const config = {
splitChunks: {
cacheGroups: {
style: {
test: /[\\/]style\.(sc|sa|c)ss$/,
test: /[\\/]style(\.module)?\.(sc|sa|c)ss$/,
chunks: 'all',
enforce: true,
automaticNameDelimiter: '-',
Expand Down

0 comments on commit a2e284d

Please sign in to comment.