fix: error by resolving url(date:image...) in CSS

webdiscus · webdiscus · commit faa2e9e93184 · 2024-01-15T17:27:50.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change log
 
+## 3.4.8 (2024-01-15)
+
+- fix: error by resolving `url(date:image...)` in CSS
+
 ## 3.4.7 (2024-01-09)
 
 - fix: if the same CSS file is imported in many js files, then the CSS is extracted for the first issuer only, #68
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "3.4.7",
+  "version": "3.4.8",
   "description": "HTML bundler plugin for webpack handles a template as an entry point, extracts CSS and JS from their sources referenced in HTML, supports template engines like Eta, EJS, Handlebars, Nunjucks.",
   "keywords": [
     "html",
diff --git a/src/Plugin/Utils.js b/src/Plugin/Utils.js
@@ -10,7 +10,14 @@ const transformToCommonJS = (code) => {
   for (const [match, variable, file] of importMatches) {
     code = code.replace(match, `var ${variable} = require('${file}');`);
   }
-  // new URL to require
+
+  // transform `new URL("data:image...", import.meta.url)` to 'data:image...'
+  const urlDataMatches = code.matchAll(/= new URL\("(data:.+?)", import.meta.url\);/g);
+  for (const [match, data] of urlDataMatches) {
+    code = code.replace(match, `= '${data}';`);
+  }
+
+  // transform `new URL("file")` to `require('file')`
   const urlMatches = code.matchAll(/= new URL\("(.+?)".*?\);/g);
   for (const [match, file] of urlMatches) {
     code = code.replace(match, `= require('${file}');`);
diff --git a/test/cases/js-import-css-order-splitchunk/expected/index.html b/test/cases/js-import-css-order-splitchunk/expected/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test</title>
+  <link href="main.bundle.css" rel="stylesheet">
+<script src="main.bundle.js" defer="defer"></script>
+</head>
+<body>
+  <h1>Hello World!</h1>
+</body>
+</html>
diff --git a/test/cases/js-import-css-order-splitchunk/expected/main.bundle.css b/test/cases/js-import-css-order-splitchunk/expected/main.bundle.css
@@ -0,0 +1,6 @@
+h1 {
+  color: red;
+}
+h1 {
+  color: green;
+}
diff --git a/test/cases/js-import-css-order-splitchunk/expected/main.bundle.js b/test/cases/js-import-css-order-splitchunk/expected/main.bundle.js
@@ -0,0 +1 @@
+(()=>{"use strict";console.log(">> main")})();
diff --git a/test/cases/js-import-css-order-splitchunk/src/index.html b/test/cases/js-import-css-order-splitchunk/src/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test</title>
+  <script src="./main.js" defer="defer"></script>
+</head>
+<body>
+  <h1>Hello World!</h1>
+</body>
+</html>
diff --git a/test/cases/js-import-css-order-splitchunk/src/main.js b/test/cases/js-import-css-order-splitchunk/src/main.js
@@ -0,0 +1,4 @@
+import './style1.css';
+import './style2.css';
+
+console.log('>> main');
diff --git a/test/cases/js-import-css-order-splitchunk/src/style1.css b/test/cases/js-import-css-order-splitchunk/src/style1.css
@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}
diff --git a/test/cases/js-import-css-order-splitchunk/src/style2.css b/test/cases/js-import-css-order-splitchunk/src/style2.css
@@ -0,0 +1,3 @@
+h1 {
+  color: green;
+}
diff --git a/test/cases/js-import-css-order-splitchunk/webpack.config.js b/test/cases/js-import-css-order-splitchunk/webpack.config.js
@@ -0,0 +1,69 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+  devtool: false,
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './src/index.html',
+      },
+
+      js: {
+        filename: '[name].bundle.js',
+        chunkFilename: '[name].chunk.js',
+      },
+
+      css: {
+        filename: '[name].bundle.css',
+        chunkFilename: '[name].chunk.css',
+      },
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(css)$/,
+        use: ['css-loader'],
+      },
+    ],
+  },
+
+  optimization: {
+    // TODO: implement split css chunks.
+    //  - It is really very important?
+    //  - Does anyone need it?
+    splitChunks: {
+      chunks: 'all',
+      cacheGroups: {
+        // test: should be generated separate css chunk, e.g., 616.css
+        style1: {
+          test: /style1/,
+          enforce: true,
+        },
+        // test: should be generated separate css chunk, e.g., 714.css
+        style2: {
+          test: /style2/,
+          enforce: true,
+        },
+        defaultVendors: {
+          test: /[\\/]node_modules[\\/]/,
+          priority: -10,
+          reuseExistingChunk: true,
+        },
+        default: {
+          minChunks: 2,
+          priority: -20,
+          reuseExistingChunk: true,
+        },
+      },
+    },
+  },
+};
diff --git a/test/cases/resolve-alias-in-scss/expected/css/style.3bf6669e.css b/test/cases/resolve-alias-in-scss/expected/css/style.3bf6669e.css
diff --git a/test/cases/resolve-alias-in-scss/expected/img/apple.02a7c382.png b/test/cases/resolve-alias-in-scss/expected/img/apple.02a7c382.png
diff --git a/test/cases/resolve-alias-in-scss/expected/index.html b/test/cases/resolve-alias-in-scss/expected/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test</title>
+    <link href="css/style.3bf6669e.css" rel="stylesheet" />
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <div class="img-url-alias"></div>
+  </body>
+</html>
diff --git a/test/cases/resolve-alias-in-scss/index.html b/test/cases/resolve-alias-in-scss/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test</title>
+    <link href="./scss/style.scss" rel="stylesheet" />
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <div class="img-url-alias"></div>
+  </body>
+</html>
diff --git a/test/cases/resolve-alias-in-scss/scss/style.scss b/test/cases/resolve-alias-in-scss/scss/style.scss
@@ -0,0 +1,7 @@
+.img-url-alias {
+  width: 160px;
+  height: 130px;
+  background-image: url('@images/apple.png');
+  border: 5px solid green;
+  color: green;
+}
diff --git a/test/cases/resolve-alias-in-scss/webpack.config.js b/test/cases/resolve-alias-in-scss/webpack.config.js
@@ -0,0 +1,45 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+    publicPath: '',
+  },
+
+  resolve: {
+    alias: {
+      '@images': path.join(__dirname, '../../fixtures/images'),
+    },
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './index.html',
+      },
+      css: {
+        filename: 'css/[name].[contenthash:8].css',
+      },
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(s?css)$/,
+        use: ['css-loader', 'sass-loader'],
+      },
+
+      {
+        test: /\.(png|jpe?g)$/i,
+        type: 'asset/resource',
+        generator: {
+          filename: 'img/[name].[hash:8][ext]',
+        },
+      },
+    ],
+  },
+};
diff --git a/test/cases/resolve-data-image-in-css/expected/index.html b/test/cases/resolve-data-image-in-css/expected/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test</title>
+    <link href="main.bundle.css" rel="stylesheet" />
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <div class="img-data-image"></div>
+  </body>
+</html>
diff --git a/test/cases/resolve-data-image-in-css/expected/main.bundle.css b/test/cases/resolve-data-image-in-css/expected/main.bundle.css
@@ -0,0 +1 @@
+@import url(style.min.bundle.css);h1{color:#ff4500}
diff --git a/test/cases/resolve-data-image-in-css/expected/style.min.bundle.css b/test/cases/resolve-data-image-in-css/expected/style.min.bundle.css
@@ -0,0 +1,6 @@
+.img-data-image {
+  width: 32px;
+  height: 32px;
+  background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"black\" d=\"M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z\"/></svg>");
+  border: 5px solid green;
+}
diff --git a/test/cases/resolve-data-image-in-css/index.html b/test/cases/resolve-data-image-in-css/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test</title>
+    <link href="./main.scss" rel="stylesheet" />
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <div class="img-data-image"></div>
+  </body>
+</html>
diff --git a/test/cases/resolve-data-image-in-css/main.scss b/test/cases/resolve-data-image-in-css/main.scss
@@ -0,0 +1,5 @@
+@import './style.min.css';
+
+h1 {
+  color: orangered;
+}
diff --git a/test/cases/resolve-data-image-in-css/style.min.css b/test/cases/resolve-data-image-in-css/style.min.css
@@ -0,0 +1,6 @@
+.img-data-image {
+  width: 32px;
+  height: 32px;
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="black" d="M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z"/></svg>');
+  border: 5px solid green;
+}
diff --git a/test/cases/resolve-data-image-in-css/webpack.config.js b/test/cases/resolve-data-image-in-css/webpack.config.js
@@ -0,0 +1,31 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+    publicPath: '',
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './index.html',
+      },
+      css: {
+        filename: '[name].bundle.css',
+      },
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(s?css)$/,
+        use: ['css-loader', 'sass-loader'],
+      },
+    ],
+  },
+};
diff --git a/test/integration.test.js b/test/integration.test.js
@@ -45,6 +45,8 @@ describe('resolve url() in style', () => {
   test('@import url() in CSS', () => compareFiles('import-url-in-css'));
   test('@import url() in SCSS', () => compareFiles('import-url-in-scss'));
   test('url() in nested style', () => compareFiles('resolve-url-in-nested-style'));
+  test('alias in url()', () => compareFiles('resolve-alias-in-scss'));
+  test('data:image in url()', () => compareFiles('resolve-data-image-in-css'));
 });
 
 describe('plugin options', () => {
@@ -279,6 +281,8 @@ describe('import styles in JavaScript', () => {
   // special cases
   test('nested import, sorted', () => compareFiles('js-import-css-nested-sorted'));
   test('order dependencies', () => compareFiles('js-import-css-order-dependencies'));
+  // TODO: implement split css chunks
+  //test('order split chunks', () => compareFiles('js-import-css-order-splitchunk'));
   test('import the same css in deep in  many js', () => compareFiles('js-import-css-nested-deep'));
 
   test('import one CSS from many JS files', () => compareFiles('js-import-css-one-from-many-js'));

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "html-bundler-webpack-plugin",`
`3`		`- "version": "3.4.7",`
	`3`	`+ "version": "3.4.8",`
`4`	`4`	`"description": "HTML bundler plugin for webpack handles a template as an entry point, extracts CSS and JS from their sources referenced in HTML, supports template engines like Eta, EJS, Handlebars, Nunjucks.",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"html",`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,6 @@ @@
 +h1 {
 +  color: red;
 +}
 +h1 {
 +  color: green;
 +}
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+(()=>{"use strict";console.log(">> main")})();`