Fix webp and avif support, test asset loading in fixture (#1181)

seek-oss · Feb 21, 2025 · 1f81ad8 · 1f81ad8
1 parent d67e569
commit 1f81ad8
Show file tree

Hide file tree

Showing 12 changed files with 89 additions and 104 deletions.
diff --git a/.changeset/orange-camels-give.md b/.changeset/orange-camels-give.md
@@ -0,0 +1,5 @@
+---
+'sku': patch
+---
+
+Fix `.webp` and `.avif` support
diff --git a/fixtures/public-path/src/app.css.js b/fixtures/public-path/src/app.css.js
@@ -1,8 +1,43 @@
 import { style } from '@vanilla-extract/css';
-import largeImage from './large-image.png';
+import largeImageAvif from './large-image.avif';
+import largeImageBmp from './large-image.bmp';
+import largeImageGif from './large-image.gif';
+import largeImageJpg from './large-image.jpg';
+import largeImagePng from './large-image.png';
+import largeImageWebp from './large-image.webp';
 
-export const root = style({
-  backgroundImage: `url(${largeImage})`,
+export const avif = style({
+  backgroundImage: `url(${largeImageAvif})`,
+  width: '1039px',
+  height: '240px',
+});
+
+export const bmp = style({
+  backgroundImage: `url(${largeImageBmp})`,
+  width: '1039px',
+  height: '240px',
+});
+
+export const gif = style({
+  backgroundImage: `url(${largeImageGif})`,
+  width: '1039px',
+  height: '240px',
+});
+
+export const jpg = style({
+  backgroundImage: `url(${largeImageJpg})`,
+  width: '1039px',
+  height: '240px',
+});
+
+export const png = style({
+  backgroundImage: `url(${largeImagePng})`,
+  width: '1039px',
+  height: '240px',
+});
+
+export const webp = style({
+  backgroundImage: `url(${largeImageWebp})`,
   width: '1039px',
   height: '240px',
 });
diff --git a/fixtures/public-path/src/app.js b/fixtures/public-path/src/app.js
@@ -1,3 +1,12 @@
 import * as styles from './app.css.js';
 
-export default () => <div className={styles.root} />;
+export default () => (
+  <>
+    <div className={styles.avif} />
+    <div className={styles.bmp} />
+    <div className={styles.gif} />
+    <div className={styles.jpg} />
+    <div className={styles.png} />
+    <div className={styles.webp} />
+  </>
+);
diff --git a/fixtures/public-path/src/large-image.avif b/fixtures/public-path/src/large-image.avif
diff --git a/fixtures/public-path/src/large-image.bmp b/fixtures/public-path/src/large-image.bmp
diff --git a/fixtures/public-path/src/large-image.gif b/fixtures/public-path/src/large-image.gif
diff --git a/fixtures/public-path/src/large-image.jpg b/fixtures/public-path/src/large-image.jpg
diff --git a/fixtures/public-path/src/large-image.webp b/fixtures/public-path/src/large-image.webp
diff --git a/packages/sku/src/config/jest/jest-preset.js b/packages/sku/src/config/jest/jest-preset.js
@@ -27,7 +27,7 @@ export default jestDecorator({
   ],
   moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
   moduleNameMapper: {
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|svg)$':
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|svg|avif)$':
       fileURLToPath(import.meta.resolve('./fileMock.cjs')),
   },
   transform: {

diff --git a/packages/sku/src/services/webpack/config/utils/index.ts b/packages/sku/src/services/webpack/config/utils/index.ts
@@ -10,5 +10,12 @@ const extensions = {
 
 export const TYPESCRIPT = new RegExp(`\.(${extensions.ts.join('|')})$`);
 export const JAVASCRIPT = new RegExp(`\.(${extensions.js.join('|')})$`);
-export const IMAGE = [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/];
+export const IMAGE = [
+  /\.bmp$/,
+  /\.gif$/,
+  /\.jpe?g$/,
+  /\.png$/,
+  /\.webp$/,
+  /\.avif$/,
+];
 export const SVG = /\.svg$/;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tests/__snapshots__/public-path.test.js.snap b/tests/__snapshots__/public-path.test.js.snap
@@ -7,7 +7,7 @@ SCRIPTS: [
   "/static/main.js",
 ]
 CSS: [
-  "/static/main-2805b6163358bccd828d.css",
+  "/static/main-319b8cbb3480f1f49310.css",
 ]
 SOURCE HTML: <!DOCTYPE html>
 <html>
@@ -48,6 +48,16 @@ SOURCE HTML: <!DOCTYPE html>
     <div id="app">
       <div class="_1eysbi80">
       </div>
+      <div class="_1eysbi81">
+      </div>
+      <div class="_1eysbi82">
+      </div>
+      <div class="_1eysbi83">
+      </div>
+      <div class="_1eysbi84">
+      </div>
+      <div class="_1eysbi85">
+      </div>
     </div>
     <script
       id="__LOADABLE_REQUIRED_CHUNKS__"