mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
e82b316c61
Fixes #14784 This is an alternative to #14850 in which we actually perform url rewriting / rebasing ourselves. We ported a large portion of the URL-rewriting code from Vite (with attribution) to use here with some minor modifications. We've added test cases for the url rewriting so verifying individual cases is easy. We also wrote integration tests for Vite that use PostCSS and Lightning CSS that verify that files are found and inlined or relocated/renamed as necessary. We also did some manual testing in the Playground to verify that this works as expected across several CSS files and directories which you can see a screenshot from here: <img width="1344" alt="Screenshot 2024-11-05 at 10 25 16" src="https://github.com/user-attachments/assets/ff0b3ac8-cdc9-4e26-af79-36396a5b77b9"> --------- Co-authored-by: Philipp Spiess <hello@philippspiess.com>
128 lines
4.5 KiB
TypeScript
128 lines
4.5 KiB
TypeScript
import { expect, test } from 'vitest'
|
|
import { rewriteUrls } from './urls'
|
|
|
|
const css = String.raw
|
|
|
|
test('URLs can be rewritten', async () => {
|
|
let root = '/root'
|
|
|
|
let result = await rewriteUrls({
|
|
root,
|
|
base: '/root/foo/bar',
|
|
// prettier-ignore
|
|
css: css`
|
|
.foo {
|
|
/* Relative URLs: replaced */
|
|
background: url(./image.jpg);
|
|
background: url(../image.jpg);
|
|
background: url('./image.jpg');
|
|
background: url("./image.jpg");
|
|
|
|
/* External URL: ignored */
|
|
background: url(http://example.com/image.jpg);
|
|
background: url('http://example.com/image.jpg');
|
|
background: url("http://example.com/image.jpg");
|
|
|
|
/* Data URI: ignored */
|
|
/* background: url(data:image/png;base64,abc==); */
|
|
background: url('data:image/png;base64,abc==');
|
|
background: url("data:image/png;base64,abc==");
|
|
|
|
/* Function calls: ignored */
|
|
background: url(var(--foo));
|
|
background: url(var(--foo, './image.jpg'));
|
|
background: url(var(--foo, "./image.jpg"));
|
|
|
|
/* Fragments: ignored */
|
|
background: url(#dont-touch-this);
|
|
|
|
/* Image Sets - Raw URL: replaced */
|
|
background: image-set(
|
|
image1.jpg 1x,
|
|
image2.jpg 2x
|
|
);
|
|
background: image-set(
|
|
'image1.jpg' 1x,
|
|
'image2.jpg' 2x
|
|
);
|
|
background: image-set(
|
|
"image1.jpg" 1x,
|
|
"image2.jpg" 2x
|
|
);
|
|
|
|
/* Image Sets - Relative URLs: replaced */
|
|
background: image-set(
|
|
url('image1.jpg') 1x,
|
|
url('image2.jpg') 2x
|
|
);
|
|
background: image-set(
|
|
url("image1.jpg") 1x,
|
|
url("image2.jpg") 2x
|
|
);
|
|
background: image-set(
|
|
url('image1.avif') type('image/avif'),
|
|
url('image2.jpg') type('image/jpeg')
|
|
);
|
|
background: image-set(
|
|
url("image1.avif") type('image/avif'),
|
|
url("image2.jpg") type('image/jpeg')
|
|
);
|
|
|
|
/* Image Sets - Function calls: ignored */
|
|
background: image-set(
|
|
linear-gradient(blue, white) 1x,
|
|
linear-gradient(blue, green) 2x
|
|
);
|
|
|
|
/* Image Sets - Mixed: replaced */
|
|
background: image-set(
|
|
linear-gradient(blue, white) 1x,
|
|
url("image2.jpg") 2x
|
|
);
|
|
}
|
|
|
|
/* Fonts - Multiple URLs: replaced */
|
|
@font-face {
|
|
font-family: "Newman";
|
|
src:
|
|
local("Newman"),
|
|
url("newman-COLRv1.otf") format("opentype") tech(color-COLRv1),
|
|
url("newman-outline.otf") format("opentype"),
|
|
url("newman-outline.woff") format("woff");
|
|
}
|
|
`,
|
|
})
|
|
|
|
expect(result).toMatchInlineSnapshot(`
|
|
".foo {
|
|
background: url(./foo/bar/image.jpg);
|
|
background: url(./foo/image.jpg);
|
|
background: url('./foo/bar/image.jpg');
|
|
background: url("./foo/bar/image.jpg");
|
|
background: url(http://example.com/image.jpg);
|
|
background: url('http://example.com/image.jpg');
|
|
background: url("http://example.com/image.jpg");
|
|
background: url('data:image/png;base64,abc==');
|
|
background: url("data:image/png;base64,abc==");
|
|
background: url(var(--foo));
|
|
background: url(var(--foo, './image.jpg'));
|
|
background: url(var(--foo, "./image.jpg"));
|
|
background: url(#dont-touch-this);
|
|
background: image-set(url(./foo/bar/image1.jpg) 1x, url(./foo/bar/image2.jpg) 2x);
|
|
background: image-set(url('./foo/bar/image1.jpg') 1x, url('./foo/bar/image2.jpg') 2x);
|
|
background: image-set(url("./foo/bar/image1.jpg") 1x, url("./foo/bar/image2.jpg") 2x);
|
|
background: image-set(url('./foo/bar/image1.jpg') 1x, url('./foo/bar/image2.jpg') 2x);
|
|
background: image-set(url("./foo/bar/image1.jpg") 1x, url("./foo/bar/image2.jpg") 2x);
|
|
background: image-set(url('./foo/bar/image1.avif') type('image/avif'), url('./foo/bar/image2.jpg') type('image/jpeg'));
|
|
background: image-set(url("./foo/bar/image1.avif") type('image/avif'), url("./foo/bar/image2.jpg") type('image/jpeg'));
|
|
background: image-set(linear-gradient(blue, white) 1x, linear-gradient(blue, green) 2x);
|
|
background: image-set(linear-gradient(blue, white) 1x, url("./foo/bar/image2.jpg") 2x);
|
|
}
|
|
@font-face {
|
|
font-family: "Newman";
|
|
src: local("Newman"), url("./foo/bar/newman-COLRv1.otf") format("opentype") tech(color-COLRv1), url("./foo/bar/newman-outline.otf") format("opentype"), url("./foo/bar/newman-outline.woff") format("woff");
|
|
}
|
|
"
|
|
`)
|
|
})
|