Fix: CSS - More strict required check css.with() #226

packages/css/src/css/index.ts

@@ -346,22 +346,35 @@ if (import.meta.vitest) {
 
   describe.concurrent("css.with()", () => {
     it("css.with() with type restrictions", () => {
-      const myCss = css.with<{
+      const myCss1 = css.with<{
         color: true;
         background: "blue" | "grey";
         border: false;
       }>();
 
-      myCss({
+      myCss1({
         color: "red", // Allow all properties
         background: "blue", // Only some properties are allowed
         // @ts-expect-error: border is not allowed
         border: "none"
       });
-      myCss({
+      myCss1({
+        color: "red",
         // @ts-expect-error: background is allowed only "blue" or "grey"
         background: "red"
       });
+      // @ts-expect-error: color is required
+      myCss1({
+        background: "blue"
+      });
+      // @ts-expect-error: background is required
+      myCss1({
+        color: "red"
+      });
+
+      const myCss2 = css.with<{ size: number; radius?: number }>();
+      // @ts-expect-error: size is required
+      myCss2.raw({ radius: 10 });
     });
 
     it("Basic callback transformation", () => {

packages/css/src/css/types.ts

@@ -9,7 +9,7 @@ type IsRequired<T, K extends keyof T> =
 export type RestrictCSSRule<T extends CSSRule> = {
   [K in keyof T as T[K] extends false ? never : K]: T[K] extends true
     ? K extends keyof CSSRule
-      ? CSSRule[K]
+      ? NonNullable<CSSRule[K]>
       : never
     : T[K];
 } extends infer U