Parse gap shorthand

stitchesjs · Sep 18, 2020 · 57cb8d2 · 57cb8d2
1 parent 2bf75d5
commit 57cb8d2
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 1 deletion.
diff --git a/packages/core/src/shorthand-parser/index.ts b/packages/core/src/shorthand-parser/index.ts
@@ -186,6 +186,15 @@ export const transition = createPropertyParser(
   }
 );
 
+export const gap = createPropertyParser((tokens: any, css: any, value: any, index: any) => {
+  if (index === 0) {
+    css.rowGap = tokens.space[value] || value;
+    css.columnGap = tokens.space[value] || value;
+  } else {
+    css.columnGap = tokens.space[value] || value;
+  }
+});
+
 export const margin = createPropertyParser((tokens: any, css: any, value: any, index: any) => {
   if (index === 0) {
     css.marginTop = tokens.space[value] || value;

diff --git a/packages/core/src/utils.ts b/packages/core/src/utils.ts
@@ -12,6 +12,7 @@ import {
   borderWidth,
   boxShadow,
   font,
+  gap,
   margin,
   padding,
   transition,
@@ -240,6 +241,7 @@ export const specificityProps: {
   borderTop,
   borderRight,
   textDecoration,
+  gap,
 };
 
 export const getVendorPrefixAndProps = (env: any) => {

diff --git a/packages/core/tests/index.test.ts b/packages/core/tests/index.test.ts
@@ -623,7 +623,8 @@ describe('createCss: mixed(SSR & Client)', () => {
       ",
         "/* STITCHES */
       ./*X*/_fVszNU/*X*/{outline-color:var(--colors-red500);}
-      ./*X*/_hyxNOI/*X*/{gap:var(--space-2);}
+      ./*X*/_fBRTrr/*X*/{row-gap:var(--space-2);}
+      ./*X*/_bXQiUr/*X*/{column-gap:var(--space-2);}
       ./*X*/_bpzGvB/*X*/{margin-top:var(--space-1);}",
       ]
     `);
@@ -1039,6 +1040,24 @@ describe('createCss: mixed(SSR & Client)', () => {
     `);
   });
 
+  test('should handle gap shorthand', () => {
+    const css = createCss({}, null);
+    const atom = css({ gap: '1px 5px' }) as any;
+
+    const { styles } = css.getStyles(() => {
+      expect(atom.toString()).toMatchInlineSnapshot(`"_cKnGEZ _jSCSWZ"`);
+
+      return '';
+    });
+
+    expect(styles.length).toBe(3);
+    expect(styles[2].trim()).toMatchInlineSnapshot(`
+      "/* STITCHES */
+      ./*X*/_jSCSWZ/*X*/{row-gap:1px;}
+      ./*X*/_cKnGEZ/*X*/{column-gap:5px;}"
+    `);
+  });
+
   test('should handle border-top shorthand', () => {
     const css = createCss({}, null);
     const atom = css({ borderTop: '1px solid red' }) as any;

diff --git a/packages/core/tests/shorthand-parser.test.ts b/packages/core/tests/shorthand-parser.test.ts
@@ -11,6 +11,7 @@ import {
   borderRight,
   boxShadow,
   font,
+  gap,
   margin,
   padding,
   transition,
@@ -1005,3 +1006,61 @@ describe('Text decoration shorthand', () => {
     `);
   });
 });
+
+describe('Gap shorthand', () => {
+  test('Handles gap shorthand', () => {
+    // works
+    expect(gap(tokens, '1em')).toMatchInlineSnapshot(`
+      Object {
+        "columnGap": "1em",
+        "rowGap": "1em",
+      }
+    `);
+
+    expect(gap(tokens, '5% 0')).toMatchInlineSnapshot(`
+      Object {
+        "columnGap": "0",
+        "rowGap": "5%",
+      }
+    `);
+
+    expect(gap(tokens, '10px 50px')).toMatchInlineSnapshot(`
+      Object {
+        "columnGap": "50px",
+        "rowGap": "10px",
+      }
+    `);
+
+    expect(gap(tokens, '0')).toMatchInlineSnapshot(`
+      Object {
+        "columnGap": "0",
+        "rowGap": "0",
+      }
+    `);
+  });
+
+  test('Handles gap with tokens', () => {
+    expect(gap(tokens, '1')).toMatchInlineSnapshot(`
+      Object {
+        "columnGap": "5px",
+        "rowGap": "5px",
+      }
+		`);
+
+    expect(gap(tokens, '1 2')).toMatchInlineSnapshot(`
+      Object {
+        "columnGap": "10px",
+        "rowGap": "5px",
+      }
+    `);
+  });
+
+  test('Handles gap with css functions', () => {
+    expect(gap(tokens, 'calc(10px + 100px)')).toMatchInlineSnapshot(`
+      Object {
+        "columnGap": "calc(10px + 100px)",
+        "rowGap": "calc(10px + 100px)",
+      }
+    `);
+  });
+});