fix: issue by HMR when CSS contains Tailwind-like style names with backslashes

webdiscus · webdiscus · commit f8ad5c93417d · 2024-11-28T19:03:14.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Change log
 
+## 4.5.3 (2024-11-28)
+
+- fix: issue by HMR when CSS contains Tailwind-like style names with backslashes
+  E.g.: `.\32xl\:w-96`, `.lg\:ml-4`
+
 ## 4.5.2 (2024-11-28)
 
 - fix: issue by HMR when CSS contains a comment with `back-tick` quotes
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.5.2",
+  "version": "4.5.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/Loader/cssLoader.js b/src/Loader/cssLoader.js
@@ -81,9 +81,10 @@ const pitchLoader = async function (remaining) {
 
   if (isHmr) {
     let css = result.default.toString();
-    const search = /\n|`/g;
+    const search = /\n|\\|`/g;
     const replacements = {
       '\n': '',
+      '\\': '\\\\',
       '`': '\\`',
     };
 
diff --git a/test/cases/option-css-hot-dev/expected/index.html b/test/cases/option-css-hot-dev/expected/index.html
@@ -4,7 +4,7 @@
   <title>Home</title>
 </head>
 <body>
-  <h1>Home</h1>
+  <h1 class="2xl:w-96 lg:ml-4">Home</h1>
   <script src="main.js"></script>
 </body>
 </html>
diff --git a/test/cases/option-css-hot-dev/expected/main.js b/test/cases/option-css-hot-dev/expected/main.js
@@ -9,7 +9,7 @@
 
 /* module decorator */ module = __webpack_require__.nmd(module);
 /* extracted by HTMLBundler CSSLoader */
-const css = `/* Comment with \`back-tick\` quotes */h1 {  color: violet;}`;
+const css = `/* Comment with \`back-tick\` quotes */h1 {  color: violet;  text-align: center;  border: 2px solid coral;}/* Test ERROR: Module parse failed: Bad escape sequence in untagged template literal. The problem is with Tailwind-like style names: \`.\\32xl\\:w-96\`. */.\\32 xl\\:w-96 {  width: 10rem;}.lg\\:ml-4 {  margin-left: 1rem;}`;
 const isDocument = typeof document !== 'undefined';
 
 function hotUpdateCSS(css) {
@@ -138,6 +138,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ "./src/style.css");
 /* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_style_css__WEBPACK_IMPORTED_MODULE_0__);
 
+//import './tailwind.css';
 
 console.log('>> main.js');
 
diff --git a/test/cases/option-css-hot-dev/src/index.html b/test/cases/option-css-hot-dev/src/index.html
@@ -4,7 +4,7 @@
   <title>Home</title>
 </head>
 <body>
-  <h1>Home</h1>
+  <h1 class="2xl:w-96 lg:ml-4">Home</h1>
   <script src="./main.js"></script>
 </body>
 </html>
diff --git a/test/cases/option-css-hot-dev/src/main.js b/test/cases/option-css-hot-dev/src/main.js
@@ -1,3 +1,4 @@
 import './style.css';
+//import './tailwind.css';
 
 console.log('>> main.js');
diff --git a/test/cases/option-css-hot-dev/src/style.css b/test/cases/option-css-hot-dev/src/style.css
@@ -2,4 +2,18 @@
 
 h1 {
   color: violet;
+  text-align: center;
+  border: 2px solid coral;
+}
+
+/*
+ Test ERROR: Module parse failed: Bad escape sequence in untagged template literal.
+ The problem is with Tailwind-like style names: `.\32xl\:w-96`.
+ */
+.\32xl\:w-96 {
+  width: 10rem;
+}
+
+.lg\:ml-4 {
+  margin-left: 1rem;
 }

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.5.2",`
	`3`	`+ "version": "4.5.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,4 @@`
`1`	`1`	`import './style.css';`
	`2`	`+//import './tailwind.css';`
`2`	`3`
`3`	`4`	`console.log('>> main.js');`