CSS Loading

Bundle provides a custom CSS loader plugin for Bun that just works™. Built on top of Lightning CSS. You’ll need to install Lightning CSS as a dependency.

Simply run php artisan bundle:install in your terminal. You will be prompted to select a CSS loading method. Choose CSS.

Afterwards you may use x-import to load css files directly. Bundle transpiles it and injects it on your page 🚀

<x-import module="tippy.js" as="tippy" />
<x-import module="tippy.js/dist/tippy.css" />

Sass

You can use Bundle to compile Sass on the fly. You’ll need to install both Sass & Lightning CSS in your project. Bundle takes care of the rest.

Simply run php artisan bundle:install in your terminal. You will be prompted to select a CSS loading method. Choose Sass.

Due to a unresolved issue Bun is not able to auto-install LightningCSS & Sass on the fly. When this issue is fixed you won’t have to install these dependencies yourself. Bun will automatically install them when needed 💅

Local CSS loading

This works similarly to local modules. Simply add a new path alias to your jsconfig.json file.

{
  "compilerOptions": {
    "paths": {
      "~/css": ["./resources/css/*"]
    }
  }
}

Now you can load css from your resources directory.

<x-import module="~/css/foo-bar.css" />

Browser targeting

Bundle automatically compiles many modern CSS syntax features to more compatible output that is supported in your target browsers. This includes some features that are not supported by browsers yet, like nested selectors, custom media queries, high gamut color spaces e.t.c. Without using a preprocessor like Sass. Check here for the list of the many cool new syntaxes Lightning CSS supports.

You can define what browsers to target using your package.json file:

{
  "browserslist": ["last 2 versions", ">= 1%", "IE 11"]
}

Bundle currently only supports browserslist using your package.json file. A dedicated .browserslistrc is not suppported at this time.