Add Sprinkles utils and 'addRecipe' function (#132)

Author: markdalgleish

.changeset/green-seals-eat.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': minor
+---
+
+Introduce `addRecipe` function, exposed via `@vanilla-extract/css/recipe` entrypoint

.changeset/rare-pigs-tap.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/sprinkles': minor
+---
+
+Add `createMapValueFn` and `createNormalizeValueFn` utilities and `ConditionalValue` type.

.prettierignore

@@ -8,3 +8,4 @@ README.md
 .yarnrc.yml
 .github/ISSUE_TEMPLATE
 site/docs-manifest.json
+.changeset

fixtures/sprinkles/src/index.ts

@@ -1,14 +1,21 @@
-import { atoms } from './styles.css';
+import {
+  atoms,
+  mapResponsiveValue,
+  normalizeResponsiveValue,
+} from './styles.css';
 import testNodes from '../test-nodes.json';
 
 function render() {
   document.body.innerHTML = `
   <div id="${testNodes.root}" class="${atoms({
-    display: 'block',
-    paddingTop: {
-      mobile: 'small',
-      desktop: 'medium',
-    },
+    display: normalizeResponsiveValue('block').mobile,
+    paddingTop: mapResponsiveValue(
+      {
+        mobile: 'small',
+        desktop: 'medium',
+      } as const,
+      (x) => x,
+    ),
   })}"> 
     Sprinkles
   </div>

fixtures/sprinkles/src/styles.css.ts

@@ -1,28 +1,39 @@
-import { createAtomicStyles, createAtomsFn } from '@vanilla-extract/sprinkles';
+import {
+  createAtomicStyles,
+  createAtomsFn,
+  createMapValueFn,
+  createNormalizeValueFn,
+} from '@vanilla-extract/sprinkles';
 
-export const atoms = createAtomsFn(
-  createAtomicStyles({
-    defaultCondition: 'mobile',
-    conditions: {
-      mobile: {},
-      tablet: {
-        '@media': 'screen and (min-width: 768px)',
-      },
-      desktop: {
-        '@media': 'screen and (min-width: 1024px)',
-      },
-      darkDesktop: {
-        '@supports': 'not (display: grid)',
-        '@media': 'screen and (min-width: 1024px)',
-        selector: '[data-dark-mode] &',
-      },
+const responsiveStyles = createAtomicStyles({
+  defaultCondition: 'mobile',
+  conditions: {
+    mobile: {},
+    tablet: {
+      '@media': 'screen and (min-width: 768px)',
     },
-    properties: {
-      display: ['flex', 'none', 'block'],
-      paddingTop: {
-        small: '10px',
-        medium: '20px',
-      },
+    desktop: {
+      '@media': 'screen and (min-width: 1024px)',
     },
-  }),
+    darkDesktop: {
+      '@supports': 'not (display: grid)',
+      '@media': 'screen and (min-width: 1024px)',
+      selector: '[data-dark-mode] &',
+    },
+  },
+  responsiveArray: ['mobile', 'tablet', 'desktop'],
+  properties: {
+    display: ['flex', 'none', 'block'],
+    paddingTop: {
+      small: '10px',
+      medium: '20px',
+    },
+  },
+});
+
+export const atoms = createAtomsFn(responsiveStyles);
+
+export const mapResponsiveValue = createMapValueFn(responsiveStyles);
+export const normalizeResponsiveValue = createNormalizeValueFn(
+  responsiveStyles,
 );

packages/css/package.json

@@ -12,13 +12,15 @@
   "preconstruct": {
     "entrypoints": [
       "index.ts",
+      "recipe.ts",
       "adapter.ts",
       "transformCss.ts",
       "fileScope.ts"
     ]
   },
   "files": [
     "/dist",
+    "/recipe",
     "/adapter",
     "/transformCss",
     "/fileScope"

packages/css/recipe/package.json

@@ -0,0 +1,8 @@
+{
+  "main": "dist/vanilla-extract-css-recipe.cjs.js",
+  "module": "dist/vanilla-extract-css-recipe.esm.js",
+  "browser": {
+    "./dist/vanilla-extract-css-recipe.cjs.js": "./dist/vanilla-extract-css-recipe.browser.cjs.js",
+    "./dist/vanilla-extract-css-recipe.esm.js": "./dist/vanilla-extract-css-recipe.browser.esm.js"
+  }
+}

packages/css/src/recipe.ts

@@ -0,0 +1,25 @@
+type Primitive = string | number | boolean | null | undefined;
+
+type Serializable =
+  | {
+      [Key in string | number]: Primitive | Serializable;
+    }
+  | ReadonlyArray<Primitive | Serializable>;
+
+interface Recipe {
+  importPath: string;
+  importName: string;
+  args: ReadonlyArray<Serializable>;
+}
+
+export function addRecipe<Target extends object>(
+  target: Target,
+  recipe: Recipe,
+) {
+  Object.defineProperty(target, '__recipe__', {
+    value: recipe,
+    writable: false,
+  });
+
+  return target;
+}