Sprinkles: Fix handling of zero values in shorthands (#432)

Author: mattcompiles

.changeset/chilled-goats-hunt.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/sprinkles': patch
+---
+
+Fix handling of zero values in shorthands

packages/sprinkles/src/createSprinkles.ts

@@ -85,12 +85,12 @@ export const createSprinkles =
 
       for (const shorthand of shorthandNames) {
         const value = props[shorthand];
-        if (value) {
+        if (value != null) {
           const sprinkle = sprinklesStyles[shorthand];
           hasShorthands = true;
           for (const propMapping of sprinkle.mappings) {
             shorthands[propMapping] = value;
-            if (!nonShorthands[propMapping]) {
+            if (nonShorthands[propMapping] == null) {
               delete nonShorthands[propMapping];
             }
           }

tests/sprinkles/index.css.ts

@@ -114,3 +114,15 @@ export const propertiesWithPaddingShorthands = defineProperties({
     paddingY: ['paddingTop', 'paddingBottom'],
   },
 });
+
+export const shorthandsWithZeroValues = defineProperties({
+  properties: {
+    marginTop: {
+      0: '0rem',
+      1: '0.5rem',
+    },
+  },
+  shorthands: {
+    mt: ['marginTop'],
+  },
+});

tests/sprinkles/sprinkles.test.ts

@@ -12,6 +12,7 @@ import {
   conditionalPropertiesWithMultipleDefaultConditions,
   conditionalPropertiesWithoutDefaultCondition,
   conditionalPropertiesWithoutResponsiveArray,
+  shorthandsWithZeroValues,
 } from './index.css';
 
 describe('sprinkles', () => {
@@ -264,6 +265,16 @@ describe('sprinkles', () => {
       );
     });
 
+    it('should handle shorthands with zero values', () => {
+      const sprinkles = createSprinkles(shorthandsWithZeroValues);
+
+      expect(
+        sprinkles({
+          mt: 0,
+        }),
+      ).toMatchInlineSnapshot(`"sprinkles_marginTop_0__1kw4bre2a"`);
+    });
+
     it('should preserve config order of shorthands', () => {
       const sprinkles = createSprinkles(propertiesWithPaddingShorthands);