Sprinkles: Allow theme vars in atomic properties (#63)

* Sprinkles: Allow theme vars in atomic properties

* Add changeset

* Use CSSProperties type from css package

* Rollback snapshots

Co-authored-by: Matt Jones <[email protected]>

Author: fnky

.changeset/calm-lamps-do.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/sprinkles': patch
+---
+
+Allow theme vars to be passed to atomic properties

.changeset/silent-pugs-sell.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Export CSSProperties type

packages/css/src/index.ts

@@ -1,6 +1,12 @@
 import './runtimeAdapter';
 
-export type { StyleRule, GlobalStyleRule, Adapter, FileScope } from './types';
+export type {
+  StyleRule,
+  GlobalStyleRule,
+  Adapter,
+  FileScope,
+  CSSProperties,
+} from './types';
 export * from './identifier';
 export * from './theme';
 export * from './style';

packages/css/src/transformCss.ts

@@ -5,7 +5,7 @@ import type {
   CSS,
   CSSStyleBlock,
   CSSKeyframesBlock,
-  CSSProperties,
+  CSSPropertiesWithVars,
   FeatureQueries,
   MediaQueries,
   StyleRule,
@@ -173,7 +173,7 @@ const specialKeys = [...simplePseudos, '@media', '@supports', 'selectors'];
 interface CSSRule {
   conditions?: Array<string>;
   selector: string;
-  rule: CSSProperties;
+  rule: CSSPropertiesWithVars;
 }
 
 class Stylesheet {
@@ -238,12 +238,12 @@ class Stylesheet {
     }
   }
 
-  pixelifyProperties(cssRule: CSSProperties) {
+  pixelifyProperties(cssRule: CSSPropertiesWithVars) {
     forEach(cssRule, (value, key) => {
       if (
         typeof value === 'number' &&
         value !== 0 &&
-        !UNITLESS[key as keyof CSSProperties]
+        !UNITLESS[key as keyof CSSPropertiesWithVars]
       ) {
         // @ts-expect-error Any ideas?
         cssRule[key] = `${value}px`;
@@ -253,7 +253,7 @@ class Stylesheet {
     return cssRule;
   }
 
-  transformVars({ vars, ...rest }: CSSProperties) {
+  transformVars({ vars, ...rest }: CSSPropertiesWithVars) {
     if (!vars) {
       return rest;
     }
@@ -384,7 +384,7 @@ class Stylesheet {
         this.addRule({
           conditions,
           selector: `${root.selector}${key}`,
-          rule: rule[key as keyof typeof rule] as CSSProperties,
+          rule: rule[key as keyof typeof rule] as CSSPropertiesWithVars,
         });
       }
     }

packages/css/src/types.ts

@@ -7,33 +7,37 @@ export type CSSVarFunction =
   | `var(--${string})`
   | `var(--${string}, ${string | number})`;
 
-type CSSTypeProperties = PropertiesFallback<string | number>;
+type CSSTypeProperties = PropertiesFallback<number | (string & {})>;
 
-type BasicCSSProperties = {
+export type CSSProperties = {
   [Property in keyof CSSTypeProperties]:
     | CSSTypeProperties[Property]
     | CSSVarFunction
     | Array<CSSVarFunction | Properties[Property]>;
 };
 
 export interface CSSKeyframes {
-  [time: string]: BasicCSSProperties;
+  [time: string]: CSSProperties;
 }
 
-export type CSSProperties = BasicCSSProperties & {
+export type CSSPropertiesWithVars = CSSProperties & {
   vars?: {
     [key: string]: string;
   };
 };
 
-type PseudoProperties = { [key in SimplePseudos[number]]?: CSSProperties };
+type PseudoProperties = {
+  [key in SimplePseudos[number]]?: CSSPropertiesWithVars;
+};
 
-type CSSPropertiesAndPseudos = CSSProperties & PseudoProperties;
+type CSSPropertiesAndPseudos = CSSPropertiesWithVars & PseudoProperties;
 
 interface SelectorMap {
-  [selector: string]: CSSProperties &
-    MediaQueries<CSSProperties & FeatureQueries<CSSProperties>> &
-    FeatureQueries<CSSProperties & MediaQueries<CSSProperties>>;
+  [selector: string]: CSSPropertiesWithVars &
+    MediaQueries<
+      CSSPropertiesWithVars & FeatureQueries<CSSPropertiesWithVars>
+    > &
+    FeatureQueries<CSSPropertiesWithVars & MediaQueries<CSSPropertiesWithVars>>;
 }
 
 export interface MediaQueries<StyleType> {
@@ -56,9 +60,9 @@ export type StyleRule = StyleWithSelectors &
   MediaQueries<StyleWithSelectors & FeatureQueries<StyleWithSelectors>> &
   FeatureQueries<StyleWithSelectors & MediaQueries<StyleWithSelectors>>;
 
-export type GlobalStyleRule = CSSProperties &
-  MediaQueries<CSSProperties & FeatureQueries<CSSProperties>> &
-  FeatureQueries<CSSProperties & MediaQueries<CSSProperties>>;
+export type GlobalStyleRule = CSSPropertiesWithVars &
+  MediaQueries<CSSPropertiesWithVars & FeatureQueries<CSSPropertiesWithVars>> &
+  FeatureQueries<CSSPropertiesWithVars & MediaQueries<CSSPropertiesWithVars>>;
 
 export type GlobalFontFaceRule = Omit<AtRule.FontFaceFallback, 'src'> &
   Required<Pick<AtRule.FontFaceFallback, 'src'>>;

packages/sprinkles/src/index.ts

@@ -1,5 +1,4 @@
-import { style } from '@vanilla-extract/css';
-import type * as CSS from 'csstype';
+import { style, CSSProperties } from '@vanilla-extract/css';
 
 import {
   AtomicStyles,
@@ -16,8 +15,6 @@ interface Condition {
 
 type BaseConditions = { [conditionName: string]: Condition };
 
-type CSSProperties = CSS.Properties<(string & {}) | number>;
-
 type AtomicProperties = {
   [Property in keyof CSSProperties]?:
     | Record<string, CSSProperties[Property]>

tests/sprinkles/index.css.ts

@@ -1,3 +1,4 @@
+import { createVar } from '@vanilla-extract/css';
 import { createAtomicStyles } from '@vanilla-extract/sprinkles';
 
 const spacing = {
@@ -93,6 +94,7 @@ export const atomicWithPaddingShorthandStyles = createAtomicStyles({
     paddingRight: spacing,
     paddingTop: spacing,
     paddingBottom: spacing,
+    fontWeight: [createVar()],
   },
   shorthands: {
     padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],

tests/sprinkles/sprinkles.test.ts

@@ -223,7 +223,7 @@ describe('sprinkles', () => {
           padding: 'large',
         }),
       ).toMatchInlineSnapshot(
-        `"sprinkles_paddingTop_small__1kw4bre1w sprinkles_paddingBottom_medium__1kw4bre20 sprinkles_paddingLeft_small__1kw4bre1q sprinkles_paddingRight_small__1kw4bre1t"`,
+        `"sprinkles_paddingTop_small__1kw4bre1x sprinkles_paddingBottom_medium__1kw4bre21 sprinkles_paddingLeft_small__1kw4bre1r sprinkles_paddingRight_small__1kw4bre1u"`,
       );
     });
 
@@ -236,7 +236,7 @@ describe('sprinkles', () => {
           padding: 'large',
         }),
       ).toMatchInlineSnapshot(
-        `"sprinkles_paddingTop_large__1kw4bre1y sprinkles_paddingBottom_large__1kw4bre21 sprinkles_paddingLeft_small__1kw4bre1q sprinkles_paddingRight_small__1kw4bre1t"`,
+        `"sprinkles_paddingTop_large__1kw4bre1z sprinkles_paddingBottom_large__1kw4bre22 sprinkles_paddingLeft_small__1kw4bre1r sprinkles_paddingRight_small__1kw4bre1u"`,
       );
     });
   });