Skip to content

Instantly share code, notes, and snippets.

@patrikjuvonen
Last active January 3, 2022 16:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save patrikjuvonen/8c1bb10b1b9c56e9cdba1f48c99a4c72 to your computer and use it in GitHub Desktop.
Save patrikjuvonen/8c1bb10b1b9c56e9cdba1f48c99a4c72 to your computer and use it in GitHub Desktop.
image-minimizer-webpack-plugin inline SVG bug
/* SVG source: https://github.com/WordPress/WordPress/blob/0bfb5f043bec9149cdb0216789f6b67d16763962/wp-admin/css/colors/_admin.scss#L65 */
body {
content: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#000%27%2F%3E%3C%2Fsvg%3E');
}
import './bug.css';
{
"scripts": {
"postinstall": "webpack --mode production"
},
"devDependencies": {
"css-loader": "^6.5.1",
"image-minimizer-webpack-plugin": "^3.2.0",
"imagemin": "^8.0.1",
"imagemin-svgo": "^10.0.1",
"mini-css-extract-plugin": "^2.4.5",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
}
}
<link href="dist/main.css" rel="stylesheet">
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const MiniCSSExtract = require("mini-css-extract-plugin");
module.exports = {
entry: "./index.js",
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCSSExtract.loader,
},
"css-loader",
],
},
],
},
plugins: [
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminGenerate,
options: {
plugins: ["svgo"],
},
},
}),
new MiniCSSExtract(),
],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment