Don't minify CSS in e2e test snapshots (#1259)

Author: mrm007

.github/workflows/validate.yml

@@ -83,6 +83,7 @@ jobs:
         uses: actions/setup-node@main
         with:
           node-version-file: '.nvmrc'
+          cache: 'pnpm'
 
       - name: Install Dependencies
         run: pnpm i

package.json

@@ -32,7 +32,7 @@
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.2",
     "@manypkg/cli": "^0.19.1",
-    "@playwright/test": "^1.25.1",
+    "@playwright/test": "^1.40.1",
     "@preconstruct/cli": "^2.0.1",
     "@swc/core": "^1.2.112",
     "@testing-library/jest-dom": "^5.11.9",

pnpm-lock.yaml

@@ -8,6 +8,8 @@ export const stylesheetName = 'main.css';
 
 export async function getStylesheet(url: string, stylesheetName = 'main.css') {
   const response = await got(`${url}/${stylesheetName}`);
+  // Just remove comments and normalize whitespace
+  // https://cssnano.co/docs/what-are-optimisations/#what-optimisations-do-you-support%3F
   const { css } = await postcss([cssnano({ preset: litePreset() })]).process(
     response.body,
     {

test-helpers/src/getStylesheet.ts

@@ -36,9 +36,10 @@ export const startEsbuildFixture = async (
     metafile: true,
     platform: 'browser',
     bundle: true,
-    minify: mode === 'production',
+    minify: false,
     plugins: [
       plugin({
+        identifiers: mode === 'production' ? 'short' : 'debug',
         runtime: type.includes('runtime'),
       }),
     ],

test-helpers/src/startFixture/esbuild.ts

@@ -28,6 +28,7 @@ export const startParcelFixture = async (
     },
     defaultTargetOptions: {
       distDir,
+      shouldOptimize: false,
     },
     logLevel: 'verbose',
   });

test-helpers/src/startFixture/parcel.ts

@@ -49,6 +49,7 @@ export const startViteFixture = async (
     },
     build: {
       cssCodeSplit: false,
+      minify: false,
     },
   };
 

test-helpers/src/startFixture/vite.ts

@@ -6,24 +6,7 @@ import {
 } from '@vanilla-extract-private/test-helpers';
 
 import test from './fixture';
-
-const testCases = [
-  { type: 'mini-css-extract', mode: 'development', snapshotCss: true },
-  { type: 'mini-css-extract', mode: 'production', snapshotCss: true },
-  { type: 'style-loader', mode: 'development', snapshotCss: false },
-  { type: 'esbuild', mode: 'development', snapshotCss: true },
-  { type: 'esbuild', mode: 'production', snapshotCss: true },
-  { type: 'esbuild-runtime', mode: 'development', snapshotCss: false },
-  { type: 'esbuild-runtime', mode: 'production', snapshotCss: false },
-  { type: 'esbuild-next', mode: 'development', snapshotCss: true },
-  { type: 'esbuild-next', mode: 'production', snapshotCss: true },
-  { type: 'esbuild-next-runtime', mode: 'development', snapshotCss: false },
-  { type: 'esbuild-next-runtime', mode: 'production', snapshotCss: false },
-  { type: 'vite', mode: 'development', snapshotCss: false },
-  { type: 'vite', mode: 'production', snapshotCss: true },
-  { type: 'parcel', mode: 'development', snapshotCss: true },
-  { type: 'parcel', mode: 'production', snapshotCss: true },
-] as const;
+import { all as testCases } from './testCases';
 
 testCases.forEach(({ type, mode, snapshotCss = true }) => {
   test.describe(`features - ${type} (${mode})`, () => {

tests/e2e/features.playwright.ts

@@ -6,37 +6,37 @@
   display: block;
 }
 ._1o6ek501 {
-  background-color: #b0e0e6;
+  background-color: powderblue;
 }
 ._1o6ek501:hover {
-  background-color: #708090;
+  background-color: slategray;
 }
 ._1o6ek502 {
-  background-color: #b0e0e6;
+  background-color: powderblue;
 }
 ._1o6ek502:hover {
-  background-color: #708090;
+  background-color: slategray;
 }
 ._1o6ek503 {
-  background-color: #b0e0e6;
+  background-color: powderblue;
 }
 ._1o6ek503:hover {
-  background-color: #708090;
+  background-color: slategray;
 }
 ._1o6ek505 {
-  color: #fff;
+  color: white;
 }
 ._1o6ek506 {
-  background-color: #000;
+  background-color: black;
 }
 body ._1o6ek507 {
   font-size: 24px;
 }
 ._1o6ek508 {
-  color: #fff;
+  color: white;
 }
 ._1o6ek509 {
-  background-color: #000;
+  background-color: black;
 }
 body ._1o6ek50a {
   font-size: 24px;

tests/e2e/features.playwright.ts-snapshots/features-esbuild--production.css

@@ -6,37 +6,37 @@
   display: block;
 }
 ._1o6ek501 {
-  background-color: #b0e0e6;
+  background-color: powderblue;
 }
 ._1o6ek501:hover {
-  background-color: #708090;
+  background-color: slategray;
 }
 ._1o6ek502 {
-  background-color: #b0e0e6;
+  background-color: powderblue;
 }
 ._1o6ek502:hover {
-  background-color: #708090;
+  background-color: slategray;
 }
 ._1o6ek503 {
-  background-color: #b0e0e6;
+  background-color: powderblue;
 }
 ._1o6ek503:hover {
-  background-color: #708090;
+  background-color: slategray;
 }
 ._1o6ek505 {
-  color: #fff;
+  color: white;
 }
 ._1o6ek506 {
-  background-color: #000;
+  background-color: black;
 }
 body ._1o6ek507 {
   font-size: 24px;
 }
 ._1o6ek508 {
-  color: #fff;
+  color: white;
 }
 ._1o6ek509 {
-  background-color: #000;
+  background-color: black;
 }
 body ._1o6ek50a {
   font-size: 24px;