Skip to content

Commit

Permalink
Cleanup adapter after processing styles (#343)
Browse files Browse the repository at this point in the history
  • Loading branch information
mattcompiles authored Sep 7, 2021
1 parent 0d8efe2 commit 50bae14
Show file tree
Hide file tree
Showing 25 changed files with 1,835 additions and 488 deletions.
6 changes: 6 additions & 0 deletions .changeset/few-lions-deny.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@vanilla-extract/css': patch
'@vanilla-extract/integration': patch
---

Cleanup adapter after processing styles
36 changes: 0 additions & 36 deletions .github/workflows/screenshots.yml

This file was deleted.

31 changes: 31 additions & 0 deletions .github/workflows/validate.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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/
29 changes: 22 additions & 7 deletions packages/css/src/adapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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';
Expand Down
1 change: 0 additions & 1 deletion packages/integration/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
],
Expand Down
28 changes: 21 additions & 7 deletions packages/integration/src/processVanillaFile.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,
);

Expand Down Expand Up @@ -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);
Expand Down
4 changes: 4 additions & 0 deletions test-helpers/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -31,6 +34,7 @@
},
"devDependencies": {
"@types/minimist": "^1",
"@types/prettier": "^2",
"@types/serve-handler": "^6"
}
}
12 changes: 11 additions & 1 deletion test-helpers/src/getStylesheet.ts
Original file line number Diff line number Diff line change
@@ -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' });
}
1 change: 1 addition & 0 deletions test-helpers/src/startFixture/esbuild.ts
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export const startEsbuildFixture = async (
return {
type: 'esbuild',
url: `http://localhost:${port}`,
stylesheet: 'index.css',
close: () => {
server.stop();

Expand Down
1 change: 1 addition & 0 deletions test-helpers/src/startFixture/webpack.ts
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ export const startWebpackFixture = (
}),
),
type,
stylesheet: 'main.css',
});
},
});
Expand Down
21 changes: 0 additions & 21 deletions tests/stylesheets/__snapshots__/esbuild.test.ts.snap

This file was deleted.

Loading

0 comments on commit 50bae14

Please sign in to comment.