Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
gwleuverink committed Jun 20, 2024
1 parent 261b339 commit 0037e0c
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 9 deletions.
10 changes: 3 additions & 7 deletions docs/css-loading.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,12 @@ image: "/assets/social-square.png"

## CSS Loading

**Beta**

Bun doesn't ship with a CSS loader. They have it on [the roadmap](https://github.com/oven-sh/bun/issues/159){:target="\_blank"} but no release date is known at this time.

We provide a custom CSS loader plugin that just works™. Built on top of [Lightning CSS](https://lightningcss.dev/).
Bundle provides a custom CSS loader plugin for Bun that just works™. Built on top of [Lightning CSS](https://lightningcss.dev/).
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 with zero effort.
Afterwards you may use `x-import` to load css files directly. Bundle transpiles it and injects it on your page 🚀

```html
<x-import module="tippy.js" as="tippy" />
Expand Down Expand Up @@ -69,7 +65,7 @@ Now you can load css from your resources directory.

### 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 & media queries, without using a preprocessor like Sass. [Check here](https://lightningcss.dev/transpilation.html#syntax-lowering) for the list of the many cool new syntaxes Lightning CSS supports.
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](https://lightningcss.dev/transpilation.html#syntax-lowering) for the list of the many cool new syntaxes Lightning CSS supports.

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

Expand Down
2 changes: 0 additions & 2 deletions docs/local-modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,6 @@ When importing this module you can omit the `as` prop. Axios will be available o

Note that your consuming script still needs to be of `type="module"` otherwise `window.axios` will be undefined.

It is also good to point out (again) that Bundle's primary goal is to get imports inside your Blade template. While the init strategy can be very powerful, it is not the place to put a lot of business code since can be a lot harder to debug.

{: .warning }
> Code splitting is [not supported](https://laravel-bundle.dev/caveats.html#code-splitting). Be careful when importing modules in your local scripts like this. When two script rely on the same dependency, it will be included in both bundles. This approach is meant to allow setup of more complex libraries. It is recommended to add complex code inside your templates instead and only use Bundle for importing libraries.
Expand Down

0 comments on commit 0037e0c

Please sign in to comment.