From e96b90887d4709ed1c968b658e22fbdfdb996cbb Mon Sep 17 00:00:00 2001 From: fishDog <40156382+Bigfish8@users.noreply.github.com> Date: Tue, 3 May 2022 13:44:28 +0800 Subject: [PATCH] fix(css): var in image-set (#7921) --- .../assets/__tests__/assets.spec.ts | 23 +++++++++++++++ packages/playground/assets/css/css-url.css | 23 +++++++++++++++ packages/playground/assets/index.html | 28 ++++++++++++++++++ packages/vite/src/node/plugins/css.ts | 29 ++++++++++++++----- packages/vite/src/node/utils.ts | 13 +++++---- 5 files changed, 103 insertions(+), 13 deletions(-) diff --git a/packages/playground/assets/__tests__/assets.spec.ts b/packages/playground/assets/__tests__/assets.spec.ts index 19dd52f71e114a..f1075f6fe1cb39 100644 --- a/packages/playground/assets/__tests__/assets.spec.ts +++ b/packages/playground/assets/__tests__/assets.spec.ts @@ -104,6 +104,29 @@ describe('css url() references', () => { }) }) + test('image-set with var', async () => { + const imageSet = await getBg('.css-image-set-with-var') + imageSet.split(', ').forEach((s) => { + expect(s).toMatch(assetMatch) + }) + }) + + test('image-set with mix', async () => { + const imageSet = await getBg('.css-image-set-mix-url-var') + imageSet.split(', ').forEach((s) => { + expect(s).toMatch(assetMatch) + }) + }) + + // not supported in browser now + // https://drafts.csswg.org/css-images-4/#image-set-notation + // test('image-set with multiple descriptor', async () => { + // const imageSet = await getBg('.css-image-set-multiple-descriptor') + // imageSet.split(', ').forEach((s) => { + // expect(s).toMatch(assetMatch) + // }) + // }) + test('relative in @import', async () => { expect(await getBg('.css-url-relative-at-imported')).toMatch(assetMatch) }) diff --git a/packages/playground/assets/css/css-url.css b/packages/playground/assets/css/css-url.css index 8a3f00dee17bd9..9047cd384e7d38 100644 --- a/packages/playground/assets/css/css-url.css +++ b/packages/playground/assets/css/css-url.css @@ -26,6 +26,29 @@ background-size: 10px; } +.css-image-set-with-var { + --bg-img: url('../nested/asset.png'); + background-image: -webkit-image-set(var(--bg-img) 1x, var(--bg-img) 2x); + background-size: 10px; +} + +.css-image-set-mix-url-var { + --bg-img: url('../nested/asset.png'); + background-image: -webkit-image-set( + var(--bg-img) 1x, + url('../nested/asset.png') 2x + ); + background-size: 10px; +} + +.css-image-set-multiple-descriptor { + background-image: -webkit-image-set( + '../nested/asset.png' type('image/png') 1x, + '../nested/asset.png' type('image/png') 2x + ); + background-size: 10px; +} + .css-url-public { background: url('/icon.png'); background-size: 10px; diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html index 99c2c2fe69ae70..43eed55236abd3 100644 --- a/packages/playground/assets/index.html +++ b/packages/playground/assets/index.html @@ -46,6 +46,34 @@