feat: add support for dynamic import of styles

webdiscus · webdiscus · commit 54fa5e8e3a84 · 2024-04-07T23:07:49.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Change log
 
+## 3.9.0 (2024-04-07)
+
+- feat: add support for dynamic import of styles
+  ```
+  const loadStyles = () => import('./component.scss');
+  loadStyles();
+  ```
+- fix: extract CSS from styles imported in dynamically imported JS
+
 ## 3.8.0 (2024-04-06)
 
 - feat(Pug): add experimental (undocumented) syntax to include (using `?include` query) compiled CSS directly into style tag to allow keep tag attributes
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "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.",
   "keywords": [
     "html",
diff --git a/src/Plugin/Collection.js b/src/Plugin/Collection.js
@@ -486,23 +486,36 @@ class Collection {
     let order = '';
 
     const walk = (module) => {
-      const { dependencies } = module;
+      // dependencies contains modules from normal imports, e.g. import './main.js'
+      // blocks contains modules from dynamic imports, e.g. import('./main.js')
+      const { dependencies, blocks } = module;
       const result = [];
+      let allDependencies = dependencies;
 
       // avoid an infinity walk by circular dependency
       if (circularDependencyIds.has(module.debugId)) {
         return result;
       }
       circularDependencyIds.add(module.debugId);
 
-      for (const dependency of dependencies) {
+      // add dynamic imports
+      if (blocks.length > 0) {
+        for (const block of blocks) {
+          if (block.dependencies.length > 0) {
+            allDependencies = allDependencies.concat(block.dependencies);
+          }
+        }
+      }
+
+      for (const dependency of allDependencies) {
         // TODO: detect whether the userRequest is a file, not a runtime, e.g. of vue
         if (
           !dependency.userRequest ||
           // skip vue runtime dependencies
           dependency.userRequest === 'vue'
-        )
+        ) {
           continue;
+        }
 
         let depModule = moduleGraph.getModule(dependency);
 
@@ -519,7 +532,7 @@ class Collection {
 
         const index = moduleGraph.getParentBlockIndex(dependency);
 
-        if (depModule.dependencies.length > 0) {
+        if (depModule.dependencies.length > 0 || depModule.blocks.length > 0) {
           // save current order before recursive walking
           orderStack.push(order);
           order += (order ? '.' : '') + index;
diff --git a/test/cases/js-import-css-dynamic-import/expected/120.js b/test/cases/js-import-css-dynamic-import/expected/120.js
diff --git a/test/cases/js-import-css-dynamic-import/expected/70.js b/test/cases/js-import-css-dynamic-import/expected/70.js
@@ -0,0 +1 @@
+(self.webpackChunk=self.webpackChunk||[]).push([[70],{70:()=>{}}]);
diff --git a/test/cases/js-import-css-dynamic-import/expected/758.js b/test/cases/js-import-css-dynamic-import/expected/758.js
@@ -0,0 +1 @@
+(self.webpackChunk=self.webpackChunk||[]).push([[758],{758:()=>{}}]);
diff --git a/test/cases/js-import-css-dynamic-import/expected/851.js b/test/cases/js-import-css-dynamic-import/expected/851.js
diff --git a/test/cases/js-import-css-dynamic-import/expected/942.js b/test/cases/js-import-css-dynamic-import/expected/942.js
@@ -0,0 +1 @@
+(self.webpackChunk=self.webpackChunk||[]).push([[942],{942:()=>{}}]);
diff --git a/test/cases/js-import-css-dynamic-import/expected/index.html b/test/cases/js-import-css-dynamic-import/expected/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Home</title>
+  <link href="main.879f66d3.css" rel="stylesheet">
+<script src="main.8a1510f2.js" defer="defer"></script>
+</head>
+<body>
+  <h1>Home</h1>
+  <div class="a1">lawngreen</div>
+  <div class="a2">slateblue</div>
+  <div class="b1">darkmagenta</div>
+  <div class="c1">indianred</div>
+</body>
+</html>
diff --git a/test/cases/js-import-css-dynamic-import/expected/main.879f66d3.css b/test/cases/js-import-css-dynamic-import/expected/main.879f66d3.css
@@ -0,0 +1,15 @@
+.b1 {
+  color: darkmagenta;
+}
+h1 {
+  color: orangered;
+}
+.a1 {
+  color: lawngreen;
+}
+.a2 {
+  color: slateblue;
+}
+.c1 {
+  color: indianred;
+}
diff --git a/test/cases/js-import-css-dynamic-import/expected/main.8a1510f2.js b/test/cases/js-import-css-dynamic-import/expected/main.8a1510f2.js
diff --git a/test/cases/js-import-css-dynamic-import/src/component-a.js b/test/cases/js-import-css-dynamic-import/src/component-a.js
@@ -0,0 +1,4 @@
+import './component-a1.css';
+import './component-a2.css';
+
+console.log('>> component a');
diff --git a/test/cases/js-import-css-dynamic-import/src/component-a1.css b/test/cases/js-import-css-dynamic-import/src/component-a1.css
@@ -0,0 +1,3 @@
+.a1 {
+  color: lawngreen;
+}
diff --git a/test/cases/js-import-css-dynamic-import/src/component-a2.css b/test/cases/js-import-css-dynamic-import/src/component-a2.css
@@ -0,0 +1,3 @@
+.a2 {
+  color: slateblue;
+}
diff --git a/test/cases/js-import-css-dynamic-import/src/component-b.js b/test/cases/js-import-css-dynamic-import/src/component-b.js
@@ -0,0 +1,8 @@
+// dynamic load styles
+const loadStyles = () => import('./component-b1.css');
+loadStyles();
+
+// normal import
+//import './component-b1.css';
+
+console.log('>> component b');
diff --git a/test/cases/js-import-css-dynamic-import/src/component-b1.css b/test/cases/js-import-css-dynamic-import/src/component-b1.css
@@ -0,0 +1,3 @@
+.b1 {
+  color: darkmagenta;
+}
diff --git a/test/cases/js-import-css-dynamic-import/src/component-c.js b/test/cases/js-import-css-dynamic-import/src/component-c.js
@@ -0,0 +1,4 @@
+// dynamic import of the style in the dynamic imported js
+import('./component-c1.css');
+
+console.log('>> component c');
diff --git a/test/cases/js-import-css-dynamic-import/src/component-c1.css b/test/cases/js-import-css-dynamic-import/src/component-c1.css
@@ -0,0 +1,3 @@
+.c1 {
+  color: indianred;
+}
diff --git a/test/cases/js-import-css-dynamic-import/src/index.html b/test/cases/js-import-css-dynamic-import/src/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Home</title>
+  <script src="./main.js" defer="defer"></script>
+</head>
+<body>
+  <h1>Home</h1>
+  <div class="a1">lawngreen</div>
+  <div class="a2">slateblue</div>
+  <div class="b1">darkmagenta</div>
+  <div class="c1">indianred</div>
+</body>
+</html>
diff --git a/test/cases/js-import-css-dynamic-import/src/main.js b/test/cases/js-import-css-dynamic-import/src/main.js
@@ -0,0 +1,15 @@
+// dynamic import
+import('./style.css');
+
+// dynamic import
+import('./component-a.js');
+
+// normal import
+import './component-b.js';
+
+// dynamic import
+import('./component-c.js').then(() => {
+  console.log('>> after load component-c');
+});
+
+console.log('>> main');
diff --git a/test/cases/js-import-css-dynamic-import/src/style.css b/test/cases/js-import-css-dynamic-import/src/style.css
@@ -0,0 +1,3 @@
+h1 {
+  color: orangered;
+}
diff --git a/test/cases/js-import-css-dynamic-import/webpack.config.js b/test/cases/js-import-css-dynamic-import/webpack.config.js
@@ -0,0 +1,33 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './src/index.html',
+      },
+      js: {
+        filename: '[name].[contenthash:8].js',
+      },
+      css: {
+        filename: '[name].[contenthash:8].css',
+      },
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(css)/,
+        use: ['css-loader'],
+      },
+    ],
+  },
+};
diff --git a/test/integration.test.js b/test/integration.test.js
@@ -282,6 +282,10 @@ describe('inline styles & scripts', () => {
 
 describe('import styles in JavaScript', () => {
   test('import css in js', () => compareFiles('js-import-css'));
+
+  // dynamic import of the style in the dynamic imported js
+  test('dynamic import css in js', () => compareFiles('js-import-css-dynamic-import'));
+
   test('import css in ts, verbose', () => compareFiles('js-import-css-ts'));
   test('import scss in js', () => compareFiles('js-import-scss'));
   test('simple import CJS', () => compareFiles('js-import-css-cjs'));

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": "3.8.0",`
	`3`	`+ "version": "3.9.0",`
`4`	`4`	`"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.",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"html",`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+(self.webpackChunk=self.webpackChunk\|\|[]).push([[70],{70:()=>{}}]);`