fix: incorrect output of preload tag if "crossorigin: true", #139

webdiscus · webdiscus · commit 89209fcacd71 · 2025-01-12T15:10:02.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 4.12.1 (2025-01-12)
+
+- fix: incorrect output of preload tag if "crossorigin: true", #139
+- fix: if `as=font` is used in preload and the `crossorigin` is not defined,
+       it will be added automatically, because the `crossorigin` is mandatory for `font` type
+
 ## 4.12.0 (2025-01-12)
 
 - feat(release): add support for the `?inline` query to load assets as data URL
diff --git a/README.md b/README.md
@@ -2495,6 +2495,17 @@ The descriptions of the properties:
   e.g. `attributes: { crossorigin: true }`, `attributes: { media: '(max-width: 900px)' }`.\
   Defaults `{}`.
 
+> [!NOTE]
+> 
+> The `true` value of a property will be rendered as an attribute w/o a value.
+> 
+> For example, the  `attributes: { crossorigin: true }` will be rendered to:
+> ```html
+> <link rel="preload" ... crossorigin />
+> ```
+> 
+> Setting the [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) attribute to an empty value, like `crossorigin` or `crossorigin=""`, is the same as `anonymous`.
+
 If you define the `attributes` than you can write the `as`, `rel` and `type` properties in the `attributes`.
 
 For example:
@@ -2592,7 +2603,9 @@ preload: [
 
 > ℹ️ **Note**
 >
-> Font preloading requires the `crossorigin` attribute to be set.
+> Font preloading [requires](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload#cors-enabled_fetches) the `crossorigin` attribute to be set.\
+> If the `crossorigin` property is not defined, it will be added for the `font` type automatically.
+> 
 > See [font preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload#what_types_of_content_can_be_preloaded).
 
 #### Preload tags order
@@ -5229,7 +5242,7 @@ module.exports = {
       preload: [
         {
           test: /\.(woff2|woff)$/,
-          attributes: { as: 'font', crossorigin: true },
+          attributes: { as: 'font' },
         },
       ],
     }),
@@ -5266,8 +5279,8 @@ The generated HTML contains the preload tag with the font:
   <head>
     <title>Demo</title>
     <!-- preload fonts detected in style -->
-    <link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="true" />
-    <link rel="preload" href="fonts/myfont.woff" as="font" type="font/woff" crossorigin="true" />
+    <link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="fonts/myfont.woff" as="font" type="font/woff" crossorigin />
     <!-- compiled style -->
     <link href="css/style.1f4faaff.css" rel="stylesheet" />
   </head>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.12.0",
+  "version": "4.12.1",
   "description": "Generates complete single-page or multi-page website from source assets. Build-in support for Markdown, Eta, EJS, Handlebars, Nunjucks, Pug. Alternative to html-webpack-plugin.",
   "keywords": [
     "html",
diff --git a/src/Plugin/Preload.js b/src/Plugin/Preload.js
@@ -120,6 +120,9 @@ class Preload {
       if (conf.rel) attrs.rel = conf.rel;
       if (conf.type) attrs.type = conf.type;
 
+      // for the `font` type, the `crossorigin` attribute is mandatory, if it is not defined, set to default value
+      if (as === 'font' && !('crossorigin' in attrs)) attrs.crossorigin = true;
+
       // whether the 'type' property exist regardless of a value;
       // if the property exists and have the undefined value, exclude this attribute in generating preload tag
       const hasType = 'type' in conf || (conf.attributes && 'type' in conf.attributes) || optionalTypeBy.has(attrs.as);
@@ -179,7 +182,8 @@ class Preload {
 
       let tag = `<link`;
       for (const [key, value] of Object.entries(attrs)) {
-        if (value != null) tag += ` ${key}="${value}"`;
+        if (value === true) tag += ` ${key}`;
+        else if (value != null) tag += ` ${key}="${value}"`;
       }
       tag += '>';
 
diff --git a/test/cases/option-preload-attributes/expected/index.html b/test/cases/option-preload-attributes/expected/index.html
@@ -3,8 +3,8 @@
 <head>
   <title>Home</title>
   <link rel="preload" href="assets/css/home.bundle.css" as="style">
-  <link rel="preload" href="assets/fonts/open-sans-regular.woff2" as="font" type="font/woff2" crossorigin="true">
-  <link rel="preload" href="assets/fonts/MaterialIcons-Regular.woff2" as="font" type="font/woff2" crossorigin="true">
+  <link rel="preload" href="assets/fonts/open-sans-regular.woff2" as="font" type="font/woff2" crossorigin="">
+  <link rel="preload" href="assets/fonts/MaterialIcons-Regular.woff2" as="font" type="font/woff2" crossorigin="">
   <link href="assets/css/home.bundle.css" rel="stylesheet">
 </head>
 <body>
diff --git a/test/cases/option-preload-attributes/webpack.config.js b/test/cases/option-preload-attributes/webpack.config.js
@@ -31,7 +31,9 @@ module.exports = {
         },
         {
           test: /\.(eot|ttf|woff2?)$/,
-          attributes: { as: 'font', crossorigin: true }, // test `as` in attributes
+          // test: `as` in attributes
+          // test: the empty string `''` value of `crossorigin` should be rendered as `crossorigin=""`
+          attributes: { as: 'font', crossorigin: '' },
         },
       ],
     }),
diff --git a/test/cases/option-preload-font/expected/assets/css/home.bundle.css b/test/cases/option-preload-font/expected/assets/css/home.bundle.css
diff --git a/test/cases/option-preload-font/expected/assets/fonts/MaterialIcons-Regular.woff2 b/test/cases/option-preload-font/expected/assets/fonts/MaterialIcons-Regular.woff2
diff --git a/test/cases/option-preload-font/expected/assets/fonts/open-sans-regular.woff2 b/test/cases/option-preload-font/expected/assets/fonts/open-sans-regular.woff2
diff --git a/test/cases/option-preload-font/expected/index.html b/test/cases/option-preload-font/expected/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Home</title>
+  <link rel="preload" href="assets/css/home.bundle.css" as="style">
+  <link rel="preload" href="assets/fonts/open-sans-regular.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="assets/fonts/MaterialIcons-Regular.woff2" as="font" type="font/woff2" crossorigin>
+  <link href="assets/css/home.bundle.css" rel="stylesheet">
+</head>
+<body>
+  <h1>Home</h1>
+  <div>
+    <span class="mi">home</span>
+    <span class="mi">settings</span>
+  </div>
+</body>
+</html>
diff --git a/test/cases/option-preload-font/src/views/home.scss b/test/cases/option-preload-font/src/views/home.scss
@@ -0,0 +1,26 @@
+$color: orange;
+
+@font-face {
+  font-family: 'OpenSans';
+  src:
+    url('@fonts/OpenSans/open-sans-regular.woff2') format('woff2');
+  font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'MaterialIcons';
+  src:
+    url('@fonts/MaterialIcons/MaterialIcons-Regular.woff2') format('woff2');
+  font-style: normal;
+}
+
+h1 {
+  color: $color;
+  font-family: 'OpenSans', sans-serif;
+}
+
+.mi {
+  font-family: 'MaterialIcons';
+  font-size: 64px;
+}
diff --git a/test/cases/option-preload-font/src/views/index.html b/test/cases/option-preload-font/src/views/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Home</title>
+  <link href="./home.scss" rel="stylesheet">
+</head>
+<body>
+  <h1>Home</h1>
+  <div>
+    <span class="mi">home</span>
+    <span class="mi">settings</span>
+  </div>
+</body>
+</html>
diff --git a/test/cases/option-preload-font/webpack.config.js b/test/cases/option-preload-font/webpack.config.js
@@ -0,0 +1,60 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  resolve: {
+    alias: {
+      '@fonts': path.join(__dirname, '../../fixtures/fonts'),
+    },
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './src/views/index.html',
+      },
+
+      css: {
+        filename: 'assets/css/[name].bundle.css',
+      },
+
+      preload: [
+        {
+          test: /\.(s?css|less)$/,
+          as: 'style',
+        },
+        {
+          test: /\.(eot|ttf|woff2?)$/,
+          // test: the `font` type requires mandatory `crossorigin` attribute, if it is not defined, set the default value
+          attributes: {
+            as: 'font',
+            //crossorigin: ''
+          },
+        },
+      ],
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(css|sass|scss)$/,
+        use: ['css-loader', 'sass-loader'],
+      },
+
+      {
+        test: /\.(eot|ttf|woff2?)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'assets/fonts/[name][ext]',
+        },
+      },
+    ],
+  },
+};
diff --git a/test/cases/option-preload-split-chunk/expected/news/sport.html b/test/cases/option-preload-split-chunk/expected/news/sport.html
@@ -9,7 +9,7 @@
   <link rel="preload" href="../assets/css/sport.bundle.css" as="style">
   <link rel="preload" href="../assets/img/lemon.7b66be8e.png" as="image" type="image/png">
   <link rel="preload" href="../assets/img/pear.6b9b072a.png" as="image" type="image/png">
-  <link rel="preload" href="../assets/fonts/open-sans-regular.woff2" as="font" crossorigin="true">
+  <link rel="preload" href="../assets/fonts/open-sans-regular.woff2" as="font" crossorigin>
   <link href="../assets/img/favicon.edda23bf.ico" rel="icon">
 
   <!-- load global style -->
diff --git a/test/cases/option-preload/expected/news/sport.html b/test/cases/option-preload/expected/news/sport.html
@@ -8,8 +8,8 @@
   <link rel="preload" href="../assets/css/sport.41af4a82.css" as="style">
   <link rel="prefetch" href="../assets/img/lemon.7b66be8e.png" as="image" type="image/png">
   <link rel="prefetch" href="../assets/img/apple.02a7c382.png" as="image" type="image/png">
-  <link rel="preload" href="../assets/fonts/open-sans-regular.woff2" as="font" type="font/custom-font" crossorigin="true">
-  <link rel="preload" href="../assets/fonts/MaterialIcons-Regular.woff2" as="font" type="font/custom-font" crossorigin="true">
+  <link rel="preload" href="../assets/fonts/open-sans-regular.woff2" as="font" type="font/custom-font" crossorigin>
+  <link rel="preload" href="../assets/fonts/MaterialIcons-Regular.woff2" as="font" type="font/custom-font" crossorigin>
   <link href="../assets/img/favicon.edda23bf.ico" rel="icon">
 
   <!-- load global style -->
diff --git a/test/cases/option-preload/webpack.config.js b/test/cases/option-preload/webpack.config.js
@@ -51,6 +51,7 @@ module.exports = {
           as: 'font',
           type: 'font/custom-font', // test custom type
           // note: font preloading requires the crossorigin attribute to be set
+          // test: the `true` or empty string `''` value should be rendered as `crossorigin` attribute w/o a value
           attributes: { crossorigin: true },
         },
       ],
diff --git a/test/integration.test.js b/test/integration.test.js
@@ -150,20 +150,13 @@ describe('plugin options', () => {
   test('entry path filter includes', () => compareFiles('option-entry-path-filter-includes'));
   test('entry path filter excludes', () => compareFiles('option-entry-path-filter-excludes'));
 
-  test('preload', () => compareFiles('option-preload'));
-  test('preload attributes', () => compareFiles('option-preload-attributes'));
-  test('preload with responsive images', () => compareFiles('option-preload-responsive-images'));
-
   test('integrity.hashFunctions array', () => compareFiles('option-integrity-hashFunctions-array'));
   test('integrity.hashFunctions string', () => compareFiles('option-integrity-hashFunctions-string'));
 
   // TODO: fix Error: Binary data does not match! on GitHub only (local works file)
   // test('renderStage, default', () =>
   //   compareFiles('option-renderStage-default', true, /.(html|html.gz|css|css.map|js|js.map|json)$/));
 
-  // TODO: detect and remove unused split chinks
-  //test('preload with split chunk', () => compareFiles('option-preload-split-chunk'));
-
   // output deprecation messages
   test('watchFiles deprecation', () => watchCompareFiles('option-watchFiles-deprecation'));
 
@@ -174,6 +167,21 @@ describe('plugin options', () => {
   test('verbose output', () => compareFiles('option-verbose-output'));
 });
 
+describe('plugin option preload', () => {
+  test('preload', () => compareFiles('option-preload'));
+  test('preload font', () => compareFiles('option-preload-font'));
+  test('preload attributes', () => compareFiles('option-preload-attributes'));
+  test('preload with responsive images', () => compareFiles('option-preload-responsive-images'));
+
+  // special cases
+  test('resolve preloaded script and style', () => compareFiles('resolve-preload-script-style'));
+  test('preload, no head', () => compareFiles('preload-no-head'));
+  test('preload, no head closing tag', () => compareFiles('preload-no-head-close'));
+
+  // TODO: detect and remove unused split chinks
+  //test('preload with split chunk', () => compareFiles('option-preload-split-chunk'));
+});
+
 describe('plugin minify option', () => {
   test('minify HTML', () => compareFiles('option-minify'));
   test('minify HTML with custom options', () => compareFiles('option-minify-options'));
@@ -426,9 +434,6 @@ describe('special cases', () => {
   test('resolve manifest.json', () => compareFiles('resolve-manifest.json'));
   test('encode / decode reserved HTML chars', () => compareFiles('decode-chars'));
 
-  test('resolve preloaded script and style', () => compareFiles('resolve-preload-script-style'));
-  test('preload, no head', () => compareFiles('preload-no-head'));
-  test('preload, no head closing tag', () => compareFiles('preload-no-head-close'));
   test('ignore files defined in webpack entry', () => compareFiles('ignore-webpack-entry'));
   test('issue if copy plugin copies a html file', () => compareFiles('issue-copy-plugin'));
   test('import raw content of a file', () => compareFiles('import-raw-html'));

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": "4.12.0",`
	`3`	`+ "version": "4.12.1",`
`4`	`4`	`"description": "Generates complete single-page or multi-page website from source assets. Build-in support for Markdown, Eta, EJS, Handlebars, Nunjucks, Pug. Alternative to html-webpack-plugin.",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"html",`