Add type definitions for cxs-css/cxs (#45875)

* Add type definitions for cxs-css/cxs

* Address linter/CI issues

* Fix importing and reintroduce ts-expect-error

* Fix tsconfig

* Fix import path in tests

* Omit ts-expect-error

* Try to fix compile error

* Use ts-expect-error instead of $ExpectError

* Remove directive in component

* Remove error-causing callsites

* Prefer interface over props

* Turn off export to fix lint error

types/cxs/component/index.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { CSSObject } from '../index';
+
+type ApparentComponentProps<
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
+> = C extends React.JSXElementConstructor<infer P>
+    ? JSX.LibraryManagedAttributes<C, P>
+    : React.ComponentPropsWithRef<C>;
+
+declare const cxsComponent: {
+    <
+        Component extends
+            | keyof JSX.IntrinsicElements
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            | React.JSXElementConstructor<any>,
+        PropsType extends object & ApparentComponentProps<Component>
+    >(
+        component: Component,
+    ): (arg: CSSObject | ((arg: PropsType) => CSSObject)) => React.JSXElementConstructor<PropsType>;
+};
+
+export = cxsComponent;

types/cxs/cxs-tests.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import cxsComponent = require('cxs/component');
+import cxs = require('cxs');
+
+/**
+ * Standard calls to cxs to generate classNames
+ */
+cxs({
+    color: 'red',
+    ':hover': {
+        color: 'green',
+    },
+});
+
+cxsComponent('div')({
+    fontSize: 24,
+});
+
+/** React component composition */
+const ComponentA = () => React.createElement('div');
+
+cxsComponent(ComponentA)({
+    fontSize: 72,
+});
+
+/** React composition with props callback */
+interface Props {
+    isActive: boolean;
+}
+
+const ComponentB = (props: Props) => React.createElement('div');
+
+cxsComponent(ComponentB)((props: Props) => ({
+    color: props.isActive ? 'blue' : 'purple',
+}));

types/cxs/index.d.ts

@@ -0,0 +1,27 @@
+// Type definitions for cxs 6.2
+// Project: https://github.com/cxs-css/cxs
+// Definitions by: Daniel Eden <https://github.com/daneden>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// Minimum TypeScript Version 3.9
+import * as CSS from 'csstype';
+
+declare namespace cxs {
+    type CSSProperties = CSS.Properties<string | number>;
+    type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject };
+
+    interface CSSObject extends CSSProperties, CSSPseudos {
+        [key: string]: CSSObject | string | number | undefined;
+    }
+}
+
+declare const cxs: {
+    (styles: cxs.CSSObject): string;
+    /** Returns cached CSS as a string for server-side rendering */
+    css: () => string;
+    /** Resets the CSS cache for future renders */
+    reset: () => void;
+    /** Sets a custom className prefix */
+    prefix: (val: string) => void;
+};
+
+export = cxs;

types/cxs/package.json

@@ -0,0 +1,6 @@
+{
+    "private": true,
+    "dependencies": {
+        "csstype": "^2.2.0"
+    }
+}

types/cxs/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": ["es6"],
+        "jsx": "react",
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": ["../"],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": ["index.d.ts", "cxs-tests.ts"]
+}

types/cxs/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }