chore: add some webpack plugins to examples/webpack_cli (#640)

WORKSPACE

@@ -80,6 +80,11 @@ npm_translate_lock(
             "no-remote-exec",
             "requires-network",
         ],
+        "esbuild": [
+            # Workaround Engflow not honoring requires-network on build actions
+            "no-remote-exec",
+            "requires-network",
+        ],
     },
     patch_args = {
         "@gregmagolan/test-a": ["-p1"],

examples/webpack_cli/BUILD.bazel

@@ -6,31 +6,27 @@ npm_link_all_packages(
     name = "node_modules",
 )
 
-js_test(
-    name = "test",
-    data = [
-        ":node_modules/mathjs",
-        ":package.json",
-    ],
-    entry_point = "index.js",
-)
-
 js_library(
     name = "lib",
     srcs = [
+        "index.css.ts",
         "index.js",
         "package.json",
     ],
     deps = [
+        ":node_modules/@vanilla-extract/css",
+        ":node_modules/@vanilla-extract/webpack-plugin",
+        ":node_modules/css-loader",
         ":node_modules/mathjs",
+        ":node_modules/mini-css-extract-plugin",
     ],
 )
 
 bin.webpack_cli(
     name = "bundle",
     srcs = [
-        "webpack.config.js",
         ":lib",
+        ":webpack.config.js",
     ],
     outs = [
         "dist/main.js",
@@ -41,3 +37,8 @@ bin.webpack_cli(
     chdir = package_name(),
     log_level = "debug",
 )
+
+js_test(
+    name = "test",
+    entry_point = "dist/main.js",
+)

examples/webpack_cli/index.css.ts

@@ -0,0 +1,3 @@
+import { style } from '@vanilla-extract/css'
+
+export const someStyle = style({ display: 'block' })

examples/webpack_cli/index.js

@@ -10,6 +10,7 @@ const {
     round,
     sqrt,
 } = require('mathjs')
+import { someStyle } from './index.css'
 
 // functions and constants
 round(e, 3) // 2.718
@@ -34,3 +35,5 @@ evaluate('det([-1, 2; 3, 1])') // -7
 
 // chaining
 chain(3).add(4).multiply(2).done() // 14
+
+console.log('someStyle className is ', someStyle)

examples/webpack_cli/package.json

@@ -1,8 +1,16 @@
 {
+    "name": "webpack_cli_example",
     "private": true,
     "dependencies": {
-        "mathjs": "10.6.1",
-        "webpack-cli": "4.10.0",
-        "webpack": "5.73.0"
+        "@vanilla-extract/css": "1.9.2",
+        "css-loader": "6.7.2",
+        "mathjs": "11.4.0"
+    },
+    "devDependencies": {
+        "@vanilla-extract/webpack-plugin": "2.2.0",
+        "css-loader": "6.7.2",
+        "mini-css-extract-plugin": "2.7.0",
+        "webpack": "5.75.0",
+        "webpack-cli": "5.0.0"
     }
 }

examples/webpack_cli/webpack.config.js

@@ -1,16 +1,37 @@
 const path = require('path')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin')
 
 const out_path = path.resolve(__dirname, 'dist')
 
-module.exports = (webpackEnv = {}) => {
-    return {
-        entry: path.join(__dirname, 'index.js'),
-        // stats: 'verbose',
-        mode: 'development',
-        stats: 'detailed',
-        output: {
-            filename: 'main.js',
-            path: out_path,
-        },
-    }
+module.exports = {
+    entry: path.join(__dirname, 'index.js'),
+    stats: 'verbose',
+    mode: 'development',
+    stats: 'detailed',
+    resolve: {
+        extensions: ['.js', '.ts'],
+    },
+    devtool: 'source-map',
+    output: {
+        filename: 'main.js',
+        path: out_path,
+    },
+    module: {
+        rules: [
+            {
+                test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: require.resolve('css-loader'),
+                        options: {
+                            url: false, // Required as image imports should be handled via JS/TS import statements
+                        },
+                    },
+                ],
+            },
+        ],
+    },
+    plugins: [new VanillaExtractPlugin(), new MiniCssExtractPlugin()],
 }