diff --git a/src/formatters/camelToKebab.ts b/src/formatters/camelToKebab.ts new file mode 100644 index 0000000..f84b75d --- /dev/null +++ b/src/formatters/camelToKebab.ts @@ -0,0 +1,3 @@ +export function camelToKebab(str: string) { + return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`); +} diff --git a/src/formatters/index.ts b/src/formatters/index.ts new file mode 100644 index 0000000..f021b1c --- /dev/null +++ b/src/formatters/index.ts @@ -0,0 +1 @@ +export * from "./camelToKebab"; diff --git a/src/index.ts b/src/index.ts index e69de29..de22a7d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -0,0 +1,4 @@ +export * from "./stringifyCSSProperties"; +export * from "./stringifyStyles"; + +export * from "./types"; diff --git a/src/stringifyCSSProperties.ts b/src/stringifyCSSProperties.ts new file mode 100644 index 0000000..7c5134f --- /dev/null +++ b/src/stringifyCSSProperties.ts @@ -0,0 +1,14 @@ +import { type CSSProperties } from "react"; +import { camelToKebab } from "./formatters"; + +export function stringifyCSSProperties( + cssProperties: CSSProperties, + important: boolean = false +) { + return Object.entries(cssProperties) + .map( + ([key, value]) => + `${camelToKebab(key)}:${value}${important ? "!important" : ""}` + ) + .join("; "); +} diff --git a/src/stringifyStyles.ts b/src/stringifyStyles.ts new file mode 100644 index 0000000..ab90662 --- /dev/null +++ b/src/stringifyStyles.ts @@ -0,0 +1,13 @@ +import { type StyleObject } from "./types"; +import { stringifyCSSProperties } from "./stringifyCSSProperties"; + +export function stringifyStyles( + styleObject: StyleObject, + important: boolean = false +) { + return Object.entries(styleObject) + .map( + ([key, value]) => `${key}{${stringifyCSSProperties(value, important)}}` + ) + .join(" "); +} diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..6b1a6b1 --- /dev/null +++ b/src/types.ts @@ -0,0 +1,5 @@ +import { type CSSProperties } from "react"; + +export type CSSSelector = string; + +export type StyleObject = Record;