Fix error allowing invalid fontWeight values

.changeset/plenty-icons-enjoy.md

@@ -0,0 +1,9 @@
+---
+'@emotion/serialize': major
+---
+
+What: Fix error allowing invalid fontWeight values
+
+Why: The `fontweight` property of CSSObject allows invalid values (e.g. 'wrong'). It's expected behavior is to show an error.
+
+How: Add `validFontWeight` type to `StrictCSSProperties`, declaring which values are only allowed.

packages/serialize/src/index.ts

@@ -13,7 +13,29 @@ type Cursor = {
   next?: Cursor
 }
 
-export type CSSProperties = CSS.PropertiesFallback<number | string>
+type ValidFontWeight =
+  | 'normal'
+  | 'bold'
+  | 'lighter'
+  | 'bolder'
+  | 100
+  | 200
+  | 300
+  | 400
+  | 500
+  | 600
+  | 700
+  | 800
+  | 900
+
+type StrictCSSProperties = Omit<
+  CSS.PropertiesFallback<number | string>,
+  'fontWeight'
+> & {
+  fontWeight?: ValidFontWeight
+}
+
+export type CSSProperties = StrictCSSProperties
 export type CSSPropertiesWithMultiValues = {
   [K in keyof CSSProperties]:
     | CSSProperties[K]
@@ -91,6 +113,13 @@ const processStyleName = /* #__PURE__ */ memoize((styleName: string) =>
     : styleName.replace(hyphenateRegex, '-$&').toLowerCase()
 )
 
+const isValidFontWeight = (value: any): value is ValidFontWeight => {
+  if (typeof value === 'number') {
+    return value >= 100 && value <= 900 && value % 100 === 0
+  }
+  return ['normal', 'bold', 'lighter', 'bolder'].includes(value)
+}
+
 let processStyleValue = (
   key: string,
   value: string | number
@@ -149,6 +178,14 @@ if (isDevelopment) {
       }
     }
 
+    if (key === 'fontWeight') {
+      if (!isValidFontWeight(value)) {
+        throw new Error(
+          `Invalid font-weight value: ${value}. Valid values are: normal, bold, lighter, bolder, or numbers 100-900 in increments of 100.`
+        )
+      }
+    }
+
     const processed = oldProcessStyleValue(key, value)
 
     if (