feat(exports): Setup ESM first (#21)

* feat(exports): Setup ESM first

* Switch to Vitest

.github/workflows/ci.yml

@@ -26,4 +26,4 @@ jobs:
       - run: yarn install --immutable
       - run: yarn compile
       - run: yarn lint
-      - run: yarn test --forbid-only
+      - run: yarn test

eslint.config.mjs → eslint.config.js

@@ -112,8 +112,8 @@ export default eslintTs.config(
       "@stylistic/switch-colon-spacing": "error",
       "@typescript-eslint/ban-types": "error",
       "@typescript-eslint/consistent-type-assertions": "error",
-      "@typescript-eslint/consistent-type-exports": "off",
-      "@typescript-eslint/consistent-type-imports": ["off", { fixStyle: "inline-type-imports" }],
+      "@typescript-eslint/consistent-type-exports": "error",
+      "@typescript-eslint/consistent-type-imports": ["error", { fixStyle: "inline-type-imports" }],
       "@typescript-eslint/dot-notation": "error",
       "@typescript-eslint/explicit-function-return-type": ["error", { allowExpressions: true }],
       "@typescript-eslint/explicit-member-accessibility": "error",

package.json

@@ -16,24 +16,39 @@
     "emotion",
     "styled-components"
   ],
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "source": "./src/main.ts",
+  "main": "./dist/main.cjs",
+  "module": "./dist/main.js",
+  "unpkg": "./dist/main.umd.cjs",
+  "types": "./dist/main.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/main.js",
+      "require": "./dist/main.cjs",
+      "types": "./dist/main.d.ts",
+      "default": "./dist/main.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
-    "dist/",
-    "src/"
+    "./dist",
+    "./src",
+    "./package.json"
   ],
   "engines": {
     "node": ">=18"
   },
   "packageManager": "[email protected]",
   "scripts": {
-    "build": "tsc -p tsconfig.prod.json",
-    "check": "yarn compile && yarn lint && yarn test",
+    "build": "vite build",
+    "check": "yarn compile && yarn lint && yarn test --run",
     "compile": "tsc",
     "docs": "typedoc",
     "lint": "eslint .",
     "release": "semantic-release",
-    "test": "NODE_ENV=test mocha \"test/**/*.test.ts\""
+    "test": "NODE_ENV=test vitest"
   },
   "devDependencies": {
     "@assertive-ts/core": "^2.1.0",
@@ -43,7 +58,6 @@
     "@stylistic/eslint-plugin": "^2.2.2",
     "@types/eslint__eslintrc": "^2.1.1",
     "@types/eslint__js": "^8.42.3",
-    "@types/mocha": "^10.0.7",
     "@types/node": "^20.14.8",
     "eslint": "^9.5.0",
     "eslint-import-resolver-typescript": "^3.6.1",
@@ -53,15 +67,15 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsdoc": "^48.3.0",
     "eslint-plugin-sonarjs": "^1.0.3",
-    "expect-type": "^0.19.0",
-    "mocha": "^10.4.0",
     "semantic-release": "^24.0.0",
     "semantic-release-yarn": "^3.0.2",
-    "ts-node": "^10.9.2",
     "typedoc": "^0.26.2",
     "typedoc-plugin-markdown": "^4.1.0",
     "typedoc-plugin-merge-modules": "^5.1.0",
     "typescript": "^5.5.2",
-    "typescript-eslint": "^7.13.1"
+    "typescript-eslint": "^7.13.1",
+    "vite": "^5.3.1",
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^1.6.0"
   }
 }

src/lib/mergeCssVars.ts

@@ -1,6 +1,6 @@
-import { NonEmptyArray } from "../helpers/common";
+import { type CssVarContext, makeCssVars } from "./makeCssVars";
 
-import { CssVarContext, makeCssVars } from "./makeCssVars";
+import type { NonEmptyArray } from "../helpers/common";
 
 /**
  * Recursively merge all CssVarContext on an array into a single CssVarContext.

src/main.ts

@@ -0,0 +1,6 @@
+export { makeCssVars } from "./lib/makeCssVars";
+export { mergeCssVars } from "./lib/mergeCssVars";
+
+export type { NonEmptyArray } from "./helpers/common";
+export type { CssVarContext, CssVars, VarKey } from "./lib/makeCssVars";
+export type { MergeVars } from "./lib/mergeCssVars";

test/unit/helpers/common.test.ts

@@ -0,0 +1,13 @@
+import { expectTypeOf, it, suite } from "vitest";
+
+import type { NonEmptyArray } from "../../../src/main";
+
+suite("[Unit] common.test.ts", () => {
+  it("defines the proper types", () => {
+    expectTypeOf<NonEmptyArray<number>>().toMatchTypeOf([1]);
+    expectTypeOf<NonEmptyArray<number>>().toMatchTypeOf([1, 2]);
+    expectTypeOf<NonEmptyArray<number>>().toMatchTypeOf([1, 2, 3]);
+
+    expectTypeOf<NonEmptyArray<number>>().not.toMatchTypeOf([]);
+  });
+});

test/unit/lib/makeCssVars.test.ts

@@ -1,8 +1,23 @@
 import { expect } from "@assertive-ts/core";
+import { describe, expectTypeOf, it, suite } from "vitest";
 
-import { makeCssVars } from "../../../src/lib/makeCssVars";
+import { type CssVarContext, type CssVars, type VarKey, makeCssVars } from "../../../src/lib/makeCssVars";
 
-describe("[Unit] makeCssVars.test.ts", () => {
+type OneVar = `
+  --gap: 10;
+`;
+
+type MultiVars = `
+  --color: red;
+  --gap: 10;
+`;
+
+const { cssvar, definitions, overwrite } = makeCssVars(`
+  --color: red;
+  --gap: 10;
+`);
+
+suite("[Unit] makeCssVars.test.ts", () => {
   it("cretates a cssvar context object", () => {
     const context = makeCssVars(`
       --primary-color: red;
@@ -14,39 +29,70 @@ describe("[Unit] makeCssVars.test.ts", () => {
 
   describe(".cssvar", () => {
     it("returns the key on a cssvar function syntax", () => {
-      const { cssvar } = makeCssVars(`
-        --primary-color: red;
-        --secondary-color: blue;
-      `);
+      expect(cssvar("color")).toBeEqual("var(--color)");
+      expect(cssvar("gap")).toBeEqual("var(--gap)");
+    });
 
-      expect(cssvar("primary-color")).toBeEqual("var(--primary-color)");
-      expect(cssvar("secondary-color")).toBeEqual("var(--secondary-color)");
+    it("defines the proper types", () => {
+      expectTypeOf(cssvar("color")).toEqualTypeOf<"var(--color)">();
+      expectTypeOf(cssvar("gap")).toEqualTypeOf<"var(--gap)">();
+      // @ts-expect-error wrong var name
+      expectTypeOf(cssvar("foo")).not.toEqualTypeOf<"var(--foo)">();
     });
   });
 
   describe("#definitions", () => {
     it("contains the definitions passed to the make the css vars", () => {
-      const { definitions } = makeCssVars(`
-        --primary-color: red;
-        --secondary-color: blue;
-      `);
-
-      expect(definitions).toBeEqual(`
-        --primary-color: red;
-        --secondary-color: blue;
-      `);
+      expect(definitions).toBeEqual("\n  --color: red;\n  --gap: 10;\n");
+    });
+
+    it("defines the proper types", () => {
+      expectTypeOf(definitions).toEqualTypeOf<MultiVars>();
     });
   });
 
   describe(".overwrite", () => {
     it("creates a single css definition with the key and the value passed", () => {
-      const { overwrite } = makeCssVars(`
-        --gap: 30;
-        --primary-color: red;
-      `);
-
       expect(overwrite("gap", 50)).toBeEqual("--gap: 50;");
-      expect(overwrite("primary-color", "blue")).toBeEqual("--primary-color: blue;");
+      expect(overwrite("color", "blue")).toBeEqual("--color: blue;");
     });
+
+    it("defines the proper types", () => {
+      expectTypeOf(overwrite("color", "blue")).toEqualTypeOf<"--color: blue;">();
+      expectTypeOf(overwrite("gap", 50)).toEqualTypeOf<"--gap: 50;">();
+      // @ts-expect-error wrong var name
+      expectTypeOf(overwrite("foo", false)).not.toEqualTypeOf<"--foo: false;">();
+    });
+  });
+
+  it("defines the proper types", () => {
+    expectTypeOf<VarKey<"...">>().toBeNever();
+    expectTypeOf<VarKey<"--gap: 10;">>().toEqualTypeOf<"gap">();
+    expectTypeOf<VarKey<OneVar>>().toEqualTypeOf<"gap">();
+
+    expectTypeOf<CssVars<"...">>().toBeNever();
+    expectTypeOf<CssVars<"--gap: 10;">>().toEqualTypeOf<"gap">();
+    expectTypeOf<CssVars<MultiVars>>().toEqualTypeOf<"color" | "gap">();
+
+    expectTypeOf<CssVarContext<"...">>().toMatchTypeOf<{
+      cssvar: (varname: never) => `var(--${never})`;
+      definitions: "...";
+      overwrite: (varname: never, value: string | number) => `--${never}: ${typeof value};`;
+    }>();
+    expectTypeOf<CssVarContext<"--gap: 10;">>().toMatchTypeOf<{
+      cssvar: (varname: "gap") => "var(--gap)";
+      definitions: "--gap: 10;";
+      overwrite: (varname: "gap", value: string | number) => `--gap: ${typeof value};`;
+    }>();
+    expectTypeOf<CssVarContext<OneVar>>().toMatchTypeOf<{
+      cssvar: (varname: "gap") => "var(--gap)";
+      definitions: OneVar;
+      overwrite: (varname: "gap", value: string | number) => `--gap: ${typeof value};`;
+    }>();
+    expectTypeOf<CssVarContext<MultiVars>>().toMatchTypeOf<{
+      cssvar: (varname: "color" | "gap") => `var(--${typeof varname})`;
+      definitions: MultiVars;
+      overwrite: (varname: "color" | "gap", value: string | number) => `--${typeof varname}: ${typeof value};`;
+    }>();
   });
 });