Add dynamic package, add setElementTheme and setElementVar (#25)

Author: markdalgleish

.changeset/hungry-tigers-matter.md

@@ -0,0 +1,10 @@
+---
+'@vanilla-extract/css': minor
+---
+
+The `createInlineTheme` function has now moved to the `@vanilla-extract/dynamic` package.
+
+```diff
+-import { createInlineTheme } from '@vanilla-extract/css/createInlineTheme';
++import { createInlineTheme } from '@vanilla-extract/dynamic';
+```

README.md

@@ -30,6 +30,8 @@ Basically, it’s [“CSS Modules](https://github.com/css-modules/css-modules)-i
 
 🏃‍♂️   Optional runtime version for development and testing.
 
+🙈   Optional API for dynamic runtime theming.
+
 ---
 
 **Write your styles in `.css.ts` files.**
@@ -84,7 +86,6 @@ document.write(`
   - [mapToStyles](#maptostyles)
   - [createTheme](#createtheme)
   - [createGlobalTheme](#createglobaltheme)
-  - [createInlineTheme](#createinlinetheme)
   - [createThemeVars](#createthemevars)
   - [assignVars](#assignvars)
   - [createVar](#createvar)
@@ -93,6 +94,10 @@ document.write(`
   - [globalFontFace](#globalfontface)
   - [keyframes](#keyframes)
   - [globalKeyframes](#globalkeyframes)
+- [Dynamic API](#dynamic-api)
+  - [createInlineTheme](#createinlinetheme)
+  - [setElementTheme](#setelementtheme)
+  - [setElementVar](#setelementvar)
 - [Utility functions](#utility-functions)
   - [calc](#calc)
 - [Thanks](#thanks)
@@ -376,27 +381,6 @@ export const themeVars = createGlobalTheme(':root', {
 
 > 💡 All theme variants must provide a value for every variable or it’s a type error.
 
-### createInlineTheme
-
-Generates a custom theme at runtime as an inline style object.
-
-```ts
-import { createInlineTheme } from '@vanilla-extract/css/createInlineTheme';
-import { themeVars, exampleStyle } from './styles.css.ts';
-
-const customTheme = createInlineTheme(themeVars, {
-  small: '4px',
-  medium: '8px',
-  large: '16px'
-});
-
-document.write(`
-  <section style="${customTheme}">
-    <h1 class="${exampleStyle}">Hello world!</h1>
-  </section>
-`);
-```
-
 ### createThemeVars
 
 Creates a collection of CSS Variables without coupling them to a specific theme variant.
@@ -439,7 +423,7 @@ export const themeB = createTheme(themeVars, {
 
 ### assignVars
 
-Allows you to set an entire collection of CSS Variables anywhere within a style block.
+Assigns a collection of CSS Variables anywhere within a style block.
 
 > 💡 This is useful for creating responsive themes since it can be used within `@media` blocks.
 
@@ -597,6 +581,65 @@ export const animated = style({
 });
 ```
 
+## Dynamic API
+
+We also provide a lightweight standalone package to support dynamic runtime theming.
+
+```bash
+$ yarn add --dev @vanilla-extract/dynamic
+```
+
+### createInlineTheme
+
+Generates a custom theme at runtime as an inline style object.
+
+```ts
+import { createInlineTheme } from '@vanilla-extract/dynamic';
+import { themeVars, exampleStyle } from './styles.css.ts';
+
+const customTheme = createInlineTheme(themeVars, {
+  small: '4px',
+  medium: '8px',
+  large: '16px'
+});
+
+document.write(`
+  <section style="${customTheme}">
+    <h1 class="${exampleStyle}">Hello world!</h1>
+  </section>
+`);
+```
+
+### setElementTheme
+
+Sets a collection of CSS Variables on an element.
+
+```ts
+import { setElementTheme } from '@vanilla-extract/dynamic';
+import { themeVars } from './styles.css.ts';
+
+const element = document.getElementById('myElement');
+setElementTheme(element, themeVars, {
+  small: '4px',
+  medium: '8px',
+  large: '16px'
+});
+```
+
+> 💡 All variables passed into this function must be assigned or it’s a type error.
+
+### setElementVar
+
+Sets a single var on an element.
+
+```ts
+import { setElementVar } from '@vanilla-extract/dynamic';
+import { themeVars } from './styles.css.ts';
+
+const element = document.getElementById('myElement');
+setElementVar(element, themeVars.color.brand, 'darksalmon');
+```
+
 ## Utility functions
 
 We also provide a standalone package of optional utility functions to make it easier to work with CSS in TypeScript.

fixtures/themed/package.json

@@ -6,6 +6,7 @@
   "author": "SEEK",
   "private": true,
   "dependencies": {
-    "@vanilla-extract/css": "0.1.0"
+    "@vanilla-extract/css": "0.1.0",
+    "@vanilla-extract/dynamic": "0.1.0"
   }
 }

fixtures/themed/src/index.ts

@@ -1,4 +1,8 @@
-import { createInlineTheme } from '@vanilla-extract/css/createInlineTheme';
+import {
+  createInlineTheme,
+  setElementTheme,
+  setElementVar,
+} from '@vanilla-extract/dynamic';
 
 import { theme, altTheme, responsiveTheme, vars } from './themes.css';
 import { button, container, opacity } from './styles.css';
@@ -47,6 +51,16 @@ function render() {
                   }" class="${button.join(' ')} ${
     opacity['1/2']
   }">Inline theme button</button>
+                  <div>
+                  Dynamic vars
+                    <div id="${
+                      testNodes.dynamicVarsContainer
+                    }" class="${container}">
+                      <button id="${
+                        testNodes.dynamicVarsButton
+                      }" class="${button.join(
+    ' ',
+  )}">Dynamic vars button</button>
                   <div class="${responsiveTheme}">
               Responsive theme
                 <div id="${
@@ -57,9 +71,12 @@ function render() {
                   }" class="${button.join(
     ' ',
   )}">Responsive theme button</button>
-                </div>
-              </div>
-            </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
@@ -69,6 +86,32 @@ function render() {
     </div>
   </div>
 `;
+
+  const dynamicVarsContainer = document.getElementById(
+    testNodes.dynamicVarsContainer,
+  );
+
+  if (!dynamicVarsContainer) {
+    throw new Error('Dynamic vars container not found.');
+  }
+
+  setElementTheme(dynamicVarsContainer, vars, {
+    colors: {
+      backgroundColor: 'transparent',
+      text: 'papayawhip',
+    },
+    space: {
+      1: '5px',
+      2: '10px',
+      3: '15px',
+    },
+  });
+
+  setElementVar(
+    dynamicVarsContainer,
+    vars.colors.backgroundColor,
+    'darksalmon',
+  );
 }
 
 render();

fixtures/themed/test-nodes.json

@@ -8,6 +8,8 @@
   "nestedRootButton": "nestedRootButton",
   "inlineThemeContainer": "inlineThemeContainer",
   "inlineThemeButton": "inlineThemeButton",
+  "dynamicVarsContainer": "dynamicVarsContainer",
+  "dynamicVarsButton": "dynamicVarsButton",
   "responsiveThemeContainer": "responsiveThemeContainer",
   "responsiveThemeButton": "responsiveThemeButton"
 }

packages/css/createInlineTheme/package.json

@@ -14,16 +14,14 @@
       "index.ts",
       "adapter.ts",
       "transformCss.ts",
-      "fileScope.ts",
-      "createInlineTheme.ts"
+      "fileScope.ts"
     ]
   },
   "files": [
     "/dist",
     "/adapter",
     "/transformCss",
-    "/fileScope",
-    "/createInlineTheme"
+    "/fileScope"
   ],
   "repository": {
     "type": "git",
@@ -34,6 +32,7 @@
   "license": "MIT",
   "dependencies": {
     "@emotion/hash": "^0.8.0",
+    "@vanilla-extract/private": "^0.1.0",
     "css-selector-parser": "^1.4.1",
     "cssesc": "^3.0.0",
     "csstype": "^3.0.7",

packages/css/package.json

@@ -1,4 +1,5 @@
-import type { Contract, MapLeafNodes, ThemeVars, Tokens } from './types';
+import type { Contract, MapLeafNodes } from '@vanilla-extract/private';
+import type { ThemeVars, Tokens } from './types';
 import { appendCss, registerClassName } from './adapter';
 import { getFileScope } from './fileScope';
 import { generateIdentifier } from './identifier';

packages/css/src/theme.ts

@@ -1,3 +1,4 @@
+import { getVarName } from '@vanilla-extract/private';
 import cssesc from 'cssesc';
 
 import type {
@@ -234,15 +235,7 @@ class Stylesheet {
     }
 
     return {
-      ...mapKeys(vars, (_value, key) => {
-        const matches = key.match(/^var\((.*)\)$/);
-
-        if (matches) {
-          return matches[1];
-        }
-
-        return key;
-      }),
+      ...mapKeys(vars, (_value, key) => getVarName(key)),
       ...rest,
     };
   }

packages/css/src/transformCss.ts

@@ -1,3 +1,4 @@
+import type { Contract, MapLeafNodes } from '@vanilla-extract/private';
 import type { PropertiesFallback, AtRule } from 'csstype';
 
 import type { SimplePseudos } from './transformCss';
@@ -92,20 +93,10 @@ export interface Adapter {
   onEndFileScope: (fileScope: FileScope) => void;
 }
 
-export type Contract = {
-  [key: string]: string | null | Contract;
-};
-
 export type Tokens = {
   [key: string]: string | Tokens;
 };
 
-export type MapLeafNodes<Obj, LeafType> = {
-  [Prop in keyof Obj]: Obj[Prop] extends Record<string | number, any>
-    ? MapLeafNodes<Obj[Prop], LeafType>
-    : LeafType;
-};
-
 export type ThemeVars<ThemeContract extends Contract> = MapLeafNodes<
   ThemeContract,
   string