test: add test for inline css via query

webdiscus · Nov 22, 2024 · c278340 · c278340
1 parent 22a39db
commit c278340
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 0 deletions.
diff --git a/test/cases/inline-style-query2/expected/index.html b/test/cases/inline-style-query2/expected/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Home</title>
+    <!-- inline CSS -->
+    <style>.index-css-inline {
+  color: red;
+}
+</style>
+    <style>.style-css-inline {
+  color: green;
+}
+</style>
+
+    <!-- resolve CSS file -->
+    <link href="style-file.e2174e16.css" rel="stylesheet" />
+
+    <!-- inline JS -->
+    <script>console.log(">> index.js");</script>
+  </head>
+  <body>
+    <h1>Home</h1>
+    <div class="index-css-inline">1</div>
+    <div class="style-css-inline">2</div>
+    <div class="style-css-file">3</div>
+  </body>
+</html>
diff --git a/test/cases/inline-style-query2/expected/style-file.e2174e16.css b/test/cases/inline-style-query2/expected/style-file.e2174e16.css
@@ -0,0 +1,3 @@
+.style-css-file {
+  color: blue;
+}
diff --git a/test/cases/inline-style-query2/src/css/index.css b/test/cases/inline-style-query2/src/css/index.css
@@ -0,0 +1,3 @@
+.index-css-inline {
+  color: red;
+}
diff --git a/test/cases/inline-style-query2/src/css/style-file.css b/test/cases/inline-style-query2/src/css/style-file.css
@@ -0,0 +1,3 @@
+.style-css-file {
+  color: blue;
+}
diff --git a/test/cases/inline-style-query2/src/css/style.css b/test/cases/inline-style-query2/src/css/style.css
@@ -0,0 +1,3 @@
+.style-css-inline {
+  color: green;
+}
diff --git a/test/cases/inline-style-query2/src/index.html b/test/cases/inline-style-query2/src/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Home</title>
+    <!-- inline CSS -->
+    <link href="./css/index.css?inline" rel="stylesheet" />
+    <link href="./css/style.css?inline" rel="stylesheet" />
+
+    <!-- resolve CSS file -->
+    <link href="./css/style-file.css" rel="stylesheet" />
+
+    <!-- inline JS -->
+    <script src="./js/index.js?inline" defer="defer"></script>
+  </head>
+  <body>
+    <h1>Home</h1>
+    <div class="index-css-inline">1</div>
+    <div class="style-css-inline">2</div>
+    <div class="style-css-file">3</div>
+  </body>
+</html>
diff --git a/test/cases/inline-style-query2/src/js/index.js b/test/cases/inline-style-query2/src/js/index.js
@@ -0,0 +1 @@
+console.log('>> index.js');
diff --git a/test/cases/inline-style-query2/webpack.config.js b/test/cases/inline-style-query2/webpack.config.js
@@ -0,0 +1,31 @@
+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',
+      },
+      css: {
+        filename: '[name].[contenthash:8].css',
+      },
+      verbose: true,
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.(css)$/,
+        use: ['css-loader'],
+      },
+    ],
+  },
+};
diff --git a/test/integration.test.js b/test/integration.test.js
@@ -248,6 +248,8 @@ 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'));