@vanilla-extract/vite-plugin 2.0.2 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @vanilla-extract/vite-plugin
 
+## 2.1.0
+
+### Minor Changes
+
+- [#373](https://github.com/seek-oss/vanilla-extract/pull/373) [`a55d2cf`](https://github.com/seek-oss/vanilla-extract/commit/a55d2cfd7c4ca9175a2c86557888df90907bfd0f) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Add `devStyleRuntime` option to allow switching between dev style runtimes
+
+  The built-in Vite dev style runtime (what adds styles to the page when running `vite serve`) doesn't seem to clean up old styles as expected. Passing `devStyleRuntime: 'vanilla-extract'` will instead use vanilla-extract's browser runtime. This pushes all style creation in development to the browser, but may give a better HMR experience.
+
 ## 2.0.2
 
 ### Patch Changes

package/README.md

@@ -74,7 +74,7 @@ document.write(`
 
 ---
 
-Want to work at a higher level while maximising style re-use? Check out  🍨 [Sprinkles](https://github.com/seek-oss/vanilla-extract/tree/master/packages/sprinkles), our official zero-runtime atomic CSS framework, built on top of vanilla-extract.
+Want to work at a higher level while maximising style re-use? Check out  🍨 [Sprinkles](https://vanilla-extract.style/documentation/sprinkles-api), our official zero-runtime atomic CSS framework, built on top of vanilla-extract.
 
 ---
 
@@ -102,6 +102,8 @@ Want to work at a higher level while maximising style re-use? Check out  🍨 [S
   - [globalFontFace](#globalfontface)
   - [keyframes](#keyframes)
   - [globalKeyframes](#globalkeyframes)
+- [Recipes API](#recipes-api)
+  - [recipe](#recipe)
 - [Dynamic API](#dynamic-api)
   - [assignInlineVars](#assigninlinevars)
   - [setElementVars](#setelementvars)
@@ -553,7 +555,7 @@ globalStyle('html, body', {
 Global selectors can also contain references to other scoped class names.
 
 ```ts
-import { globalStyle } from '@vanilla-extract/css';
+import { style, globalStyle } from '@vanilla-extract/css';
 
 export const parentClass = style({});
 
@@ -910,8 +912,8 @@ Creates a locally scoped set of keyframes.
 import { keyframes, style } from '@vanilla-extract/css';
 
 const rotate = keyframes({
-  '0%': { rotate: '0deg' },
-  '100%': { rotate: '360deg' },
+  '0%': { transform: 'rotate(0deg)' },
+  '100%': { transform: 'rotate(360deg)' }
 });
 
 export const animated = style({
@@ -927,8 +929,8 @@ Creates a globally scoped set of keyframes.
 import { globalKeyframes, style } from '@vanilla-extract/css';
 
 globalKeyframes('rotate', {
-  '0%': { rotate: '0deg' },
-  '100%': { rotate: '360deg' },
+  '0%': { transform: 'rotate(0deg)' },
+  '100%': { transform: 'rotate(360deg)' }
 });
 
 export const animated = style({
@@ -936,9 +938,117 @@ export const animated = style({
 });
 ```
 
+## Recipes API
+
+Create multi-variant styles with a type-safe runtime API, heavily inspired by [Stitches.](https://stitches.dev)
+
+As with the rest of vanilla-extract, all styles are generated at build time.
+
+```bash
+$ npm install @vanilla-extract/recipes
+```
+
+### recipe
+
+Creates a multi-variant style function that can be used at runtime or statically in `.css.ts` files.
+
+Accepts an optional set of `base` styles, `variants`, `compoundVariants` and `defaultVariants`.
+
+```ts
+import { recipe } from '@vanilla-extract/recipes';
+
+export const button = recipe({
+  base: {
+    borderRadius: 6
+  },
+
+  variants: {
+    color: {
+      neutral: { background: 'whitesmoke' },
+      brand: { background: 'blueviolet' },
+      accent: { background: 'slateblue' }
+    },
+    size: {
+      small: { padding: 12 },
+      medium: { padding: 16 },
+      large: { padding: 24 }
+    },
+    rounded: {
+      true: { borderRadius: 999 }
+    }
+  },
+
+  // Applied when multiple variants are set at once
+  compoundVariants: [
+    {
+      variants: {
+        color: 'neutral',
+        size: 'large'
+      },
+      style: {
+        background: 'ghostwhite'
+      }
+    }
+  ],
+
+  defaultVariants: {
+    color: 'accent',
+    size: 'medium'
+  }
+});
+```
+
+With this recipe configured, you can now use it in your templates.
+
+```ts
+import { button } from './button.css.ts';
+
+document.write(`
+  <button class="${button({
+    color: 'accent',
+    size: 'large',
+    rounded: true
+  })}">
+    Hello world
+  </button>
+`);
+```
+
+Your recipe configuration can also make use of existing variables, classes and styles.
+
+For example, you can pass in the result of your [`sprinkles`](https://vanilla-extract.style/documentation/sprinkles-api) function directly.
+
+```ts
+import { recipe } from '@vanilla-extract/recipes';
+import { reset } from './reset.css.ts';
+import { sprinkles } from './sprinkles.css.ts';
+
+export const button = recipe({
+  base: [reset, sprinkles({ borderRadius: 'round' })],
+
+  variants: {
+    color: {
+      neutral: sprinkles({ background: 'neutral' }),
+      brand: sprinkles({ background: 'brand' }),
+      accent: sprinkles({ background: 'accent' })
+    },
+    size: {
+      small: sprinkles({ padding: 'small' }),
+      medium: sprinkles({ padding: 'medium' }),
+      large: sprinkles({ padding: 'large' })
+    }
+  },
+
+  defaultVariants: {
+    color: 'accent',
+    size: 'medium'
+  }
+});
+```
+
 ## Dynamic API
 
-We also provide a lightweight standalone package to support dynamic runtime theming.
+Dynamically update theme variables at runtime.
 
 ```bash
 npm install @vanilla-extract/dynamic

package/dist/declarations/src/index.d.ts

@@ -2,6 +2,11 @@ import type { Plugin } from 'vite';
 import { IdentifierOption } from '@vanilla-extract/integration';
 interface Options {
     identifiers?: IdentifierOption;
+    /**
+     * Which CSS runtime to use when running `vite serve`.
+     * @default 'vite'
+     */
+    devStyleRuntime?: 'vite' | 'vanilla-extract';
 }
-export declare function vanillaExtractPlugin({ identifiers }?: Options): Plugin;
+export declare function vanillaExtractPlugin({ identifiers, devStyleRuntime, }?: Options): Plugin;
 export {};

package/dist/vanilla-extract-vite-plugin.cjs.dev.js

@@ -11,10 +11,12 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 var path__default = /*#__PURE__*/_interopDefault(path);
 
 function vanillaExtractPlugin({
-  identifiers
+  identifiers,
+  devStyleRuntime = 'vite'
 } = {}) {
   let config;
   let packageInfo;
+  let useRuntime = false;
   const cssMap = new Map();
   return {
     name: 'vanilla-extract',
@@ -22,6 +24,7 @@ function vanillaExtractPlugin({
 
     configResolved(resolvedConfig) {
       config = resolvedConfig;
+      useRuntime = devStyleRuntime === 'vanilla-extract' && config.command === 'serve';
       packageInfo = integration.getPackageInfo(config.root);
     },
 
@@ -54,7 +57,7 @@ function vanillaExtractPlugin({
         return null;
       }
 
-      if (ssr) {
+      if (ssr || useRuntime) {
         return integration.addFileScope({
           source: code,
           filePath: vite.normalizePath(path__default['default'].relative(packageInfo.dirname, id)),

package/dist/vanilla-extract-vite-plugin.cjs.prod.js

@@ -11,10 +11,12 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 var path__default = /*#__PURE__*/_interopDefault(path);
 
 function vanillaExtractPlugin({
-  identifiers
+  identifiers,
+  devStyleRuntime = 'vite'
 } = {}) {
   let config;
   let packageInfo;
+  let useRuntime = false;
   const cssMap = new Map();
   return {
     name: 'vanilla-extract',
@@ -22,6 +24,7 @@ function vanillaExtractPlugin({
 
     configResolved(resolvedConfig) {
       config = resolvedConfig;
+      useRuntime = devStyleRuntime === 'vanilla-extract' && config.command === 'serve';
       packageInfo = integration.getPackageInfo(config.root);
     },
 
@@ -54,7 +57,7 @@ function vanillaExtractPlugin({
         return null;
       }
 
-      if (ssr) {
+      if (ssr || useRuntime) {
         return integration.addFileScope({
           source: code,
           filePath: vite.normalizePath(path__default['default'].relative(packageInfo.dirname, id)),

package/dist/vanilla-extract-vite-plugin.esm.js

@@ -3,10 +3,12 @@ import { normalizePath } from 'vite';
 import { getPackageInfo, virtualCssFileFilter, getSourceFromVirtualCssFile, hash, cssFileFilter, addFileScope, compile, processVanillaFile } from '@vanilla-extract/integration';
 
 function vanillaExtractPlugin({
-  identifiers
+  identifiers,
+  devStyleRuntime = 'vite'
 } = {}) {
   let config;
   let packageInfo;
+  let useRuntime = false;
   const cssMap = new Map();
   return {
     name: 'vanilla-extract',
@@ -14,6 +16,7 @@ function vanillaExtractPlugin({
 
     configResolved(resolvedConfig) {
       config = resolvedConfig;
+      useRuntime = devStyleRuntime === 'vanilla-extract' && config.command === 'serve';
       packageInfo = getPackageInfo(config.root);
     },
 
@@ -46,7 +49,7 @@ function vanillaExtractPlugin({
         return null;
       }
 
-      if (ssr) {
+      if (ssr || useRuntime) {
         return addFileScope({
           source: code,
           filePath: normalizePath(path.relative(packageInfo.dirname, id)),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanilla-extract/vite-plugin",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
   "main": "dist/vanilla-extract-vite-plugin.cjs.js",
   "module": "dist/vanilla-extract-vite-plugin.esm.js",