107 lines
3.0 KiB
TypeScript
107 lines
3.0 KiB
TypeScript
import { expect, test } from "bun:test";
|
|
import { tempDir } from "harness";
|
|
|
|
// Regression test for https://github.com/oven-sh/bun/issues/25785
|
|
// CSS logical border-radius properties were being silently dropped
|
|
|
|
test("CSS bundler should preserve logical border-radius properties", async () => {
|
|
using dir = tempDir("issue-25785", {
|
|
"test.css": `
|
|
.test1 {
|
|
border-start-start-radius: 0.75rem;
|
|
}
|
|
.test2 {
|
|
border-end-start-radius: 0.75rem;
|
|
}
|
|
.test3 {
|
|
border-start-end-radius: 0.75rem;
|
|
}
|
|
.test4 {
|
|
border-end-end-radius: 0.75rem;
|
|
}
|
|
.test5 {
|
|
border-top-left-radius: 0.75rem;
|
|
}
|
|
`,
|
|
});
|
|
|
|
const result = await Bun.build({
|
|
entrypoints: [`${dir}/test.css`],
|
|
outdir: `${dir}/dist`,
|
|
experimentalCss: true,
|
|
minify: false,
|
|
});
|
|
|
|
expect(result.success).toBe(true);
|
|
expect(result.outputs.length).toBe(1);
|
|
|
|
const output = await result.outputs[0].text();
|
|
|
|
// Logical properties are compiled to physical properties with LTR/RTL rules
|
|
// .test1 with border-start-start-radius compiles to border-top-left-radius (LTR) and border-top-right-radius (RTL)
|
|
expect(output).toContain(".test1");
|
|
expect(output).toContain("border-top-left-radius");
|
|
expect(output).toContain("border-top-right-radius");
|
|
|
|
// .test2 with border-end-start-radius compiles to border-bottom-left-radius (LTR) and border-bottom-right-radius (RTL)
|
|
expect(output).toContain(".test2");
|
|
expect(output).toContain("border-bottom-left-radius");
|
|
expect(output).toContain("border-bottom-right-radius");
|
|
|
|
// .test3 with border-start-end-radius
|
|
expect(output).toContain(".test3");
|
|
|
|
// .test4 with border-end-end-radius
|
|
expect(output).toContain(".test4");
|
|
|
|
// Physical property should also be preserved
|
|
expect(output).toContain(".test5");
|
|
});
|
|
|
|
test("CSS bundler should handle logical border-radius with targets that compile logical properties", async () => {
|
|
using dir = tempDir("issue-25785-compiled", {
|
|
"test.css": `
|
|
.test1 {
|
|
border-start-start-radius: 0.75rem;
|
|
}
|
|
.test2 {
|
|
border-end-start-radius: 0.75rem;
|
|
}
|
|
.test3 {
|
|
border-start-end-radius: 0.75rem;
|
|
}
|
|
.test4 {
|
|
border-end-end-radius: 0.75rem;
|
|
}
|
|
`,
|
|
});
|
|
|
|
const result = await Bun.build({
|
|
entrypoints: [`${dir}/test.css`],
|
|
outdir: `${dir}/dist`,
|
|
experimentalCss: true,
|
|
minify: false,
|
|
// Target older browsers that don't support logical properties
|
|
target: "browser",
|
|
});
|
|
|
|
expect(result.success).toBe(true);
|
|
expect(result.outputs.length).toBe(1);
|
|
|
|
const output = await result.outputs[0].text();
|
|
|
|
// When logical properties are compiled down, they should produce physical properties
|
|
// with :lang() selectors to handle LTR/RTL
|
|
// At minimum, the output should NOT be empty (the bug caused empty output)
|
|
expect(output.trim().length).toBeGreaterThan(0);
|
|
|
|
// Should have some border-radius output (compiled to physical)
|
|
expect(output).toMatch(/border-.*-radius/);
|
|
|
|
// All classes should be present in the output
|
|
expect(output).toContain(".test1");
|
|
expect(output).toContain(".test2");
|
|
expect(output).toContain(".test3");
|
|
expect(output).toContain(".test4");
|
|
});
|