fix: issue by inline a style when in the tag used single quotes for attribute

webdiscus · webdiscus · commit 0ad6fc4eccdf · 2024-11-23T21:01:52.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change log
 
+## 4.4.3 (2024-11-23)
+
+- fix: issue by inline a style when in the tag used single quotes for attribute
+
 ## 4.4.2 (2024-11-18)
 
 - fix: add Exception when used `splitChunks` and occurs the error: Can't resolve a CSS file in template.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.4.2",
+  "version": "4.4.3",
   "description": "HTML Bundler Plugin for Webpack renders HTML templates containing source files of scripts, styles, images. Supports template engines: Eta, EJS, Handlebars, Nunjucks, Pug, TwigJS. Alternative to html-webpack-plugin.",
   "keywords": [
     "html",
diff --git a/src/Common/HtmlParser.js b/src/Common/HtmlParser.js
@@ -96,14 +96,21 @@ const indexOfNonSpaceOrTagEnd = (content, tagName, startPos, pos = 0) => {
  * Whether the link tag load a style or other assets.
  *
  * <link href="style.css" type="text/css" />
+ * <link href="style.css" rel="stylesheet" />
  * <link href="style.css" rel="alternate stylesheet" />
  * <link href="style.css" rel="preload" as="style" />
  * <link href="style.css" rel="preload" as="stylesheet" />
  *
- * @param {string} tag The tag with attributes.
+ * @param {{}} attrs The tag attributes.
  * @return {boolean}
  */
-const isLinkStyle = (tag) => /(?:rel|as)=".*style.*"/.test(tag) || /type="text\/css"/.test(tag);
+const isLinkStyle = (attrs) => {
+  if (attrs?.type === 'text/css') return true;
+  if (attrs?.as?.indexOf('style') > -1) return true;
+  if (attrs?.rel?.indexOf('style') > -1) return true;
+
+  return false;
+};
 
 /**
  * Whether the link tag load a script.
@@ -116,14 +123,13 @@ const isLinkStyle = (tag) => /(?:rel|as)=".*style.*"/.test(tag) || /type="text\/
  * <link href="script.js" rel="modulepreload" as="serviceworker" />
  * <link href="script.js" rel="modulepreload" as="sharedworker" />
  *
- * @param {string} tag The tag with attributes.
+ * @param {{}} attrs The tag attributes.
  * @return {boolean}
  */
-const isLinkScript = (tag) => {
-  if (tag.indexOf('as="script"') > 0) return true;
-  if (tag.indexOf('rel="modulepreload"') > 0) {
-    if (tag.indexOf('as="') < 0) return true;
-    return /as="(worker|serviceworker|sharedworker)"/.test(tag);
+const isLinkScript = (attrs) => {
+  if (attrs?.as === 'script') return true;
+  if (attrs?.rel === 'modulepreload') {
+    return !attrs?.as || /(worker|serviceworker|sharedworker)/.test(attrs.as);
   }
 
   return false;
@@ -157,8 +163,8 @@ class HtmlParser {
       if (tag === 'script') {
         type = 'script';
       } else if (tag === 'link') {
-        if (isLinkStyle(raw)) type = 'style';
-        else if (isLinkScript(raw)) type = 'script';
+        if (isLinkStyle(attrs)) type = 'style';
+        else if (isLinkScript(attrs)) type = 'script';
       }
 
       for (let attrName of attrList) {
diff --git a/src/Plugin/Collection.js b/src/Plugin/Collection.js
@@ -878,6 +878,7 @@ class Collection {
 
     // TODO: update this.data.assets[].asset.resource after change the filename in a template
     //  - e.g. src="./main.js?v=1" => ./main.js?v=123 => WRONG filename is replaced
+
     for (const [entryFilename, { entry, assets }] of this.data) {
       const rawSource = compilation.assets[entryFilename];
 
diff --git a/test/cases/inline-js-css-attr-single-quotes/expected/index.html b/test/cases/inline-js-css-attr-single-quotes/expected/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Home</title>
+    <!-- inline CSS, attributes with single quote-->
+    <style>h1 {
+  color: orangered;
+}
+
+.style-css-inline {
+  color: green;
+}
+</style>
+
+    <!-- resolve CSS file, attributes with single quote -->
+    <link href='style-file.e2174e16.css' rel='stylesheet' />
+
+    <!-- inline JS, attributes with single quote -->
+    <script>console.log(">> script.js");</script>
+
+    <!-- resolve JS file, attributes with single quote -->
+    <script src='script-file.d78e8065.js' defer='defer'></script>
+  </head>
+  <body>
+    <h1>Home</h1>
+    <div class="style-css-inline">Inlined CSS</div>
+    <div class="style-css-file">File CSS</div>
+  </body>
+</html>
diff --git a/test/cases/inline-js-css-attr-single-quotes/expected/script-file.d78e8065.js b/test/cases/inline-js-css-attr-single-quotes/expected/script-file.d78e8065.js
@@ -0,0 +1 @@
+console.log(">> script-file.js");
diff --git a/test/cases/inline-js-css-attr-single-quotes/expected/style-file.e2174e16.css b/test/cases/inline-js-css-attr-single-quotes/expected/style-file.e2174e16.css
diff --git a/test/cases/inline-js-css-attr-single-quotes/src/css/style-file.css b/test/cases/inline-js-css-attr-single-quotes/src/css/style-file.css
diff --git a/test/cases/inline-js-css-attr-single-quotes/src/css/style.css b/test/cases/inline-js-css-attr-single-quotes/src/css/style.css
@@ -1,3 +1,7 @@
+h1 {
+  color: orangered;
+}
+
 .style-css-inline {
   color: green;
 }
diff --git a/test/cases/inline-js-css-attr-single-quotes/src/index.html b/test/cases/inline-js-css-attr-single-quotes/src/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Home</title>
+    <!-- inline CSS, attributes with single quote-->
+    <link href='./css/style.css?inline' rel='stylesheet' />
+
+    <!-- resolve CSS file, attributes with single quote -->
+    <link href='./css/style-file.css' rel='stylesheet' />
+
+    <!-- inline JS, attributes with single quote -->
+    <script src='./js/script.js?inline' defer='defer'></script>
+
+    <!-- resolve JS file, attributes with single quote -->
+    <script src='./js/script-file.js' defer='defer'></script>
+  </head>
+  <body>
+    <h1>Home</h1>
+    <div class="style-css-inline">Inlined CSS</div>
+    <div class="style-css-file">File CSS</div>
+  </body>
+</html>
diff --git a/test/cases/inline-js-css-attr-single-quotes/src/js/script-file.js b/test/cases/inline-js-css-attr-single-quotes/src/js/script-file.js
@@ -0,0 +1 @@
+console.log('>> script-file.js');
diff --git a/test/cases/inline-js-css-attr-single-quotes/src/js/script.js b/test/cases/inline-js-css-attr-single-quotes/src/js/script.js
@@ -0,0 +1 @@
+console.log('>> script.js');
diff --git a/test/cases/inline-js-css-attr-single-quotes/webpack.config.js b/test/cases/inline-js-css-attr-single-quotes/webpack.config.js
@@ -13,6 +13,9 @@ module.exports = {
       entry: {
         index: './src/index.html',
       },
+      js: {
+        filename: '[name].[contenthash:8].js',
+      },
       css: {
         filename: '[name].[contenthash:8].css',
       },
diff --git a/test/cases/inline-style-query2/expected/index.html b/test/cases/inline-style-query2/expected/index.html
diff --git a/test/cases/inline-style-query2/src/css/index.css b/test/cases/inline-style-query2/src/css/index.css
diff --git a/test/cases/inline-style-query2/src/index.html b/test/cases/inline-style-query2/src/index.html
diff --git a/test/cases/inline-style-query2/src/js/index.js b/test/cases/inline-style-query2/src/js/index.js
diff --git a/test/integration.test.js b/test/integration.test.js
@@ -248,13 +248,14 @@ describe('inline styles & scripts', () => {
   test('inline all assets into one HTML', () => compareFiles('inline-all-asset-to-html'));
 
   test('inline CSS via `?inline` and resolve url()', () => compareFiles('inline-style-query'));
-  test('inline many CSS via `?inline`', () => compareFiles('inline-style-query2'));
 
   test('inline CSS, source map, via `?inline`', () => compareFiles('inline-style-query-with-source-map'));
   test('inline minimized CSS', () => compareFiles('inline-style-cssnano'));
   test('inline js via `?inline`', () => compareFiles('inline-script-query'));
   test('inline js, runtimeChunk:single', () => compareFiles('inline-script-runtimeChunk-single'));
-  test('inline js and css, minify', () => compareFiles('inline-js-css-with-minify'));
+  test('inline js, css with minify', () => compareFiles('inline-js-css-with-minify'));
+
+  test('inline js, css via query, attr single quotes', () => compareFiles('inline-js-css-attr-single-quotes'));
 });
 
 describe('import styles in JavaScript', () => {
diff --git a/test/unit.test.js b/test/unit.test.js
@@ -73,7 +73,7 @@ describe('misc', () => {
       { order: '3' },
     ];
     const received = source.sort(compareArrays);
-    // console.log('==> RES: ', received);
+
     return expect(received).toEqual(expected);
   });
 });
@@ -1238,6 +1238,106 @@ describe('parseTagAttributes', () => {
   });
 });
 
+describe('detect style tag', () => {
+  test('rel stylesheet', () => {
+    const tag = `<link href="style.css" rel="stylesheet" />`;
+    const res = HtmlParser.parseTag(tag, { tag: 'link', attributes: [] });
+    const received = res[0].type;
+    const expected = 'style';
+    return expect(received).toStrictEqual(expected);
+  });
+
+  test('rel alternate stylesheet', () => {
+    const tag = `<link href="style.css" rel="alternate stylesheet" />`;
+    const res = HtmlParser.parseTag(tag, { tag: 'link', attributes: [] });
+    const received = res[0].type;
+    const expected = 'style';
+    return expect(received).toStrictEqual(expected);
+  });
+
+  test('rel icon', () => {
+    const tag = `<link href="style.css" rel="icon" />`;
+    const res = HtmlParser.parseTag(tag, { tag: 'link', attributes: [] });
+    const received = res[0].type;
+    const expected = 'asset';
+    return expect(received).toStrictEqual(expected);
+  });
+
+  test('preload as style', () => {
+    const tag = `<link href="style.css" rel="preload" as="style" />`;
+    const res = HtmlParser.parseTag(tag, { tag: 'link', attributes: [] });
+    const received = res[0].type;
+    const expected = 'style';
+    return expect(received).toStrictEqual(expected);
+  });
+
+  test('preload as stylesheet', () => {
+    const tag = `<link href="style.css" rel="preload" as="stylesheet" />`;
+    const res = HtmlParser.parseTag(tag, { tag: 'link', attributes: [] });
+    const received = res[0].type;
+    const expected = 'style';
+    return expect(received).toStrictEqual(expected);
+  });
+});
+
+describe('detect script tag', () => {
+  test('rel prefetch as script', () => {
+    const tag = `<link href="script.js" rel="prefetch" as="script" />`;
+    const res = HtmlParser.parseTag(tag, { tag: 'link', attributes: [] });
+    const received = res[0].type;
+    const expected = 'script';
+    return expect(received).toStrictEqual(expected);
+  });
+
+  test('rel preload as script', () => {
+    const tag = `<link href="script.js" rel="preload" as="script" />`;
+    const res = HtmlParser.parseTag(tag, { tag: 'link', attributes: [] });
+    const received = res[0].type;
+    const expected = 'script';
+    return expect(received).toStrictEqual(expected);
+  });
+
+  test('rel modulepreload', () => {
+    const tag = `<link href="script.js" rel="modulepreload" />`;
+    const res = HtmlParser.parseTag(tag, { tag: 'link', attributes: [] });
+    const received = res[0].type;
+    const expected = 'script';
+    return expect(received).toStrictEqual(expected);
+  });
+
+  test('rel modulepreload as script', () => {
+    const tag = `<link href="script.js" rel="modulepreload" as="script" />`;
+    const res = HtmlParser.parseTag(tag, { tag: 'link', attributes: [] });
+    const received = res[0].type;
+    const expected = 'script';
+    return expect(received).toStrictEqual(expected);
+  });
+
+  test('rel modulepreload as worker', () => {
+    const tag = `<link href="script.js" rel="modulepreload" as="worker" />`;
+    const res = HtmlParser.parseTag(tag, { tag: 'link', attributes: [] });
+    const received = res[0].type;
+    const expected = 'script';
+    return expect(received).toStrictEqual(expected);
+  });
+
+  test('rel modulepreload as serviceworker', () => {
+    const tag = `<link href="script.js" rel="modulepreload" as="serviceworker" />`;
+    const res = HtmlParser.parseTag(tag, { tag: 'link', attributes: [] });
+    const received = res[0].type;
+    const expected = 'script';
+    return expect(received).toStrictEqual(expected);
+  });
+
+  test('rel modulepreload as sharedworker', () => {
+    const tag = `<link href="script.js" rel="modulepreload" as="sharedworker" />`;
+    const res = HtmlParser.parseTag(tag, { tag: 'link', attributes: [] });
+    const received = res[0].type;
+    const expected = 'script';
+    return expect(received).toStrictEqual(expected);
+  });
+});
+
 describe('Parse Exceptions', () => {
   test('missing the closing quote', () => {
     const source = '<div><img src="image.png  /></div>';

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.4.2",`
	`3`	`+ "version": "4.4.3",`
`4`	`4`	`"description": "HTML Bundler Plugin for Webpack renders HTML templates containing source files of scripts, styles, images. Supports template engines: Eta, EJS, Handlebars, Nunjucks, Pug, TwigJS. Alternative to html-webpack-plugin.",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"html",`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
	`1`	`+h1 {`
	`2`	`+ color: orangered;`
	`3`	`+}`
	`4`	`+`
`1`	`5`	`.style-css-inline {`
`2`	`6`	`color: green;`
`3`	`7`	`}`