feat(core): Add mergeCssVars function (#3)

src/helpers/common.ts

@@ -0,0 +1,4 @@
+/**
+ * Helpful alias to define non-empty arrays
+ */
+export type NonEmptyArray<T> = [T, ...T[]];

src/index.ts

@@ -4,3 +4,8 @@ export {
   VarKey,
   makeCssVars,
 } from "./lib/makeCssVars";
+
+export {
+  MergeVars,
+  mergeCssVars,
+} from "./lib/mergeCssVars";

src/lib/mergeCssVars.ts

@@ -0,0 +1,52 @@
+import { NonEmptyArray } from "../helpers/common";
+
+import { CssVarContext, makeCssVars } from "./makeCssVars";
+
+/**
+ * Recursively merge all CssVarContext on an array into a single CssVarContext.
+ */
+export type MergeVars<T extends NonEmptyArray<CssVarContext<string>>> =
+  T extends [infer H, ...infer R]
+    ? H extends CssVarContext<infer T2>
+      ? R extends NonEmptyArray<CssVarContext<string>>
+        ? MergeVars<R> extends CssVarContext<infer T3>
+          ? CssVarContext<`${T2}${T3}`>
+          : never
+        : H
+      : never
+    : never;
+
+/**
+ * Merges two or more `CssVarContext` object into a single context. Usefull to
+ * make the css variable definitions modular and use the all together from a
+ * single place.
+ *
+ * @example
+ * ```ts
+ * export const baseCssVars = makeCssVars(`
+ *   --primary-color: red;
+ *   --secondary-color: blue;
+ * `);
+ *
+ * export const navCssVars = makeCssVars(`
+ *   --gap: 5%;
+ *   --nav-width: 500;
+ * `);
+ *
+ * export const mainCssVars = mergeCssVars(baseCssVars, navCssVars);
+ * ```
+ *
+ * @param cssVars the `CssVarContext` objects to merge
+ * @returns a merged `CssVarContext` object
+ */
+export function mergeCssVars<T extends NonEmptyArray<CssVarContext<string>>>(...cssVars: T): MergeVars<T> {
+  const allDefinitions = cssVars.reduce<string>((acc, cssVar) => {
+    const separator = cssVar.definitions.startsWith("\n")
+      ? ""
+      : "\n";
+
+    return `${acc}${separator}${cssVar.definitions}`;
+  }, "");
+
+  return makeCssVars(allDefinitions) as MergeVars<T>;
+}

test/types/helpers/common.typetest.ts

@@ -0,0 +1,9 @@
+import { expectTypeOf } from "expect-type";
+
+import { NonEmptyArray } from "../../../src/helpers/common";
+
+expectTypeOf<NonEmptyArray<number>>().toMatchTypeOf([1]);
+expectTypeOf<NonEmptyArray<number>>().toMatchTypeOf([1, 2]);
+expectTypeOf<NonEmptyArray<number>>().toMatchTypeOf([1, 2, 3]);
+
+expectTypeOf<NonEmptyArray<number>>().not.toMatchTypeOf([]);

test/types/index.typetest.ts

@@ -1,7 +1,9 @@
 import { expectTypeOf } from "expect-type";
 
-import { CssVarContext, CssVars, VarKey } from "../../src/index";
+import { NonEmptyArray } from "../../src/helpers/common";
+import { CssVarContext, CssVars, VarKey, MergeVars } from "../../src/index";
 
 expectTypeOf<CssVarContext<string>>().not.toBeAny();
 expectTypeOf<CssVars<string>>().not.toBeAny();
 expectTypeOf<VarKey<string>>().not.toBeAny();
+expectTypeOf<MergeVars<NonEmptyArray<CssVarContext<string>>>>().not.toBeAny();

test/types/lib/mergeCssVars.typetest.ts

@@ -0,0 +1,28 @@
+import { expectTypeOf } from "expect-type";
+
+import { CssVarContext, makeCssVars } from "../../../src/lib/makeCssVars";
+import { mergeCssVars, MergeVars } from "../../../src/lib/mergeCssVars";
+
+type AllVars = `
+  --primary-color: red;
+  --secondary-color: blue;
+
+  --gap: 5%;
+  --nav-width: 500;
+`;
+
+const baseCssVars = makeCssVars(`
+  --primary-color: red;
+  --secondary-color: blue;
+`);
+
+const navCssVars = makeCssVars(`
+  --gap: 5%;
+  --nav-width: 500;
+`);
+
+const mainCssVars = mergeCssVars(baseCssVars, navCssVars);
+
+expectTypeOf<MergeVars<[typeof baseCssVars, typeof navCssVars]>>().toMatchTypeOf<CssVarContext<AllVars>>();
+
+expectTypeOf(mainCssVars).toMatchTypeOf<CssVarContext<AllVars>>();

test/unit/index.test.ts

@@ -1,10 +1,10 @@
 import { expect } from "@stackbuilders/assertive-ts";
 
-import { makeCssVars } from "../../src/index";
+import { makeCssVars, mergeCssVars } from "../../src/index";
 
 describe("[Unit] index.test.ts", () => {
   it("exports the lib functions", () => {
-
     expect(makeCssVars).toExist();
+    expect(mergeCssVars).toExist();
   });
 });

test/unit/lib/mergeCssVars.test.ts

@@ -0,0 +1,30 @@
+import { expect } from "@stackbuilders/assertive-ts";
+
+import { makeCssVars } from "../../../src/lib/makeCssVars";
+import { mergeCssVars } from "../../../src/lib/mergeCssVars";
+
+const baseCssVars = makeCssVars(`
+  --primary-color: red;
+  --secondary-color: blue;
+`);
+
+const navCssVars = makeCssVars(`
+  --gap: 5%;
+  --nav-width: 500;
+`);
+
+const mergedDefinitions = `
+  --primary-color: red;
+  --secondary-color: blue;
+
+  --gap: 5%;
+  --nav-width: 500;
+`;
+
+describe("[Unit] mergeCssVars.test.ts", () => {
+  it("merges all contexts into a single one", () => {
+    const { definitions } = mergeCssVars(baseCssVars, navCssVars);
+
+    expect(definitions).toBeEqual(mergedDefinitions);
+  });
+});