Skip to content

Commit

Permalink
Add disableRuntimeStyles entrypoint (#206)
Browse files Browse the repository at this point in the history
  • Loading branch information
mattcompiles authored Jun 22, 2021
1 parent 65014ef commit 64c18f9
Show file tree
Hide file tree
Showing 8 changed files with 94 additions and 5 deletions.
13 changes: 13 additions & 0 deletions .changeset/pink-impalas-prove.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
'@vanilla-extract/css': minor
---

Add `disableRuntimeStyles` entrypoint

In testing environments (like `jsdom`) vanilla-extract will create and insert styles. While this is often desirable, it can be a major slowdown in your tests. If your tests don't require styles to be available, the `disableRuntimeStyles` import will disable all style creation.

```ts
// setupTests.ts
import '@vanilla-extract/css/disableRuntimeStyles';
```

27 changes: 27 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ Want to work at a higher level while maximising style re-use? Check out 🍨 [S
- [Vite](#vite)
- [Snowpack](#snowpack)
- [Gatsby](#gatsby)
- [Test environments](#test-environments)
- [Styling API](#styling-api)
- [style](#style)
- [styleVariants](#styleVariants)
Expand Down Expand Up @@ -282,6 +283,32 @@ $ npm install @vanilla-extract/css @vanilla-extract/snowpack-plugin
To add to your [Gatsby](https://www.gatsbyjs.com) site, use the [gatsby-plugin-vanilla-extract](https://github.com/KyleAMathews/gatsby-plugin-vanilla-extract) plugin.
### Test environments
1. Install the dependencies.
```bash
$ npm install @vanilla-extract/babel-plugin
```
2. Add the [Babel](https://babeljs.io) plugin.
```json
{
"plugins": ["@vanilla-extract/babel-plugin"]
}
```
3. Disable runtime styles (Optional)
In testing environments (like `jsdom`) vanilla-extract will create and insert styles. While this is often desirable, it can be a major slowdown in your tests. If your tests don’t require styles to be available, the `disableRuntimeStyles` import will disable all style creation.
```ts
// setupTests.ts
import '@vanilla-extract/css/disableRuntimeStyles';
```
---
## Styling API
Expand Down
8 changes: 8 additions & 0 deletions packages/css/disableRuntimeStyles/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"main": "dist/vanilla-extract-css-disableRuntimeStyles.cjs.js",
"module": "dist/vanilla-extract-css-disableRuntimeStyles.esm.js",
"browser": {
"./dist/vanilla-extract-css-disableRuntimeStyles.cjs.js": "./dist/vanilla-extract-css-disableRuntimeStyles.browser.cjs.js",
"./dist/vanilla-extract-css-disableRuntimeStyles.esm.js": "./dist/vanilla-extract-css-disableRuntimeStyles.browser.esm.js"
}
}
6 changes: 4 additions & 2 deletions packages/css/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,17 @@
"recipe.ts",
"adapter.ts",
"transformCss.ts",
"fileScope.ts"
"fileScope.ts",
"disableRuntimeStyles.ts"
]
},
"files": [
"/dist",
"/recipe",
"/adapter",
"/transformCss",
"/fileScope"
"/fileScope",
"/disableRuntimeStyles"
],
"repository": {
"type": "git",
Expand Down
13 changes: 12 additions & 1 deletion packages/css/src/adapter.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,23 @@
import type { Adapter } from './types';

let adapter: Adapter = {
export const mockAdapter: Adapter = {
appendCss: () => {},
registerClassName: () => {},
onEndFileScope: () => {},
};

let adapter: Adapter = mockAdapter;

let hasConfiguredAdapter = false;

export const setAdapterIfNotSet = (newAdapter: Adapter) => {
if (!hasConfiguredAdapter) {
setAdapter(newAdapter);
}
};

export const setAdapter = (newAdapter: Adapter) => {
hasConfiguredAdapter = true;
adapter = newAdapter;
};

Expand Down
3 changes: 3 additions & 0 deletions packages/css/src/disableRuntimeStyles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { setAdapter, mockAdapter } from './adapter';

setAdapter(mockAdapter);
4 changes: 2 additions & 2 deletions packages/css/src/runtimeAdapter.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { Adapter, CSS, FileScope } from './types';
import { transformCss } from './transformCss';
import { setAdapter } from './adapter';
import { setAdapterIfNotSet } from './adapter';

const stylesheets: Record<string, CSSStyleSheet> = {};

Expand Down Expand Up @@ -64,5 +64,5 @@ const browserRuntimeAdapter: Adapter = {
};

if (typeof window !== 'undefined') {
setAdapter(browserRuntimeAdapter);
setAdapterIfNotSet(browserRuntimeAdapter);
}
25 changes: 25 additions & 0 deletions site/docs/setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -187,3 +187,28 @@ $ npm install @vanilla-extract/css @vanilla-extract/snowpack-plugin
## Gatsby

To add to your [Gatsby](https://www.gatsbyjs.com) site, use the [gatsby-plugin-vanilla-extract](https://github.com/KyleAMathews/gatsby-plugin-vanilla-extract) plugin.

## Test environments

1/ Install the dependencies.

```bash
$ npm install @vanilla-extract/babel-plugin
```

2/ Add the [Babel](https://babeljs.io) plugin.

```json
{
"plugins": ["@vanilla-extract/babel-plugin"]
}
```

3/ Disable runtime styles (Optional)

In testing environments (like `jsdom`) vanilla-extract will create and insert styles. While this is often desirable, it can be a major slowdown in your tests. If your tests don’t require styles to be available, the `disableRuntimeStyles` import will disable all style creation.

```ts
// setupTests.ts
import '@vanilla-extract/css/disableRuntimeStyles';
```

0 comments on commit 64c18f9

Please sign in to comment.