diff --git a/types/cxs/component/index.d.ts b/types/cxs/component/index.d.ts new file mode 100644 index 0000000000..e4e6b75d51 --- /dev/null +++ b/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 +> = C extends React.JSXElementConstructor + ? JSX.LibraryManagedAttributes + : React.ComponentPropsWithRef; + +declare const cxsComponent: { + < + Component extends + | keyof JSX.IntrinsicElements + // eslint-disable-next-line @typescript-eslint/no-explicit-any + | React.JSXElementConstructor, + PropsType extends object & ApparentComponentProps + >( + component: Component, + ): (arg: CSSObject | ((arg: PropsType) => CSSObject)) => React.JSXElementConstructor; +}; + +export = cxsComponent; diff --git a/types/cxs/cxs-tests.ts b/types/cxs/cxs-tests.ts new file mode 100644 index 0000000000..b5f2a3bff7 --- /dev/null +++ b/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', +})); diff --git a/types/cxs/index.d.ts b/types/cxs/index.d.ts new file mode 100644 index 0000000000..47ca511b99 --- /dev/null +++ b/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 +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// Minimum TypeScript Version 3.9 +import * as CSS from 'csstype'; + +declare namespace cxs { + type CSSProperties = CSS.Properties; + 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; diff --git a/types/cxs/package.json b/types/cxs/package.json new file mode 100644 index 0000000000..4d9ec4a338 --- /dev/null +++ b/types/cxs/package.json @@ -0,0 +1,6 @@ +{ + "private": true, + "dependencies": { + "csstype": "^2.2.0" + } +} diff --git a/types/cxs/tsconfig.json b/types/cxs/tsconfig.json new file mode 100644 index 0000000000..d485cb3803 --- /dev/null +++ b/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"] +} diff --git a/types/cxs/tslint.json b/types/cxs/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/cxs/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }