Feature/css loader

src/Bundlers/Bun.php → src/Bundlers/Bun/Bun.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace Leuverink\Bundle\Bundlers;
+namespace Leuverink\Bundle\Bundlers\Bun;
 
 use SplFileInfo;
 use Illuminate\Support\Facades\Process;

src/Bundlers/Bun/bin/bun.js

@@ -0,0 +1,64 @@
+import { parseArgs } from "util";
+import cssLoader from "./plugins/css-loader";
+
+const options = parseArgs({
+    args: Bun.argv,
+    strict: true,
+    allowPositionals: true,
+
+    options: {
+        entrypoint: {
+            type: "string",
+        },
+
+        inputPath: {
+            type: "string",
+        },
+
+        outputPath: {
+            type: "string",
+        },
+
+        sourcemaps: {
+            type: "boolean",
+        },
+
+        minify: {
+            type: "boolean",
+        },
+    },
+}).values;
+
+const result = await Bun.build({
+    entrypoints: [options.entrypoint],
+    publicPath: options.outputPath,
+    outdir: options.outputPath,
+    root: options.inputPath,
+    minify: options.minify,
+
+    sourcemap: options.sourcemaps ? "external" : "none",
+
+    naming: {
+        entry: '[dir]/[name].[ext]',
+        chunk: "chunks/[name]-[hash].[ext]", // Not in use without --splitting
+        asset: "assets/[name]-[hash].[ext]", // Not in use without --splitting
+    },
+
+    target: "browser",
+    format: "esm",
+
+    plugins: [
+        cssLoader({
+            minify: options.minify,
+            sourcemaps: options.sourcemaps
+        })
+    ]
+});
+
+if (!result.success) {
+    console.error("Build failed");
+    for (const message of result.logs) {
+        console.error(message);
+    }
+    process.exit(1); // Exit with an error code
+}

src/Bundlers/Bun/bin/plugins/css-loader.js

@@ -0,0 +1,65 @@
+import { transform, browserslistToTargets } from "lightningcss-wasm";
+import { readFile } from "fs/promises";
+
+const defaultOptions = {
+    targets: [],
+    minify: true
+};
+
+export default function (options = {}) {
+
+    return {
+        name: "css-loader",
+        async setup(build) {
+
+            build.onLoad({ filter: /\.css$|\.scss$/ }, async (args) => {
+
+                const css = await compile(args, { ...defaultOptions, ...options })
+
+                return {
+                    contents: `export default ${css};`,
+                    loader: "js",
+                }
+            })
+        }
+    }
+}
+
+const compile = async function (args, opts) {
+
+    const imports = [];
+    const source = await readFile(args.path, "utf8");
+    const targets = opts.targets?.length
+        ? browserslistToTargets(opts.targets)
+        : undefined;
+
+    const { code } = transform({
+        code: Buffer.from(source),
+        filename: args.path,
+
+        minify: opts.minify,
+        sourceMap: opts.sourcemaps,
+        targets,
+        visitor: {
+            Rule: {
+                import(rule) {
+                    imports.push(rule.value.url);
+                    return [];
+                },
+            },
+        },
+    });
+
+    const css = JSON.stringify(code.toString())
+
+    if (!imports.length) {
+        return css
+    }
+
+    const imported = imports
+        .map((url, i) => `import _css${i} from "${url}";`)
+        .join("\n");
+    const exported = imports.map((_, i) => `_css${i}`).join(" + ");
+
+    return `${imported}\nexport default ${exported} + ${css};`
+}

src/Components/Import.php

@@ -25,10 +25,10 @@ public function render()
         }
     }
 
-    /** Builds the core JavaScript & packages it up in a bundle */
+    /** Builds the imported JavaScript & packages it up in a bundle */
     protected function bundle()
     {
-        $js = $this->core();
+        $js = $this->import();
 
         // Render script tag with bundled code
         return view('x-import::script', [
@@ -58,8 +58,8 @@ protected function raiseConsoleErrorOrException(BundlingFailedException $e)
         HTML;
     }
 
-    /** Builds Bundle's core JavaScript */
-    protected function core(): string
+    /** Builds a bundle for the JavaScript import */
+    protected function import(): string
     {
         return <<< JS
             //--------------------------------------------------------------------------
@@ -84,6 +84,13 @@ protected function core(): string
                     }
                 }
 
+                // Handle CSS injection & return early (no need to add css to import map)
+                if('{$this->module}'.endsWith('.css') || '{$this->module}'.endsWith('.scss')) {
+                    return import('{$this->module}').then(result => {
+                        window.x_inject_styles(result.default, previous)
+                    })
+                }
+
                 // Assign the import to the window.x_import_modules object (or invoke IIFE)
                 '{$this->as}'
                     // Assign it under an alias

src/InjectCore.php

@@ -140,6 +140,23 @@ protected function core(): string
                 }
             };
 
+            //--------------------------------------------------------------------------
+            // Inject styles
+            //--------------------------------------------------------------------------
+            window.x_inject_styles = function (css, scriptTag) {
+                if (typeof document === 'undefined') {
+                    return;
+                }
+
+                // TODO: Add CSP nonce when adding CSP support
+                const style = document.createElement('style');
+                style.dataset['module'] = scriptTag.dataset['module'];
+                style.innerHTML = css;
+
+                // Inject the style tag after the script that invoked this function
+                scriptTag.parentNode.insertBefore(style, scriptTag.nextSibling);
+            }
+
         JS;
     }
 }

src/ServiceProvider.php

@@ -4,12 +4,12 @@
 
 namespace Leuverink\Bundle;
 
-use Leuverink\Bundle\Bundlers\Bun;
 use Leuverink\Bundle\Commands\Build;
 use Leuverink\Bundle\Commands\Clear;
 use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\Facades\Event;
 use Illuminate\Support\Facades\Route;
+use Leuverink\Bundle\Bundlers\Bun\Bun;
 use Leuverink\Bundle\Components\Import;
 use Illuminate\Foundation\Http\Events\RequestHandled;
 use Illuminate\Support\ServiceProvider as BaseServiceProvider;