run tests against Vite plugin with new compiler

test-helpers/src/startFixture/index.ts

@@ -51,7 +51,7 @@ export async function startFixture(
     });
   }
 
-  if (type === 'vite') {
+  if (type === 'vite' || type === 'vite-next') {
     return startViteFixture(fixtureName, {
       type,
       port,

test-helpers/src/startFixture/types.ts

@@ -1,13 +1,13 @@
+import { EsbuildFixtureOptions } from './esbuild';
+import { ParcelFixtureOptions } from './parcel';
+import { ViteFixtureOptions } from './vite';
+import { WebpackFixtureOptions } from './webpack';
+
 type BuildType =
-  | 'browser'
-  | 'mini-css-extract'
-  | 'style-loader'
-  | 'esbuild'
-  | 'esbuild-next'
-  | 'esbuild-runtime'
-  | 'esbuild-next-runtime'
-  | 'vite'
-  | 'parcel';
+  | WebpackFixtureOptions['type']
+  | EsbuildFixtureOptions['type']
+  | ViteFixtureOptions['type']
+  | ParcelFixtureOptions['type'];
 
 export interface TestServer {
   type: BuildType;

test-helpers/src/startFixture/vite.ts

@@ -26,13 +26,13 @@ const serveAssets = ({ port, dir }: { port: number; dir: string }) =>
   });
 
 export interface ViteFixtureOptions {
-  type: 'vite';
+  type: 'vite' | 'vite-next';
   mode?: 'development' | 'production';
   port: number;
 }
 export const startViteFixture = async (
   fixtureName: string,
-  { mode = 'development', port = 3000 }: ViteFixtureOptions,
+  { mode = 'development', port = 3000, type }: ViteFixtureOptions,
 ): Promise<TestServer> => {
   const root = path.dirname(
     require.resolve(`@fixtures/${fixtureName}/package.json`),
@@ -42,9 +42,14 @@ export const startViteFixture = async (
     configFile: false,
     root,
     logLevel: 'error',
-    plugins: [vanillaExtractPlugin()],
+    plugins: [
+      vanillaExtractPlugin({
+        emitCssInSsr: type === 'vite-next' ? 'compiler' : true,
+      }),
+    ],
     server: {
       port,
+      strictPort: true,
     },
     build: {
       cssCodeSplit: false,

tests/e2e/features.playwright.ts-snapshots/features-vite-next--production.css

@@ -0,0 +1,51 @@
+._1o6ek500 {
+  height: 50px;
+}
+._1o6ek500:after {
+  content: "Below 700px";
+  display: block;
+}
+._1o6ek501 {
+  background-color: powderblue;
+}
+._1o6ek501:hover {
+  background-color: slategray;
+}
+._1o6ek502 {
+  background-color: powderblue;
+}
+._1o6ek502:hover {
+  background-color: slategray;
+}
+._1o6ek503 {
+  background-color: powderblue;
+}
+._1o6ek503:hover {
+  background-color: slategray;
+}
+._1o6ek505 {
+  color: white;
+}
+._1o6ek506 {
+  background-color: black;
+}
+body ._1o6ek507 {
+  font-size: 24px;
+}
+._1o6ek508 {
+  color: white;
+}
+._1o6ek509 {
+  background-color: black;
+}
+body ._1o6ek50a {
+  font-size: 24px;
+}
+@media screen and (min-width: 700px) {
+  ._1o6ek500 {
+    color: plum;
+  }
+  ._1o6ek500:after {
+    content: "Above 700px";
+  }
+}

tests/e2e/layers.playwright.ts-snapshots/layers-vite-next--production.css

@@ -0,0 +1,29 @@
+@layer lib;
+@layer lib._1sqkzjx0;
+@media screen and (min-width: 600px) {
+  @layer typography;
+}
+@layer lib._1sqkzjx2;
+@layer typography;
+@layer lib._1sqkzjx0 {
+  a {
+    font-weight: 800;
+    color: red;
+  }
+  ._1sqkzjx1 {
+    color: blue;
+  }
+}
+@media screen and (min-width: 600px) {
+  @layer typography {
+    a {
+      color: green;
+      font-size: 1.5rem;
+    }
+  }
+}
+@layer lib._1sqkzjx2 {
+  ._1sqkzjx3 {
+    color: hotpink;
+  }
+}

tests/e2e/low-level.playwright.ts-snapshots/low-level-vite-next--production.css

@@ -0,0 +1,17 @@
+._1amv5mo2 {
+  container-type: size;
+  container-name: _1amv5mo1;
+  width: 500px;
+}
+._1amv5mo3 {
+  --_1amv5mo0: blue;
+  background-color: var(--_1amv5mo0);
+  padding: 20px;
+}
+@media screen and (min-width: 200px) {
+  @container _1amv5mo1 (min-width: 400px) {
+    ._1amv5mo3 {
+      color: white;
+    }
+  }
+}

tests/e2e/recipes.playwright.ts-snapshots/recipes-vite-next--production.css

@@ -0,0 +1,50 @@
+._103pmpm2 {
+  --_103pmpm0: powderblue;
+  --_103pmpm1: white;
+}
+._103pmpm3 {
+  --_103pmpm0: crimson;
+  --_103pmpm1: black;
+}
+._103pmpm4 {
+  border: 0;
+}
+._103pmpm5 {
+  border-radius: 6px;
+  background: var(--_103pmpm0);
+  color: var(--_103pmpm1);
+  transition: all 0.2s ease;
+}
+._103pmpm5:hover {
+  transform: translateY(-3px);
+}
+._103pmpm6 {
+  font-size: 16px;
+  line-height: 24px;
+}
+._103pmpm7 {
+  font-size: 24px;
+  line-height: 40px;
+}
+._103pmpm9:hover {
+  box-shadow: 0 10px 6px -6px #777;
+}
+._103pmpma {
+  font-weight: bold;
+}
+._103pmpmc {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+._103pmpmd {
+  gap: 20px;
+}
+@media only screen and (min-width: 600px) {
+  ._103pmpmb {
+    border: 2px green solid;
+  }
+  ._103pmpmd {
+    gap: 30px;
+  }
+}

tests/e2e/sprinkles.playwright.ts-snapshots/sprinkles-vite-next--production.css

@@ -0,0 +1,170 @@
+@layer responsive-layer-name;
+@layer unconditional-layer-name;
+._1j5zl923 {
+  container-name: _1j5zl922;
+  container-type: size;
+}
+._1j5zl924 {
+  display: flex;
+}
+._1j5zl928 {
+  display: none;
+}
+._1j5zl92c {
+  display: block;
+}
+._1j5zl92g {
+  padding-top: 10px;
+}
+._1j5zl92k {
+  padding-top: 20px;
+}
+._1j5zl9218 {
+  --_1j5zl921: 1;
+  color: rgba(255, 0, 0, var(--_1j5zl921));
+}
+body {
+  margin: 0;
+}
+body ._1j5zl921c {
+  background: red;
+}
+@media screen and (min-width: 768px) {
+  @container _1j5zl922 (min-width: 768px) {
+    ._1j5zl925 {
+      display: flex;
+    }
+    ._1j5zl929 {
+      display: none;
+    }
+    ._1j5zl92d {
+      display: block;
+    }
+    ._1j5zl92h {
+      padding-top: 10px;
+    }
+    ._1j5zl92l {
+      padding-top: 20px;
+    }
+  }
+}
+@media screen and (min-width: 1024px) {
+  @container _1j5zl922 (min-width: 1024px) {
+    ._1j5zl926 {
+      display: flex;
+    }
+    ._1j5zl92a {
+      display: none;
+    }
+    ._1j5zl92e {
+      display: block;
+    }
+    ._1j5zl92i {
+      padding-top: 10px;
+    }
+    ._1j5zl92m {
+      padding-top: 20px;
+    }
+  }
+  @supports not (display: grid) {
+    [data-dark-mode] ._1j5zl927 {
+      display: flex;
+    }
+    [data-dark-mode] ._1j5zl92b {
+      display: none;
+    }
+    [data-dark-mode] ._1j5zl92f {
+      display: block;
+    }
+    [data-dark-mode] ._1j5zl92j {
+      padding-top: 10px;
+    }
+    [data-dark-mode] ._1j5zl92n {
+      padding-top: 20px;
+    }
+  }
+}
+@layer responsive-layer-name {
+  ._1j5zl92o {
+    --_1j5zl920: 1;
+    background: rgba(255, 0, 0, var(--_1j5zl920));
+  }
+  ._1j5zl92s {
+    --_1j5zl920: 1;
+  }
+  ._1j5zl92w {
+    --_1j5zl920: 0.1;
+  }
+  ._1j5zl9210 {
+    --_1j5zl920: 0.2;
+  }
+  ._1j5zl9214 {
+    --_1j5zl920: 0.3;
+  }
+  @media screen and (min-width: 768px) {
+    @container _1j5zl922 (min-width: 768px) {
+      ._1j5zl92p {
+        --_1j5zl920: 1;
+        background: rgba(255, 0, 0, var(--_1j5zl920));
+      }
+      ._1j5zl92t {
+        --_1j5zl920: 1;
+      }
+      ._1j5zl92x {
+        --_1j5zl920: 0.1;
+      }
+      ._1j5zl9211 {
+        --_1j5zl920: 0.2;
+      }
+      ._1j5zl9215 {
+        --_1j5zl920: 0.3;
+      }
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    @container _1j5zl922 (min-width: 1024px) {
+      ._1j5zl92q {
+        --_1j5zl920: 1;
+        background: rgba(255, 0, 0, var(--_1j5zl920));
+      }
+      ._1j5zl92u {
+        --_1j5zl920: 1;
+      }
+      ._1j5zl92y {
+        --_1j5zl920: 0.1;
+      }
+      ._1j5zl9212 {
+        --_1j5zl920: 0.2;
+      }
+      ._1j5zl9216 {
+        --_1j5zl920: 0.3;
+      }
+    }
+    @supports not (display: grid) {
+      [data-dark-mode] ._1j5zl92r {
+        --_1j5zl920: 1;
+        background: rgba(255, 0, 0, var(--_1j5zl920));
+      }
+      [data-dark-mode] ._1j5zl92v {
+        --_1j5zl920: 1;
+      }
+      [data-dark-mode] ._1j5zl92z {
+        --_1j5zl920: 0.1;
+      }
+      [data-dark-mode] ._1j5zl9213 {
+        --_1j5zl920: 0.2;
+      }
+      [data-dark-mode] ._1j5zl9217 {
+        --_1j5zl920: 0.3;
+      }
+    }
+  }
+}
+@layer unconditional-layer-name {
+  ._1j5zl9219 {
+    --_1j5zl921: 1;
+  }
+  ._1j5zl921a {
+    --_1j5zl921: 0.8;
+  }
+}

tests/e2e/testCases.ts

@@ -12,6 +12,8 @@ export const all = [
   { type: 'esbuild-next-runtime', mode: 'production', snapshotCss: false },
   { type: 'vite', mode: 'development', snapshotCss: false },
   { type: 'vite', mode: 'production', snapshotCss: true },
+  { type: 'vite-next', mode: 'development', snapshotCss: false },
+  { type: 'vite-next', mode: 'production', snapshotCss: true },
   { type: 'parcel', mode: 'development', snapshotCss: true },
   { type: 'parcel', mode: 'production', snapshotCss: true },
 ] as const;