add sx-runtime test

packages/pigment-css-react/src/sx.js

@@ -4,10 +4,10 @@ export default function sx(transformedSx, { className, style }) {
 
   function iterateSx(element) {
     if (element) {
-      sxClass += ` ${typeof element === 'string' ? element : element.className}`;
+      sxClass += `${typeof element === 'string' ? element : element.className} `;
       sxVars = {
         ...sxVars,
-        ...(transformedSx && typeof transformedSx !== 'string' ? transformedSx.vars : undefined),
+        ...(element && typeof element !== 'string' ? element.vars : undefined),
       };
     }
   }
@@ -33,7 +33,7 @@ export default function sx(transformedSx, { className, style }) {
   }
 
   return {
-    className: `${sxClass}${className ? ` ${className}` : ''}`,
+    className: `${sxClass}${className ? `${className}` : ''}`,
     style: {
       ...varStyles,
       ...style,

packages/pigment-css-react/tests/sx/sx-runtime.test.js

@@ -0,0 +1,49 @@
+import { expect } from 'chai';
+import sx from '../../src/sx';
+
+describe('Pigment CSS - sx runtime', () => {
+  it('merge className and style', () => {
+    expect(sx('foo', { className: 'bar', style: { color: 'red' } })).to.deep.equal({
+      className: 'foo bar',
+      style: { color: 'red' },
+    });
+  });
+
+  it('merge vars', () => {
+    expect(
+      sx(
+        { className: 'foo', vars: { foo: ['foo'] } },
+        { className: 'bar', style: { color: 'red' } },
+      ),
+    ).to.deep.equal({
+      className: 'foo bar',
+      style: { '--foo': 'foo', color: 'red' },
+    });
+  });
+
+  it('support array', () => {
+    const disabled = false;
+    const color = 'secondary';
+    expect(
+      sx(
+        [
+          'foo',
+          disabled
+            ? { className: 'bar', vars: { bar: ['bar', false] } }
+            : { className: 'baz', vars: { baz: ['baz', false] } },
+          color === 'primary' && 'red',
+        ],
+        {
+          className: 'root',
+          style: { color: 'blue' },
+        },
+      ),
+    ).to.deep.equal({
+      className: 'foo baz root',
+      style: {
+        color: 'blue',
+        '--baz': 'baz',
+      },
+    });
+  });
+});