Skip to content

Commit 2cb4dca

Browse files
webdiscuswebdiscus
committed
fix: in dev mode imports SCSS in JS when in the same file is inlined another SCSS file via ?inline, #102 
1 parent 0f6ebdf commit 2cb4dca

22 files changed

Lines changed: 305 additions & 4 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Change log
22

3+
## 3.17.3 (2024-08-09)
4+
5+
- fix: in dev mode imports SCSS in JS when in the same file is inlined another SCSS file via `?inline` query, #102
6+
37
## 3.17.2 (2024-08-08)
48

59
- fix: error when `integrity` option is enabled but no template defined in entry, #107

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "html-bundler-webpack-plugin",
3-
"version": "3.17.2",
3+
"version": "3.17.3",
44
"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.",
55
"keywords": [
66
"html",

‎src/Plugin/AssetCompiler.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1180,8 +1180,9 @@ class AssetCompiler {
11801180
const fileManifest = {
11811181
render: () => cssContent,
11821182
filename: assetFile,
1183-
identifier: `${pluginName}.${chunk.id}`,
1184-
hash,
1183+
identifier: `${pluginName}.${chunk.id}.inline.css`,
1184+
// the validity of the hash does not matter because it will be injected in the HTML
1185+
hash: hash + 'inline',
11851186
};
11861187

11871188
result.push(fileManifest);
@@ -1219,7 +1220,7 @@ class AssetCompiler {
12191220
const fileManifest = {
12201221
render: () => cssContent,
12211222
filename: assetFile,
1222-
identifier: `${pluginName}.${chunk.id}`,
1223+
identifier: `${pluginName}.${chunk.id}.file.css`,
12231224
hash,
12241225
};
12251226

‎test/cases/js-import-scss-and-inline-scss-dev/expected/index.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.import1 {
2+
color: red;
3+
}.import2 {
4+
color: green;
5+
}

‎test/cases/js-import-scss-and-inline-scss-dev/expected/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<title>Test</title>
5+
<link href="index.css" rel="stylesheet">
6+
<style>.import3 {
7+
color: blue;
8+
}</style>
9+
</head>
10+
<body>
11+
<p class="import1">This text should be red (import1.scss)</p>
12+
<p class="import2">This text should be green (import2.scss)</p>
13+
<p class="import3">This text should be blue (import3.scss)</p>
14+
<script src="index.js"></script>
15+
</body>
16+
</html>

‎test/cases/js-import-scss-and-inline-scss-dev/expected/index.js‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
/******/ (() => { // webpackBootstrap
2+
/******/ var __webpack_modules__ = ({
3+
4+
/***/ "./src/import1.scss":
5+
/*!**************************!*\
6+
!*** ./src/import1.scss ***!
7+
\**************************/
8+
/***/ (() => {
9+
10+
/* extracted by HTMLBundler CSSLoader */
11+
12+
/***/ }),
13+
14+
/***/ "./src/import2.scss":
15+
/*!**************************!*\
16+
!*** ./src/import2.scss ***!
17+
\**************************/
18+
/***/ (() => {
19+
20+
/* extracted by HTMLBundler CSSLoader */
21+
22+
/***/ }),
23+
24+
/***/ "./src/import3.scss?inline":
25+
/*!*********************************!*\
26+
!*** ./src/import3.scss?inline ***!
27+
\*********************************/
28+
/***/ (() => {
29+
30+
/* extracted by HTMLBundler CSSLoader */
31+
32+
/***/ })
33+
34+
/******/ });
35+
/************************************************************************/
36+
/******/ // The module cache
37+
/******/ var __webpack_module_cache__ = {};
38+
/******/
39+
/******/ // The require function
40+
/******/ function __webpack_require__(moduleId) {
41+
/******/ // Check if module is in cache
42+
/******/ var cachedModule = __webpack_module_cache__[moduleId];
43+
/******/ if (cachedModule !== undefined) {
44+
/******/ return cachedModule.exports;
45+
/******/ }
46+
/******/ // Create a new module (and put it into the cache)
47+
/******/ var module = __webpack_module_cache__[moduleId] = {
48+
/******/ // no module.id needed
49+
/******/ // no module.loaded needed
50+
/******/ exports: {}
51+
/******/ };
52+
/******/
53+
/******/ // Execute the module function
54+
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
55+
/******/
56+
/******/ // Return the exports of the module
57+
/******/ return module.exports;
58+
/******/ }
59+
/******/
60+
/************************************************************************/
61+
/******/ /* webpack/runtime/compat get default export */
62+
/******/ (() => {
63+
/******/ // getDefaultExport function for compatibility with non-harmony modules
64+
/******/ __webpack_require__.n = (module) => {
65+
/******/ var getter = module && module.__esModule ?
66+
/******/ () => (module['default']) :
67+
/******/ () => (module);
68+
/******/ __webpack_require__.d(getter, { a: getter });
69+
/******/ return getter;
70+
/******/ };
71+
/******/ })();
72+
/******/
73+
/******/ /* webpack/runtime/define property getters */
74+
/******/ (() => {
75+
/******/ // define getter functions for harmony exports
76+
/******/ __webpack_require__.d = (exports, definition) => {
77+
/******/ for(var key in definition) {
78+
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
79+
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
80+
/******/ }
81+
/******/ }
82+
/******/ };
83+
/******/ })();
84+
/******/
85+
/******/ /* webpack/runtime/hasOwnProperty shorthand */
86+
/******/ (() => {
87+
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
88+
/******/ })();
89+
/******/
90+
/******/ /* webpack/runtime/make namespace object */
91+
/******/ (() => {
92+
/******/ // define __esModule on exports
93+
/******/ __webpack_require__.r = (exports) => {
94+
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
95+
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
96+
/******/ }
97+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
98+
/******/ };
99+
/******/ })();
100+
/******/
101+
/************************************************************************/
102+
var __webpack_exports__ = {};
103+
// This entry need to be wrapped in an IIFE because it need to be in strict mode.
104+
(() => {
105+
"use strict";
106+
/*!**********************!*\
107+
!*** ./src/index.js ***!
108+
\**********************/
109+
__webpack_require__.r(__webpack_exports__);
110+
/* harmony import */ var _import1_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./import1.scss */ "./src/import1.scss");
111+
/* harmony import */ var _import1_scss__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_import1_scss__WEBPACK_IMPORTED_MODULE_0__);
112+
/* harmony import */ var _import2_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./import2.scss */ "./src/import2.scss");
113+
/* harmony import */ var _import2_scss__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_import2_scss__WEBPACK_IMPORTED_MODULE_1__);
114+
/* harmony import */ var _import3_scss_inline__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./import3.scss?inline */ "./src/import3.scss?inline");
115+
/* harmony import */ var _import3_scss_inline__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_import3_scss_inline__WEBPACK_IMPORTED_MODULE_2__);
116+
// These two imports are not included in the bundled css when running `webpack --mode development`.
117+
// However, they are included in the bundled css when running `webpack --mode production`.
118+
119+
120+
121+
// This css is always properly inlined in the HTML file.
122+
// Interestingly, if you comment this line out, then it fixes the issue with thea above imports
123+
// (they will be properly included in the bundled css in development mode).
124+
125+
126+
console.log("Hello World!");
127+
128+
})();
129+
130+
/******/ })()
131+
;

‎test/cases/js-import-scss-and-inline-scss-dev/src/import1.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.import1 {
2+
color: red;
3+
}

‎test/cases/js-import-scss-and-inline-scss-dev/src/import2.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.import2 {
2+
color: green;
3+
}

‎test/cases/js-import-scss-and-inline-scss-dev/src/import3.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.import3 {
2+
color: blue;
3+
}

‎test/cases/js-import-scss-and-inline-scss-dev/src/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<title>Test</title>
5+
</head>
6+
<body>
7+
<p class="import1">This text should be red (import1.scss)</p>
8+
<p class="import2">This text should be green (import2.scss)</p>
9+
<p class="import3">This text should be blue (import3.scss)</p>
10+
<script src="index.js"></script>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)