Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Feb 21, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3545eed
Fix `webp` and `avif` support, test asset loading in fixture
askoufis Feb 18, 2025
9c0aff9
Update `public-path` fixture snapshots
askoufis Feb 18, 2025
594d09e
Merge branch 'master' into webp-avif-support
askoufis Feb 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/orange-camels-give.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'sku': patch
---

Fix `.webp` and `.avif` support
41 changes: 38 additions & 3 deletions fixtures/public-path/src/app.css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
});
11 changes: 10 additions & 1 deletion fixtures/public-path/src/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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} />
</>
);
Binary file added fixtures/public-path/src/large-image.avif
View file
Open in desktop
Binary file not shown.
Binary file added fixtures/public-path/src/large-image.bmp
View file
Open in desktop
Binary file not shown.
Binary file added fixtures/public-path/src/large-image.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added fixtures/public-path/src/large-image.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added fixtures/public-path/src/large-image.webp
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion packages/sku/src/config/jest/jest-preset.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)$':
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question: Should bmp be in here as well?

Is it ok to load a bmp without a filemock?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, didn't notice that it was missing. Automerge beat you to it. I'll make another PR.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll ✅ that when it shows up

fileURLToPath(import.meta.resolve('./fileMock.cjs')),
},
transform: {
Expand Down
9 changes: 8 additions & 1 deletion packages/sku/src/services/webpack/config/utils/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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$/;
113 changes: 16 additions & 97 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 11 additions & 1 deletion tests/__snapshots__/public-path.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ SCRIPTS: [
"/static/main.js",
]
CSS: [
"/static/main-2805b6163358bccd828d.css",
"/static/main-319b8cbb3480f1f49310.css",
]
SOURCE HTML: <!DOCTYPE html>
<html>
Expand Down Expand Up @@ -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__"
Expand Down