Fix: Skip explicit undefined values in stringifyCSSProperties (#12)

* fix: handle explicit undefined values in CSS props

* docs: add publishing reminder

Author: arkarlov

docs/publishing.md

@@ -0,0 +1,52 @@
+# Manual Package Publishing Flow
+
+1. ✅ Make code changes
+
+Create a branch from `main`, commit and push your changes, then open a Pull Request.  
+Merge the PR into `main` after it's reviewed and tests pass.
+
+2. 🔄 Switch to the `main` branch
+
+Ensure you're on the latest `main` branch:
+
+```bash
+git checkout main
+git pull origin main
+```
+
+3. 🔖 Bump the version using npm
+
+Use [semver](https://semver.org/) to choose the correct bump type:
+
+```bash
+npm version patch   # or minor / major
+```
+
+4. 🚀 Push changes and tags
+
+```bash
+git push
+git push origin vX.Y.Z
+```
+
+5. ✅ Run tests (before build)
+
+```bash
+npm test
+```
+
+6. 🧱 Build the package
+
+```bush
+npm run build
+```
+
+7. 📦 Publish to npm
+
+```bush
+npm publish
+```
+
+8. 📝 (Optional) Add release notes
+
+Create or edit a release on GitHub for the new tag and describe the changes.

package.json

@@ -31,7 +31,8 @@
   },
   "scripts": {
     "build": "tsup",
-    "test": "vitest --config vitest.config.ts"
+    "test": "vitest run --config vitest.config.ts",
+    "test:watch": "vitest --config vitest.config.ts"
   },
   "dependencies": {
     "@emotion/unitless": "^0.10.0"
@@ -45,4 +46,4 @@
   "engines": {
     "node": ">=14.0.0"
   }
-}
+}

src/__tests__/stringifyCSSProperties.test.ts

@@ -25,13 +25,19 @@ describe("stringifyCSSProperties", () => {
     );
   });
 
-  it("throws error for wrong CSS-value", () => {
-    expect(() =>
+  it("skips CSS properties with wrong CSS value", () => {
+    const expected = "padding:5px 10px;color:teal;";
+    const actual = stringifyCSSProperties({
       //@ts-ignore
-      stringifyCSSProperties({ color: { color: "teal" } })
-    ).toThrowError(
-      "Invalid input: value of 'cssProperties' must be string or number."
-    );
+      margin: { top: 10 },
+      padding: "5px 10px",
+      background: undefined,
+      color: "teal",
+      //@ts-ignore
+      border: null,
+    });
+
+    expect(actual).toBe(expected);
   });
 
   it("doesn't change string CSS-value", () => {

src/stringifyCSSProperties.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from "react";
-import { applyCssUnits, camelToKebab } from "./utils";
+import { applyCssUnits, camelToKebab, isCSSPropertyValue } from "./utils";
 
 /**
  * Converts a CSSProperties object into a CSS string.
@@ -20,6 +20,7 @@ export function stringifyCSSProperties(
   const important = isImportant ? "!important" : "";
 
   return Object.entries(cssProperties)
+    .filter(([_, value]) => isCSSPropertyValue(value))
     .map(
       ([key, value]) =>
         `${camelToKebab(key)}:${applyCssUnits(key, value)}${important};`

src/types.ts

@@ -1,5 +1,3 @@
 import { type CSSProperties } from "react";
 
-export type CSSSelector = string;
-
-export type StyleMap = Record<CSSSelector, CSSProperties>;
+export type StyleMap = Record<string, CSSProperties>;

src/utils/index.ts

@@ -2,3 +2,4 @@ export * from "./camelToKebab";
 export * from "./isUnitless";
 export * from "./applyCssUnits";
 export * from "./trimCssSelector";
+export * from "./isCSSPropertyValue";

src/utils/isCSSPropertyValue.ts

@@ -0,0 +1,2 @@
+export const isCSSPropertyValue = (value: unknown): value is number | string =>
+  typeof value === "number" || typeof value === "string";