Various updates (#117)

* fix: remove '~' prefix to support css-loader style import

* fix: ignore vite processed files in src attr transform

* fix: set config.base from BASE_URL env var

* chore: add changeset

* fix: inconsistent test

* fix: test snapshot hash replacement

* chore: update readme

Author: rturnq

.changeset/bright-bags-draw.md

@@ -0,0 +1,5 @@
+---
+"@marko/vite": patch
+---
+
+Support css-loader imports, limit relative src attribute transforms, support BASE_URL env var

README.md

@@ -49,6 +49,12 @@ export default defineConfig({
 });
 ```
 
+# Base paths
+
+When deploying an application under a nested public path, use Vite's [`base` option](https://vitejs.dev/config/shared-options.html#base) to specify a path to prefix all assets. This option can also be specified with the `BASE_URL` environment variable.
+
+If the base path is not static, see the [basePathVar](#optionsbasepathvar) option for handling more advanced cases.
+
 # Browser asset references
 
 With @marko/vite when a _static relative path_ is used for certain native tag attributes, the relative asset will be imported and processed by Vite.
@@ -62,7 +68,7 @@ As an example, with the following template, the `logo.svg` will be imported and
 <img src="/assets/logo-TwEWmgMb.svg">
 ```
 
-You can see the list of elements and their attributes which are processed [here](./src/relative-assets-transform.ts).
+Most common image, media, and font filetypes are transformed automatically but some file types such as `.js` and `.css` files will not be. Generally these should be imported directly and not rendered as markup. To force the transformation of a path, add `?url` to it. You can see the list of elements and their attributes which are processed [here](./src/relative-assets-transform.ts).
 
 # Linked Mode
 

package-lock.json

@@ -34,6 +34,7 @@
     "fixpack": "^4.0.0",
     "husky": "^9.0.11",
     "jsdom": "^24.0.0",
+    "less": "^4.2.0",
     "lint-staged": "^15.2.2",
     "marko": "^5.32.13",
     "mocha": "^10.3.0",

package.json

@@ -0,0 +1,13 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: false Clicks: 0
+    <img
+      alt="logo"
+      src="/some/base/path/assets/logo-[hash].svg"
+    />
+  </div>
+</div>

src/__tests__/fixtures/isomorphic-base-url/__snapshots__/build.expected.loading.0.html

@@ -0,0 +1,13 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 0
+    <img
+      alt="logo"
+      src="/some/base/path/assets/logo-[hash].svg"
+    />
+  </div>
+</div>

src/__tests__/fixtures/isomorphic-base-url/__snapshots__/build.expected.loading.1.html

@@ -0,0 +1,13 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 1
+    <img
+      alt="logo"
+      src="/some/base/path/assets/logo-[hash].svg"
+    />
+  </div>
+</div>

src/__tests__/fixtures/isomorphic-base-url/__snapshots__/build.expected.step-0.0.html

@@ -0,0 +1,13 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: false Clicks: 0
+    <img
+      alt="logo"
+      src="/some/base/path/src/components/logo.svg"
+    />
+  </div>
+</div>

src/__tests__/fixtures/isomorphic-base-url/__snapshots__/dev.expected.loading.0.html

@@ -0,0 +1,13 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 0
+    <img
+      alt="logo"
+      src="/some/base/path/src/components/logo.svg"
+    />
+  </div>
+</div>

src/__tests__/fixtures/isomorphic-base-url/__snapshots__/dev.expected.loading.1.html

@@ -0,0 +1,13 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 1
+    <img
+      alt="logo"
+      src="/some/base/path/src/components/logo.svg"
+    />
+  </div>
+</div>