test: add test for special use case

Author: webdiscus

test/cases/css-import-dynamic-custom/expected/desktop.css

@@ -0,0 +1,3 @@
+.desktop {
+  color: green;
+}

test/cases/css-import-dynamic-custom/expected/main.js

@@ -0,0 +1,3 @@
+.mobile {
+  color: red;
+}

test/cases/css-import-dynamic-custom/expected/mobile.css

@@ -0,0 +1,6 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+

test/cases/css-import-dynamic-custom/expected/style.css

@@ -0,0 +1,3 @@
+.desktop {
+  color: green;
+}

test/cases/css-import-dynamic-custom/src/desktop.css

@@ -0,0 +1,27 @@
+import mobileHref from './mobile.css?rawurl';
+import desktopHref from './desktop.css?rawurl';
+
+/**
+ * Your custom dynamic CSS loader.
+ *
+ * @param {string} href
+ */
+function loadCss(href) {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = href;
+  document.head.appendChild(link);
+}
+
+let isMobile = false;
+let isDesktop = true;
+
+if (isMobile) {
+  loadCss(mobileHref);
+}
+
+if (isDesktop) {
+  loadCss(desktopHref);
+}
+
+console.log('main', { isMobile, isDesktop });

test/cases/css-import-dynamic-custom/src/main.js

@@ -0,0 +1,3 @@
+.mobile {
+  color: red;
+}

test/cases/css-import-dynamic-custom/src/mobile.css

@@ -0,0 +1,5 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+}

test/cases/css-import-dynamic-custom/src/style.css

@@ -0,0 +1,31 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
+
+module.exports = {
+  mode: 'production',
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+  entry: {
+    main: ['./src/main.js' ],
+    style: ['./src/style.css'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        oneOf: [
+          { resourceQuery: /rawurl/, type: 'asset/resource', generator: { filename: '[name].css' } }, // ?rawurl => returns URL string
+          { use: [MiniCssExtractPlugin.loader, 'css-loader'] } // normal imports
+        ]
+      }
+    ],
+  },
+  plugins: [
+    new RemoveEmptyScriptsPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+  ],
+};

test/cases/css-import-dynamic-custom/webpack.config.js

@@ -17,6 +17,7 @@ describe('common use case tests', () => {
   test('css-entry-only', () => compareFiles( 'css-entry-only'));
   test('css-import', () => compareFiles( 'css-import'));
   test('css-import-dynamic', () => compareFiles( 'css-import-dynamic'));
+  test('css-import-dynamic-custom', () => compareFiles( 'css-import-dynamic-custom'));
   test('css-entry-with-ignored-hmr', () => compareFiles( 'css-entry-with-ignored-hmr', false));
   test('css-entry-with-query', () => compareFiles( 'css-entry-with-query'));
   test('multi-configuration', () => compareFiles( 'multi-configuration'));