fix "generateStyles()" typings

microsoft · Feb 22, 2022 · 8432f3f · 8432f3f
1 parent dd4ba16
commit 8432f3f
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 14 deletions.
diff --git a/packages/core/src/shorthands/borderColor.ts b/packages/core/src/shorthands/borderColor.ts
@@ -34,5 +34,5 @@ export function borderColor(
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-color
  */
 export function borderColor(...values: CSS.Property.BorderColor[]): BorderColorStyle {
-  return generateStyles('border', 'Color', ...values);
+  return generateStyles<BorderColorStyle>('border', 'Color', ...values);
 }
diff --git a/packages/core/src/shorthands/borderStyle.ts b/packages/core/src/shorthands/borderStyle.ts
@@ -34,5 +34,5 @@ export function borderStyle(
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
  */
 export function borderStyle(...values: CSS.Property.BorderStyle[]): BorderStyleStyle {
-  return generateStyles('border', 'Style', ...values);
+  return generateStyles<BorderStyleStyle>('border', 'Style', ...values);
 }
diff --git a/packages/core/src/shorthands/borderWidth.ts b/packages/core/src/shorthands/borderWidth.ts
@@ -37,5 +37,5 @@ export function borderWidth(
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
  */
 export function borderWidth(...values: CSS.Property.BorderWidth<GriffelStylesCSSValue>[]): BorderWidthStyle {
-  return generateStyles('border', 'Width', ...values);
+  return generateStyles<BorderWidthStyle>('border', 'Width', ...values);
 }
diff --git a/packages/core/src/shorthands/generateStyles.ts b/packages/core/src/shorthands/generateStyles.ts
@@ -1,24 +1,24 @@
-import { GriffelStylesCSSValue, GriffelStylesStrictCSSObject } from '../types';
+import { GriffelStylesCSSValue } from '../types';
 
 type DirectionalProperties = 'border' | 'padding' | 'margin';
 
 const positionMap = ['Top', 'Right', 'Bottom', 'Left'];
 
-export function generateStyles(
+export function generateStyles<Styles extends Record<string, GriffelStylesCSSValue>>(
   property: DirectionalProperties,
   suffix: '' | 'Color' | 'Style' | 'Width',
   ...values: GriffelStylesCSSValue[]
-): GriffelStylesStrictCSSObject {
+): Styles {
   const [firstValue, secondValue = firstValue, thirdValue = firstValue, fourthValue = secondValue] = values;
   const valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue];
 
-  const styles: GriffelStylesStrictCSSObject = {};
+  const styles: Styles = {} as Styles;
 
   for (let i = 0; i < valuesWithDefaults.length; i += 1) {
     if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) {
-      const newKey = (property + positionMap[i] + suffix) as keyof GriffelStylesStrictCSSObject;
+      const newKey = (property + positionMap[i] + suffix) as keyof Styles;
 
-      styles[newKey] = valuesWithDefaults[i] as unknown as undefined;
+      styles[newKey] = valuesWithDefaults[i] as Styles[keyof Styles];
     }
   }
 

diff --git a/packages/core/src/shorthands/margin.ts b/packages/core/src/shorthands/margin.ts
@@ -29,5 +29,5 @@ export function margin(
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/margin
  */
 export function margin(...values: GriffelStylesCSSValue[]): MarginStyle {
-  return generateStyles('margin', '', ...values);
+  return generateStyles<MarginStyle>('margin', '', ...values);
 }
diff --git a/packages/core/src/shorthands/padding.ts b/packages/core/src/shorthands/padding.ts
@@ -28,6 +28,6 @@ export function padding(
  *
  * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding
  */
-export function padding(...values: GriffelStylesCSSValue[]): PaddingStyle {
-  return generateStyles('padding', '', ...values);
+export function padding(...values: GriffelStylesCSSValue[]) {
+  return generateStyles<PaddingStyle>('padding', '', ...values);
 }
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -2,7 +2,7 @@ import * as CSS from 'csstype';
 
 export type GriffelStylesCSSValue = string | 0;
 
-type GriffeltylesUnsupportedCSSProperties = {
+type GriffelStylesUnsupportedCSSProperties = {
   // We don't support expansion of CSS shorthands
   animation?: never;
   background?: never;
@@ -52,7 +52,7 @@ type GriffelStylesCSSProperties = Omit<
   // We have custom definition for "animationName" and "fontWeight"
   'animationName' | 'fontWeight'
 > &
-  GriffeltylesUnsupportedCSSProperties;
+  GriffelStylesUnsupportedCSSProperties;
 
 export type GriffelStylesStrictCSSObject = GriffelStylesCSSProperties &
   GriffelStylesCSSPseudos & {