CSS fixes (#15806)

test/bundler/esbuild/css.test.ts

@@ -41,6 +41,7 @@ body {
 
   itBundled("css/CSSNesting", {
     experimentalCss: true,
+    target: "bun",
     files: {
       "/entry.css": /* css */ `
 body {

test/js/bun/css/css.test.ts

@@ -8,7 +8,37 @@ import path from "path";
 import { attrTest, cssTest, indoc, minify_test, minifyTest, prefix_test } from "./util";
 
 describe("css tests", () => {
-  test("edge case", () => {
+  describe("pseudo-class edge case", () => {
+    cssTest(
+      indoc`[type="file"]::file-selector-button:-moz-any() {
+      --pico-background-color: var(--pico-primary-hover-background);
+      --pico-border-color: var(--pico-primary-hover-border);
+      --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 #0000);
+      --pico-color: var(--pico-primary-inverse);
+    }`,
+      indoc`[type="file"]::-webkit-file-upload-button:-webkit-any() {
+      --pico-background-color: var(--pico-primary-hover-background);
+      --pico-border-color: var(--pico-primary-hover-border);
+      --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 #0000);
+      --pico-color: var(--pico-primary-inverse);
+    }
+    [type="file"]::file-selector-button:is() {
+      --pico-background-color: var(--pico-primary-hover-background);
+      --pico-border-color: var(--pico-primary-hover-border);
+      --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 #0000);
+      --pico-color: var(--pico-primary-inverse);
+    }`,
+      {
+        chrome: 80 << 16,
+        edge: 80 << 16,
+        firefox: 78 << 16,
+        safari: 14 << 16,
+        opera: 67 << 16,
+      },
+    );
+  });
+
+  test("calc edge case", () => {
     minifyTest(
       // Problem: the value is being printed as Infinity in our restrict_prec thing but the internal thing actually wants it as 3.40282e38px
       `.rounded-full {

test/js/bun/css/doesnt_crash.test.ts

@@ -19,7 +19,14 @@ describe("doesnt_crash", async () => {
     absolute = absolute.replaceAll("\\", "/");
     const file = path.basename(absolute);
 
-    for (let minify of [false, true]) {
+    const configs: { target: string; minify: boolean }[] = [
+      { target: "bun", minify: false },
+      { target: "bun", minify: true },
+      { target: "browser", minify: false },
+      { target: "browser", minify: true },
+    ];
+
+    for (const { target, minify } of configs) {
       test(`${file} - ${minify ? "minify" : "not minify"}`, async () => {
         const timeLog = `Transpiled ${file} - ${minify ? "minify" : "not minify"}`;
         console.time(timeLog);
@@ -27,6 +34,7 @@ describe("doesnt_crash", async () => {
           entrypoints: [absolute],
           experimentalCss: true,
           minify: minify,
+          target,
         });
         console.timeEnd(timeLog);
 
@@ -42,9 +50,11 @@ describe("doesnt_crash", async () => {
         {
           const timeLog = `Re-transpiled ${file} - ${minify ? "minify" : "not minify"}`;
           console.time(timeLog);
+          console.log("  Transpiled file path:", outfile1);
           const { logs, outputs } = await Bun.build({
             entrypoints: [outfile1],
             experimentalCss: true,
+            target,
             minify: minify,
           });
 

test/js/bun/css/util.ts

@@ -30,12 +30,14 @@ export function prefix_test(source: string, expected: string, targets: Browsers)
   });
 }
 
-export function css_test(source: string, expected: string) {
-  return cssTest(source, expected);
+export function css_test(source: string, expected: string, browsers?: Browsers) {
+  return cssTest(source, expected, browsers);
 }
-export function cssTest(source: string, expected: string) {
+export function cssTest(source: string, expected: string, browsers?: Browsers) {
   test(source, () => {
-    expect(testWithOptions(source, expected)).toEqualIgnoringWhitespace(expected);
+    const output = testWithOptions(source, expected, browsers);
+    console.log("Output", output);
+    expect(output).toEqualIgnoringWhitespace(expected);
   });
 }