diff --git a/packages/vanilla/src/reducers/styling.ts b/packages/vanilla/src/reducers/styling.ts
index e4bc849b1..f224552e9 100644
--- a/packages/vanilla/src/reducers/styling.ts
+++ b/packages/vanilla/src/reducers/styling.ts
@@ -44,7 +44,7 @@ export const findStyle = (styles: StyleDef[]) => (style: string, ...args: any[])
 
   const foundStyle = _.find(styles, s => s.name === style);
   if (!_.isEmpty(foundStyle) && typeof foundStyle.classNames === 'function') {
-    return foundStyle.classNames(args);
+    return foundStyle.classNames(...args);
   } else if (!_.isEmpty(foundStyle)) {
     return foundStyle.classNames as string[];
   }
diff --git a/packages/vanilla/src/util/index.ts b/packages/vanilla/src/util/index.ts
index 866a720c2..e13fd35e6 100644
--- a/packages/vanilla/src/util/index.ts
+++ b/packages/vanilla/src/util/index.ts
@@ -36,7 +36,7 @@ import { VanillaControlStateProps, VanillaLayoutProps } from '../index';
  */
 export interface StyleDef {
   name: string;
-  classNames: string[] | ((args: any[]) => string[]);
+  classNames: string[] | ((...args: any[]) => string[]);
 }
 
 /**
@@ -155,7 +155,7 @@ export const vanillaStyles = [
   },
   {
     name: 'horizontal.layout.item',
-    classNames: numberOfChildren => ['horizontal-layout-' + numberOfChildren[0]]
+    classNames: ([size, _else]) => [`horizontal-layout-${size}`]
   },
   {
     name: 'vertical.layout',