From a7fb6bbf56089eb3a181d7ad7bb2b241e3d4e77b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= Date: Sat, 9 Jan 2021 11:38:28 +0100 Subject: [PATCH] Scripts: Add support for static assets in build commands (#28043) * Scripts: Add supports for static assets in build commands Fixes #27581. * Docs: Add details how to use fonts and images * Use file loader for images --- package-lock.json | 1 + packages/scripts/CHANGELOG.md | 1 + packages/scripts/README.md | 20 ++++++++++++- packages/scripts/config/webpack.config.js | 36 ++++++++++++++++++----- packages/scripts/package.json | 1 + 5 files changed, 51 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9bba8b8260661b..30a0e495dba1f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12611,6 +12611,7 @@ "dir-glob": "^3.0.1", "eslint": "^7.17.0", "eslint-plugin-markdown": "^1.0.2", + "file-loader": "^6.2.0", "ignore-emit-webpack-plugin": "^2.0.6", "jest": "^26.6.3", "jest-puppeteer": "^4.4.0", diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index 19df8a9f79760a..c82878c8e17836 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -14,6 +14,7 @@ - `wordpress` subfolder is no longer ignored when detecting files for testing, linting or formatting. - The bundled `eslint` dependency has been updated from requiring `^7.1.0` to requiring `^7.17.0` ([#27965](https://github.com/WordPress/gutenberg/pull/27965)). - Make it possible to transpile `.jsx` files with `build` and `start` commands ([#28002](https://github.com/WordPress/gutenberg/pull/28002)). +- Add support for static assets (fonts and images) for `build` and `start` commands ([#28043](https://github.com/WordPress/gutenberg/pull/28043)). ### Internal diff --git a/packages/scripts/README.md b/packages/scripts/README.md index 574d32d3374258..b872b54a3a8adc 100644 --- a/packages/scripts/README.md +++ b/packages/scripts/README.md @@ -282,7 +282,7 @@ By default, files located in `build`, `node_modules`, and `vendor` folders are i #### Advanced information -It uses [stylelint](https://github.com/stylelint/stylelint) with the [@wordpress/stylelint-config]((https://www.npmjs.com/package/@wordpress/stylelint-config) ) configuration per the [WordPress CSS Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/). You can override them with your own rules as described in [stylelint user guide](https://stylelint.io/user-guide/configure). Learn more in the [Advanced Usage](#advanced-usage) section. +It uses [stylelint](https://github.com/stylelint/stylelint) with the [@wordpress/stylelint-config](<(https://www.npmjs.com/package/@wordpress/stylelint-config)>) configuration per the [WordPress CSS Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/). You can override them with your own rules as described in [stylelint user guide](https://stylelint.io/user-guide/configure). Learn more in the [Advanced Usage](#advanced-usage) section. ### `packages-update` @@ -540,6 +540,24 @@ 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. +#### 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. + +_Example:_ + +```css +/* style.css */ +@font-face { + font-family: Gilbert; + src: url( ../assets/gilbert-color.otf ); +} +.wp-block-my-block { + background-color: url( ../assets/block-background.png ); + font-family: Gilbert; +} +``` + #### Using SVG _Example:_ diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js index dfb3bd35d17bc8..0a6b756c30dc33 100644 --- a/packages/scripts/config/webpack.config.js +++ b/packages/scripts/config/webpack.config.js @@ -157,10 +157,6 @@ const config = { }, ], }, - { - test: /\.svg$/, - use: [ '@svgr/webpack', 'url-loader' ], - }, { test: /\.css$/, use: cssLoaders, @@ -177,12 +173,38 @@ const config = { }, ], }, + { + test: /\.svg$/, + use: [ '@svgr/webpack', 'url-loader' ], + }, + { + test: /\.(bmp|png|jpe?g|gif)$/i, + loader: require.resolve( 'file-loader' ), + options: { + name: 'images/[name].[hash:8].[ext]', + }, + }, + { + test: /\.(woff|woff2|eot|ttf|otf)$/, + use: [ + { + loader: 'file-loader', + options: { + name: 'fonts/[name].[hash:8].[ext]', + }, + }, + ], + }, ], }, plugins: [ - // During rebuilds, all webpack assets that are not used anymore - // will be removed automatically. - new CleanWebpackPlugin(), + // During rebuilds, all webpack assets that are not used anymore will be + // removed automatically. There is an exception added in watch mode for + // fonts and images. It is a known limitations: + // https://github.com/johnagan/clean-webpack-plugin/issues/159 + new CleanWebpackPlugin( { + cleanAfterEveryBuildPatterns: [ '!fonts/**', '!images/**' ], + } ), // The WP_BUNDLE_ANALYZER global variable enables a utility that represents // bundle content as a convenient interactive zoomable treemap. process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(), diff --git a/packages/scripts/package.json b/packages/scripts/package.json index 0fb280d474f3f2..828ffdb30e83df 100644 --- a/packages/scripts/package.json +++ b/packages/scripts/package.json @@ -51,6 +51,7 @@ "dir-glob": "^3.0.1", "eslint": "^7.17.0", "eslint-plugin-markdown": "^1.0.2", + "file-loader": "^6.2.0", "ignore-emit-webpack-plugin": "^2.0.6", "jest": "^26.6.3", "jest-puppeteer": "^4.4.0",