155 lines
2.7 KiB
TypeScript
155 lines
2.7 KiB
TypeScript
// declare namespace React {
|
|
// interface Attributes {
|
|
// css?: string
|
|
// }
|
|
// }
|
|
|
|
interface RecursiveStringObject {
|
|
[modifier: string]: string | RecursiveStringObject;
|
|
}
|
|
|
|
type CSSAttributeValue = string | (string | RecursiveStringObject)[];
|
|
|
|
export type SupportedTag =
|
|
| "a"
|
|
| "abbr"
|
|
| "article"
|
|
| "blockquote"
|
|
| "button"
|
|
| "cite"
|
|
| "code"
|
|
| "details"
|
|
| "div"
|
|
| "figure"
|
|
| "footer"
|
|
| "h1"
|
|
| "h2"
|
|
| "h3"
|
|
| "h4"
|
|
| "hr"
|
|
| "iframe"
|
|
| "img"
|
|
| "input"
|
|
| "ins"
|
|
| "label"
|
|
| "li"
|
|
| "main"
|
|
| "nav"
|
|
| "ol"
|
|
| "output"
|
|
| "p"
|
|
| "pre"
|
|
| "rt"
|
|
| "ruby"
|
|
| "section"
|
|
| "select"
|
|
| "span"
|
|
| "strong"
|
|
| "sub"
|
|
| "summary"
|
|
| "sup"
|
|
| "table"
|
|
| "tbody"
|
|
| "td"
|
|
| "thead"
|
|
| "tr"
|
|
| "ul"
|
|
| "var"
|
|
| "video";
|
|
|
|
type Modifier =
|
|
| "2xl"
|
|
| "active"
|
|
| "after"
|
|
| "backdrop"
|
|
| "before"
|
|
| "contrastMore"
|
|
| "dark"
|
|
| "default"
|
|
| "disabled"
|
|
| "even"
|
|
| "file"
|
|
| "first"
|
|
| "firstLetter"
|
|
| "firstLine"
|
|
| "firstOfType"
|
|
| "focus"
|
|
| "focusVisible"
|
|
| "focusWithin"
|
|
| "forcedColors"
|
|
| "hover"
|
|
| "indeterminate"
|
|
| "invalid"
|
|
| "last"
|
|
| "lastOfType"
|
|
| "ltr"
|
|
| "marker"
|
|
| "max2xl"
|
|
| "maxLg"
|
|
| "maxMd"
|
|
| "maxSm"
|
|
| "maxXl"
|
|
| "md"
|
|
| "motionReduce"
|
|
| "motionSafe"
|
|
| "odd"
|
|
| "only"
|
|
| "open"
|
|
| "placeholder"
|
|
| "prefersContrast"
|
|
| "print"
|
|
| "readOnly"
|
|
| "required"
|
|
| "rtl"
|
|
| "selection"
|
|
| "sm"
|
|
| "target"
|
|
| "visited"
|
|
| "xl";
|
|
|
|
/**
|
|
* Tagged template macro function combining Tailwind classes
|
|
* @example "tw" => tw`p-2 text-center`
|
|
*/
|
|
export type TailwindFunction = {
|
|
(strings: TemplateStringsArray): string;
|
|
(...args: (string | RecursiveStringObject)[]): string;
|
|
} & {
|
|
[key in Modifier]: TailwindFunction;
|
|
} & {
|
|
[tag in SupportedTag]: (
|
|
strings: TemplateStringsArray
|
|
) => React.FunctionComponent<React.JSX.IntrinsicElements[tag]>;
|
|
};
|
|
|
|
/**
|
|
* Tagged template macro function compiling Tailwind styles
|
|
* @example "tws" => tws`p-2 text-center` // { padding: 2, textAlign: "center" }
|
|
*/
|
|
export type TailwindStyleFunction = {
|
|
(strings: TemplateStringsArray): TailwindStyleFunctionReturn;
|
|
(...args: (string | RecursiveStringObject)[]): TailwindStyleFunctionReturn;
|
|
} & {
|
|
[key in Modifier]: TailwindStyleFunction;
|
|
};
|
|
|
|
export const tw: TailwindFunction;
|
|
export const tws: TailwindStyleFunction;
|
|
|
|
type TailwindStyleFunctionReturn = Config extends { tws: infer T } ? T : never;
|
|
|
|
/**
|
|
* Type configuration for the Tailwind style macro
|
|
* @example
|
|
*
|
|
* ```ts
|
|
* declare module "_tailwind_lib/macro" {
|
|
* interface Config {
|
|
* tws: React.CSSProperties;
|
|
* }
|
|
* }
|
|
* ```
|
|
*/
|
|
// eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-empty-object-type
|
|
export interface Config {}
|