Cleanup adapter after processing styles (#343)

Author: mattcompiles

.changeset/few-lions-deny.md

@@ -0,0 +1,6 @@
+---
+'@vanilla-extract/css': patch
+'@vanilla-extract/integration': patch
+---
+
+Cleanup adapter after processing styles

.github/workflows/screenshots.yml

@@ -28,3 +28,34 @@ jobs:
 
       - name: Test
         run: yarn test:jest
+  playwright:
+    name: Playwright tests
+    runs-on: macos-latest
+    env:
+      CI: true
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@main
+
+      - name: Setup Node.js 14.x
+        uses: actions/setup-node@main
+        with:
+          node-version: 14.x
+
+      - name: Install Dependencies
+        run: yarn --immutable
+
+      - name: Install Browsers
+        run: yarn playwright install chromium
+
+      - name: Build packages
+        run: yarn build
+
+      - name: Screenshot tests
+        run: yarn test:playwright
+
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: test-results
+          path: test-results/

.github/workflows/validate.yml

@@ -9,7 +9,15 @@ export const mockAdapter: Adapter = {
   getIdentOption: () => 'debug',
 };
 
-let adapter: Adapter = mockAdapter;
+const adapterStack: Array<Adapter> = [mockAdapter];
+
+const currentAdapter = () => {
+  if (adapterStack.length < 1) {
+    throw new Error('No adapter configured');
+  }
+
+  return adapterStack[adapterStack.length - 1];
+};
 
 let hasConfiguredAdapter = false;
 
@@ -21,34 +29,41 @@ export const setAdapterIfNotSet = (newAdapter: Adapter) => {
 
 export const setAdapter = (newAdapter: Adapter) => {
   hasConfiguredAdapter = true;
-  adapter = newAdapter;
+
+  adapterStack.push(newAdapter);
+};
+
+export const removeAdapter = () => {
+  adapterStack.pop();
 };
 
 export const appendCss: Adapter['appendCss'] = (...props) => {
-  return adapter.appendCss(...props);
+  return currentAdapter().appendCss(...props);
 };
 
 export const registerClassName: Adapter['registerClassName'] = (...props) => {
-  return adapter.registerClassName(...props);
+  return currentAdapter().registerClassName(...props);
 };
 
 export const registerComposition: Adapter['registerComposition'] = (
   ...props
 ) => {
-  return adapter.registerComposition(...props);
+  return currentAdapter().registerComposition(...props);
 };
 
 export const markCompositionUsed: Adapter['markCompositionUsed'] = (
   ...props
 ) => {
-  return adapter.markCompositionUsed(...props);
+  return currentAdapter().markCompositionUsed(...props);
 };
 
 export const onEndFileScope: Adapter['onEndFileScope'] = (...props) => {
-  return adapter.onEndFileScope(...props);
+  return currentAdapter().onEndFileScope(...props);
 };
 
 export const getIdentOption: Adapter['getIdentOption'] = (...props) => {
+  const adapter = currentAdapter();
+
   // Backwards compatibility with old versions of the integration package
   if (!('getIdentOption' in adapter)) {
     return process.env.NODE_ENV === 'production' ? 'short' : 'debug';

packages/css/src/adapter.ts

@@ -3,7 +3,6 @@
   "version": "1.2.0",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
   "main": "dist/vanilla-extract-integration.cjs.js",
-  "module": "dist/vanilla-extract-integration.esm.js",
   "files": [
     "/dist"
   ],

packages/integration/package.json

@@ -1,5 +1,4 @@
 import { FileScope, Adapter } from '@vanilla-extract/css';
-import { setAdapter } from '@vanilla-extract/css/adapter';
 import { transformCss } from '@vanilla-extract/css/transformCss';
 // @ts-expect-error
 import evalCode from 'eval';
@@ -75,21 +74,22 @@ export function processVanillaFile({
     getIdentOption: () => identOption,
   };
 
-  setAdapter(cssAdapter);
-
   const currentNodeEnv = process.env.NODE_ENV;
 
-  const sourceWithBoundLoaderInstance = `require('@vanilla-extract/css/adapter').setAdapter(__adapter__);${source};`;
-
   // Vite sometimes modifies NODE_ENV which causes different versions (e.g. dev/prod) of vanilla packages to be loaded
   // This can cause CSS to be bound to the wrong instance, resulting in no CSS output
   // To get around this we set the NODE_ENV back to the original value ONLY during eval
   process.env.NODE_ENV = originalNodeEnv;
 
+  const adapterBoundSource = `
+    require('@vanilla-extract/css/adapter').setAdapter(__adapter__);
+    ${source}
+  `;
+
   const evalResult = evalCode(
-    sourceWithBoundLoaderInstance,
+    adapterBoundSource,
     filePath,
-    { console, __adapter__: cssAdapter, process },
+    { console, process, __adapter__: cssAdapter },
     true,
   );
 
@@ -119,6 +119,20 @@ export function processVanillaFile({
     cssImports.push(virtualCssFilePath);
   }
 
+  // We run this code inside eval as jest seems to create a difrerent instance of the adapter file
+  // for requires executed within the eval and all CSS can be lost.
+  evalCode(
+    `const { removeAdapter } = require('@vanilla-extract/css/adapter');
+    // Backwards compat with older versions of @vanilla-extract/css
+    if (removeAdapter) {
+      removeAdapter();
+    }
+  `,
+    filePath,
+    { console, process },
+    true,
+  );
+
   const unusedCompositions = composedClassLists
     .filter(({ identifier }) => !usedCompositions.has(identifier))
     .map(({ identifier }) => identifier);

packages/integration/src/processVanillaFile.ts

@@ -15,12 +15,15 @@
     "@vanilla-extract/webpack-plugin": "*",
     "babel-loader": "^8.2.2",
     "css-loader": "^5.2.4",
+    "cssnano": "^5.0.8",
     "got": "^11.8.2",
     "html-webpack-plugin": "^5.3.1",
     "mini-css-extract-plugin": "^1.5.1",
     "minimist": "^1.2.5",
     "path-browserify": "^1.0.1",
     "portfinder": "^1.0.28",
+    "postcss": "^8.3.6",
+    "prettier": "^2.3.2",
     "serve-handler": "^6.1.3",
     "snowpack": "^3.5.1",
     "style-loader": "^2.0.0",
@@ -31,6 +34,7 @@
   },
   "devDependencies": {
     "@types/minimist": "^1",
+    "@types/prettier": "^2",
     "@types/serve-handler": "^6"
   }
 }

test-helpers/package.json

@@ -1,9 +1,19 @@
+import postcss from 'postcss';
+import prettier from 'prettier';
+// @ts-expect-error
+import cssnano from 'cssnano';
 import got from 'got';
 
 export const stylesheetName = 'main.css';
 
 export async function getStylesheet(url: string, stylesheetName = 'main.css') {
   const response = await got(`${url}/${stylesheetName}`);
+  const { css } = await postcss([cssnano({ preset: 'default' })]).process(
+    response.body,
+    {
+      from: undefined,
+    },
+  );
 
-  return response.body;
+  return prettier.format(css, { parser: 'css' });
 }

test-helpers/src/getStylesheet.ts

@@ -65,6 +65,7 @@ export const startEsbuildFixture = async (
   return {
     type: 'esbuild',
     url: `http://localhost:${port}`,
+    stylesheet: 'index.css',
     close: () => {
       server.stop();
 

test-helpers/src/startFixture/esbuild.ts

@@ -110,6 +110,7 @@ export const startWebpackFixture = (
               }),
             ),
           type,
+          stylesheet: 'main.css',
         });
       },
     });