Add versus classnames

Author: Andrii Kirmas

package-lock.json

@@ -42,9 +42,11 @@
     "@types/react": ">=15"
   },
   "devDependencies": {
+    "@types/classnames": "^2.2.11",
     "@types/node": "^14.14.25",
     "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.1",
+    "classnames": "^2.2.6",
     "git-hooks-wrapper": "^0.7.1",
     "jest": "^26.6.3",
     "np": "^7.3.0",

package.json

@@ -1,4 +1,4 @@
-export type { ClassNames } from "./defs"
+export type { ClassNames, ClassValue } from "./defs"
 
 import classNamingCtx from "./ctx"
 import classNamesCheck from "./check"

src/index.ts

@@ -0,0 +1,36 @@
+import {classNamesCheck, classNamingBasic, classNamingCtx} from "."
+
+import classnames_default from "classnames"
+import classnames_bind from "classnames/bind"
+
+const cssModule = {
+  "class1": "hash1",
+  "class2": "hash2"
+}
+, importRawCss = {}
+
+
+it("usage interface", () => {
+  const {class1} = classNamesCheck(importRawCss)
+
+  expect(
+    classNamingBasic({class1})
+  ).toStrictEqual({
+    //@ts-expect-error `classnames` has no possibility for type hints
+    className:  classnames_default<"class2">("class1")
+  })
+})
+
+it("css module", () => expect({
+  className: classnames_bind.bind(cssModule)(
+    // No error on redundant CSS-class
+    "class1", "class3"
+  )
+}).toStrictEqual(
+  classNamingCtx({classNames: cssModule})(
+    "class1",
+    //@ts-expect-error
+    "class3"
+  )
+))
+