test: add an example of the custom plugin using the plugin hook to create a second css bundle, processed by rtlcss

webdiscus · webdiscus · commit de494cfd2768 · 2023-12-08T23:11:41.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -125,6 +125,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.14.19",
+    "@test/html-bundler-webpack-plugin": "file:./",
     "@test-fixtures/js": "0.0.2",
     "@test-fixtures/dius": "file:./test/fixtures/node_modules/dius/",
     "@test-fixtures/lorem": "file:./test/fixtures/node_modules/lorem/",
@@ -146,6 +147,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "responsive-loader": "^3.1.2",
+    "rtlcss": "^4.1.1",
     "sass": "1.67.0",
     "sass-loader": "13.3.2",
     "sharp": "^0.32.6",
diff --git a/test/cases/hook-beforeEmit-rtlcss/expected/img/image.697ef306.png b/test/cases/hook-beforeEmit-rtlcss/expected/img/image.697ef306.png
diff --git a/test/cases/hook-beforeEmit-rtlcss/expected/index.html b/test/cases/hook-beforeEmit-rtlcss/expected/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test</title>
+  <link href="style.97b286be.css" rel="stylesheet" /><link href="style.97b286be.rtl.css" rel="stylesheet" />
+  <script src="main.5317c1f6.js" defer="defer"></script>
+</head>
+<body>
+  <h1>Hello World!</h1>
+  <img src="img/image.697ef306.png" alt="picture">
+</body>
+</html>
diff --git a/test/cases/hook-beforeEmit-rtlcss/expected/main.5317c1f6.js b/test/cases/hook-beforeEmit-rtlcss/expected/main.5317c1f6.js
@@ -0,0 +1 @@
+console.log(">> main");
diff --git a/test/cases/hook-beforeEmit-rtlcss/expected/style.97b286be.css b/test/cases/hook-beforeEmit-rtlcss/expected/style.97b286be.css
@@ -0,0 +1,8 @@
+body {
+  background-image: url(img/image.697ef306.png);
+  direction: ltr;
+}
+
+h1 {
+  color: red;
+}
diff --git a/test/cases/hook-beforeEmit-rtlcss/expected/style.97b286be.rtl.css b/test/cases/hook-beforeEmit-rtlcss/expected/style.97b286be.rtl.css
@@ -0,0 +1,8 @@
+body {
+  background-image: url(img/image.697ef306.png);
+  direction: rtl;
+}
+
+h1 {
+  color: red;
+}
diff --git a/test/cases/hook-beforeEmit-rtlcss/src/image.png b/test/cases/hook-beforeEmit-rtlcss/src/image.png
diff --git a/test/cases/hook-beforeEmit-rtlcss/src/index.html b/test/cases/hook-beforeEmit-rtlcss/src/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test</title>
+  <link href="./style.css" rel="stylesheet" />
+  <script src="./main.js" defer="defer"></script>
+</head>
+<body>
+  <h1>Hello World!</h1>
+  <img src="./image.png" alt="picture">
+</body>
+</html>
diff --git a/test/cases/hook-beforeEmit-rtlcss/src/main.js b/test/cases/hook-beforeEmit-rtlcss/src/main.js
@@ -0,0 +1 @@
+console.log('>> main');
diff --git a/test/cases/hook-beforeEmit-rtlcss/src/style.css b/test/cases/hook-beforeEmit-rtlcss/src/style.css
@@ -0,0 +1,8 @@
+body {
+  background-image: url('./image.png');
+  direction: ltr;
+}
+
+h1 {
+  color: red;
+}
diff --git a/test/cases/hook-beforeEmit-rtlcss/webpack.config.js b/test/cases/hook-beforeEmit-rtlcss/webpack.config.js
@@ -0,0 +1,99 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+const rtlCss = require('rtlcss');
+
+module.exports = {
+  mode: 'production',
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './src/index.html?lang=en',
+      },
+
+      js: {
+        filename: '[name].[contenthash:8].js',
+        chunkFilename: '[name].[contenthash:8].chunk.js',
+      },
+
+      css: {
+        filename: '[name].[contenthash:8].css',
+        chunkFilename: '[name].[contenthash:8].chunk.css',
+      },
+    }),
+
+    // The example of the plugin to create a second css bundle, processed by rtlcss.
+    {
+      apply(compiler) {
+        const pluginName = 'myPlugin';
+        const { RawSource } = compiler.webpack.sources;
+
+        // the Webpack hook
+        compiler.hooks.compilation.tap(pluginName, (compilation) => {
+          const hooks = HtmlBundlerPlugin.getHooks(compilation);
+
+          // the Bundler Plugin hook
+          hooks.beforeEmit.tap(pluginName, (content, entry) => {
+            // explain the structure of the `entry` object
+            //console.dir({ hook: 'beforeEmit', entry }, { depth: 5 });
+
+            entry.assets.forEach((asset) => {
+              const { type, assetFile, inline } = asset;
+
+              if (type !== 'style') return;
+
+              let cssSource = compilation.assets[assetFile].source();
+              let rtlResult = rtlCss.process(cssSource);
+              let rtlAssetFile = assetFile.replace('.css', '.rtl.css');
+
+              if (!inline) {
+                // add new CSS file into compilation
+                compilation.assets[rtlAssetFile] = new RawSource(rtlResult);
+
+                // find inject pos: after the last <link> tag
+                // TODO: implement your logic to find an inject pos
+                let pos = content.lastIndexOf('<link');
+                if (pos > -1) {
+                  let injectPos = content.indexOf('>', pos);
+                  // inject the style tag with rtl CSS into HTML
+                  if (injectPos > -1) {
+                    injectPos++;
+                    content =
+                      content.slice(0, injectPos) +
+                      `<link href="${rtlAssetFile}" rel="stylesheet" />` +
+                      content.slice(injectPos);
+                  }
+                }
+              } else {
+                // TODO: if CSS asset is inlined inject the <style> tag into HTML
+              }
+            });
+
+            return content;
+          });
+        });
+      },
+    },
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['css-loader'],
+      },
+
+      {
+        test: /\.(png|jpe?g|ico|svg)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'img/[name].[hash:8][ext]',
+        },
+      },
+    ],
+  },
+};
diff --git a/test/integration.test.js b/test/integration.test.js
@@ -131,6 +131,7 @@ describe('plugin hooks', () => {
 
   test('postprocess', () => compareFiles('hook-postprocess'));
   test('beforeEmit', () => compareFiles('hook-beforeEmit'));
+  test('using beforeEmit for rtlcss', () => compareFiles('hook-beforeEmit-rtlcss'));
 
   // TODO: add an argument as flat map of assets, w/o tree, to create a manifest
   test('afterEmit', () => compareFiles('hook-afterEmit'));
