diff --git a/CHANGELOG.md b/CHANGELOG.md index 863eabeb..955b0541 100644 --- 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 index 3b82257a..d6567cfe 100644 --- 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 index 4ebc764e..e500e2c0 100644 --- 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 index 706542ca..045b577a 100644 --- a/test/cases/option-css-hot-dev/expected/index.html +++ b/test/cases/option-css-hot-dev/expected/index.html @@ -4,7 +4,7 @@ Home -

Home

+

Home

\ No newline at end of file diff --git a/test/cases/option-css-hot-dev/expected/main.js b/test/cases/option-css-hot-dev/expected/main.js index 6c660dc1..fcc9861a 100644 --- 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 index dcd7971a..d342db98 100644 --- a/test/cases/option-css-hot-dev/src/index.html +++ b/test/cases/option-css-hot-dev/src/index.html @@ -4,7 +4,7 @@ Home -

Home

+

Home

\ No newline at end of file diff --git a/test/cases/option-css-hot-dev/src/main.js b/test/cases/option-css-hot-dev/src/main.js index bb13b640..c85a6656 100644 --- 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 index dba5d0f1..e0a66062 100644 --- 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; }