From 64c18f976bdada1f99022e88065a8277d56b5592 Mon Sep 17 00:00:00 2001 From: mattcompiles Date: Tue, 22 Jun 2021 11:15:35 +1000 Subject: [PATCH] Add `disableRuntimeStyles` entrypoint (#206) --- .changeset/pink-impalas-prove.md | 13 +++++++++ README.md | 27 +++++++++++++++++++ .../css/disableRuntimeStyles/package.json | 8 ++++++ packages/css/package.json | 6 +++-- packages/css/src/adapter.ts | 13 ++++++++- packages/css/src/disableRuntimeStyles.ts | 3 +++ packages/css/src/runtimeAdapter.ts | 4 +-- site/docs/setup.md | 25 +++++++++++++++++ 8 files changed, 94 insertions(+), 5 deletions(-) create mode 100644 .changeset/pink-impalas-prove.md create mode 100644 packages/css/disableRuntimeStyles/package.json create mode 100644 packages/css/src/disableRuntimeStyles.ts diff --git a/.changeset/pink-impalas-prove.md b/.changeset/pink-impalas-prove.md new file mode 100644 index 000000000..40223efd6 --- /dev/null +++ b/.changeset/pink-impalas-prove.md @@ -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'; +``` + diff --git a/README.md b/README.md index cccac6fa9..0591ac729 100644 --- a/README.md +++ b/README.md @@ -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) @@ -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 diff --git a/packages/css/disableRuntimeStyles/package.json b/packages/css/disableRuntimeStyles/package.json new file mode 100644 index 000000000..e410ce651 --- /dev/null +++ b/packages/css/disableRuntimeStyles/package.json @@ -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" + } +} diff --git a/packages/css/package.json b/packages/css/package.json index f2431e143..4462f7a90 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -15,7 +15,8 @@ "recipe.ts", "adapter.ts", "transformCss.ts", - "fileScope.ts" + "fileScope.ts", + "disableRuntimeStyles.ts" ] }, "files": [ @@ -23,7 +24,8 @@ "/recipe", "/adapter", "/transformCss", - "/fileScope" + "/fileScope", + "/disableRuntimeStyles" ], "repository": { "type": "git", diff --git a/packages/css/src/adapter.ts b/packages/css/src/adapter.ts index 41edbb25d..d42aad3ea 100644 --- a/packages/css/src/adapter.ts +++ b/packages/css/src/adapter.ts @@ -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; }; diff --git a/packages/css/src/disableRuntimeStyles.ts b/packages/css/src/disableRuntimeStyles.ts new file mode 100644 index 000000000..ee5a5192a --- /dev/null +++ b/packages/css/src/disableRuntimeStyles.ts @@ -0,0 +1,3 @@ +import { setAdapter, mockAdapter } from './adapter'; + +setAdapter(mockAdapter); diff --git a/packages/css/src/runtimeAdapter.ts b/packages/css/src/runtimeAdapter.ts index 4028416c2..485a32afc 100644 --- a/packages/css/src/runtimeAdapter.ts +++ b/packages/css/src/runtimeAdapter.ts @@ -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 = {}; @@ -64,5 +64,5 @@ const browserRuntimeAdapter: Adapter = { }; if (typeof window !== 'undefined') { - setAdapter(browserRuntimeAdapter); + setAdapterIfNotSet(browserRuntimeAdapter); } diff --git a/site/docs/setup.md b/site/docs/setup.md index ec73abe6e..b9279ae98 100644 --- a/site/docs/setup.md +++ b/site/docs/setup.md @@ -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'; +```