feat: adds inset shorthand (#100)

* Adds inset shorthand

* Change files

change/@griffel-core-e9730721-98ad-4971-8976-6f934c35cf1f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Adds inset shorthand",
+  "packageName": "@griffel/core",
+  "email": "bsunderhus@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/core/src/index.ts

@@ -14,6 +14,7 @@ import {
   margin,
   padding,
   overflow,
+  inset,
 } from './shorthands/index';
 
 export const shorthands = {
@@ -30,6 +31,7 @@ export const shorthands = {
   margin,
   padding,
   overflow,
+  inset,
 };
 
 export { createDOMRenderer } from './renderer/createDOMRenderer';

packages/core/src/shorthands/index.ts

@@ -11,3 +11,4 @@ export { gap } from './gap';
 export { margin } from './margin';
 export { padding } from './padding';
 export { overflow } from './overflow';
+export { inset } from './inset';

packages/core/src/shorthands/inset.test.ts

@@ -0,0 +1,57 @@
+import { inset } from './inset';
+
+describe('inset', () => {
+  it('for a given value', () => {
+    expect(inset('12px')).toEqual({
+      bottom: '12px',
+      left: '12px',
+      right: '12px',
+      top: '12px',
+    });
+  });
+
+  it('for given vertical and horizontal values', () => {
+    expect(inset('12px', '24px')).toEqual({
+      bottom: '12px',
+      left: '24px',
+      right: '24px',
+      top: '12px',
+    });
+  });
+
+  it('for given top, horizontal and bottom values', () => {
+    expect(inset('12px', '24px', '36px')).toEqual({
+      bottom: '36px',
+      left: '24px',
+      right: '24px',
+      top: '12px',
+    });
+  });
+
+  it('for given top, right, bottom and left values', () => {
+    expect(inset('12px', '24px', '36px', '48px')).toEqual({
+      bottom: '36px',
+      left: '48px',
+      right: '24px',
+      top: '12px',
+    });
+  });
+
+  it('for a given zero value', () => {
+    expect(inset(0)).toEqual({
+      bottom: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+    });
+  });
+
+  it('for fallback value arrays', () => {
+    expect(inset([0, '12px'], ['auto', '-2px'])).toEqual({
+      bottom: [0, '12px'],
+      left: ['auto', '-2px'],
+      right: ['auto', '-2px'],
+      top: [0, '12px'],
+    });
+  });
+});

packages/core/src/shorthands/inset.ts

@@ -0,0 +1,30 @@
+import type { GriffelStylesStrictCSSObject } from '../types';
+import { InsetInput } from './types';
+
+type InsetStyle = Pick<GriffelStylesStrictCSSObject, 'top' | 'right' | 'bottom' | 'left'>;
+
+export function inset(all: InsetInput): InsetStyle;
+export function inset(vertical: InsetInput, horizontal: InsetInput): InsetStyle;
+export function inset(top: InsetInput, horizontal: InsetInput, bottom: InsetInput): InsetStyle;
+export function inset(top: InsetInput, right: InsetInput, bottom: InsetInput, left: InsetInput): InsetStyle;
+
+/**
+ * A function that implements CSS spec conformant expansion for "inset"
+ *
+ * @example
+ *   inset('10px')
+ *   inset('10px', '5px')
+ *   inset('2px', '4px', '8px')
+ *   inset('1px', 0, '3px', '4px')
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/CSS/inset
+ */
+export function inset(...values: InsetInput[]): InsetStyle {
+  const [firstValue, secondValue = firstValue, thirdValue = firstValue, fourthValue = secondValue] = values;
+  return {
+    top: firstValue,
+    right: secondValue,
+    bottom: thirdValue,
+    left: fourthValue,
+  };
+}

packages/core/src/shorthands/types.ts

@@ -14,3 +14,5 @@ export type MarginInput = ValueOrArray<CSS.Property.Margin<GriffelStylesCSSValue
 export type OverflowInput = ValueOrArray<CSS.Property.Overflow>;
 
 export type PaddingInput = ValueOrArray<CSS.Property.Padding<GriffelStylesCSSValue>>;
+
+export type InsetInput = ValueOrArray<CSS.Property.Inset<GriffelStylesCSSValue>>;