diff --git a/src/html.ts b/src/html.ts
deleted file mode 100644
index 747aa44..0000000
--- a/src/html.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-// Ref: lib.dom.d.ts
-module.exports = {
- a: 'HTMLAnchorElement',
- abbr: 'HTMLElement',
- address: 'HTMLElement',
- area: 'HTMLAreaElement',
- article: 'HTMLElement',
- aside: 'HTMLElement',
- audio: 'HTMLAudioElement',
- b: 'HTMLElement',
- base: 'HTMLBaseElement',
- bdi: 'HTMLElement',
- bdo: 'HTMLElement',
- blockquote: 'HTMLQuoteElement',
- body: 'HTMLBodyElement',
- br: 'HTMLBRElement',
- button: 'HTMLButtonElement',
- canvas: 'HTMLCanvasElement',
- caption: 'HTMLTableCaptionElement',
- cite: 'HTMLElement',
- code: 'HTMLElement',
- col: 'HTMLTableColElement',
- colgroup: 'HTMLTableColElement',
- data: 'HTMLDataElement',
- datalist: 'HTMLDataListElement',
- dd: 'HTMLElement',
- del: 'HTMLModElement',
- details: 'HTMLDetailsElement',
- dfn: 'HTMLElement',
- dialog: 'HTMLDialogElement',
- div: 'HTMLDivElement',
- dl: 'HTMLDListElement',
- dt: 'HTMLElement',
- em: 'HTMLElement',
- embed: 'HTMLEmbedElement',
- fieldset: 'HTMLFieldSetElement',
- figcaption: 'HTMLElement',
- figure: 'HTMLElement',
- footer: 'HTMLElement',
- form: 'HTMLFormElement',
- h1: 'HTMLHeadingElement',
- h2: 'HTMLHeadingElement',
- h3: 'HTMLHeadingElement',
- h4: 'HTMLHeadingElement',
- h5: 'HTMLHeadingElement',
- h6: 'HTMLHeadingElement',
- head: 'HTMLHeadElement',
- header: 'HTMLElement',
- hgroup: 'HTMLElement',
- hr: 'HTMLHRElement',
- html: 'HTMLHtmlElement',
- i: 'HTMLElement',
- iframe: 'HTMLIFrameElement',
- img: 'HTMLImageElement',
- input: 'HTMLInputElement',
- ins: 'HTMLModElement',
- kbd: 'HTMLElement',
- label: 'HTMLLabelElement',
- legend: 'HTMLLegendElement',
- li: 'HTMLLIElement',
- link: 'HTMLLinkElement',
- main: 'HTMLElement',
- map: 'HTMLMapElement',
- mark: 'HTMLElement',
- menu: 'HTMLMenuElement',
- meta: 'HTMLMetaElement',
- meter: 'HTMLMeterElement',
- nav: 'HTMLElement',
- noscript: 'HTMLElement',
- object: 'HTMLObjectElement',
- ol: 'HTMLOListElement',
- optgroup: 'HTMLOptGroupElement',
- option: 'HTMLOptionElement',
- output: 'HTMLOutputElement',
- p: 'HTMLParagraphElement',
- picture: 'HTMLPictureElement',
- pre: 'HTMLPreElement',
- progress: 'HTMLProgressElement',
- q: 'HTMLQuoteElement',
- rp: 'HTMLElement',
- rt: 'HTMLElement',
- ruby: 'HTMLElement',
- s: 'HTMLElement',
- samp: 'HTMLElement',
- script: 'HTMLScriptElement',
- search: 'HTMLElement',
- section: 'HTMLElement',
- select: 'HTMLSelectElement',
- slot: 'HTMLSlotElement',
- small: 'HTMLElement',
- source: 'HTMLSourceElement',
- span: 'HTMLSpanElement',
- strong: 'HTMLElement',
- style: 'HTMLStyleElement',
- sub: 'HTMLElement',
- summary: 'HTMLElement',
- sup: 'HTMLElement',
- table: 'HTMLTableElement',
- tbody: 'HTMLTableSectionElement',
- td: 'HTMLTableCellElement',
- template: 'HTMLTemplateElement',
- textarea: 'HTMLTextAreaElement',
- tfoot: 'HTMLTableSectionElement',
- th: 'HTMLTableCellElement',
- thead: 'HTMLTableSectionElement',
- time: 'HTMLTimeElement',
- title: 'HTMLTitleElement',
- tr: 'HTMLTableRowElement',
- track: 'HTMLTrackElement',
- u: 'HTMLElement',
- ul: 'HTMLUListElement',
- var: 'HTMLElement',
- video: 'HTMLVideoElement',
- wbr: 'HTMLElement',
-}
diff --git a/src/index.ts b/src/index.ts
index 621f19b..d6ab7f1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,7 +3,6 @@ import { type PluginCreator } from 'postcss'
import selectorParser = require('postcss-selector-parser')
import atImport = require('postcss-import')
import path = require('node:path')
-const html = require('./html')
const key = require('./key')
declare module 'postcss-selector-parser' {
@@ -27,7 +26,11 @@ type Parsed = Record<
>
function render(parsed: Parsed): string {
- let interfaceDefinitions = ''
+ let interfaceDefinitions = `type ReactHTMLProps<
+ Tag extends keyof React.ReactHTML
+> = React.ReactHTML[Tag] extends React.DetailedHTMLFactory
+ ? React.DetailedHTMLProps
+ : React.DetailedHTMLProps, HTMLElement>\n\n`
const jsxElements: Record = {}
// Normalize
@@ -101,12 +104,7 @@ function render(parsed: Parsed): string {
const attributeEntries = Object.entries(attributes)
- let htmlElement = 'HTMLElement'
- if (tag in html) {
- htmlElement = html[tag as keyof typeof html]
- }
-
- let interfaceDefinition = `interface ${interfaceName} extends React.DetailedHTMLProps, ${htmlElement}> {\n`
+ let interfaceDefinition = `interface ${interfaceName} extends ReactHTMLProps<'${tag}'> {\n`
discriminatorAttributes.forEach((attr) => {
interfaceDefinition += ` '${attr}'?: never\n`
diff --git a/test/mist.d.ts b/test/mist.d.ts
index 047696c..ab4144f 100644
--- a/test/mist.d.ts
+++ b/test/mist.d.ts
@@ -1,18 +1,24 @@
-interface Mist_button extends React.DetailedHTMLProps, HTMLButtonElement> {
+type ReactHTMLProps<
+ Tag extends keyof React.ReactHTML
+> = React.ReactHTML[Tag] extends React.DetailedHTMLFactory
+ ? React.DetailedHTMLProps
+ : React.DetailedHTMLProps, HTMLElement>
+
+interface Mist_button extends ReactHTMLProps<'button'> {
'data-variant'?: 'primary' | 'secondary'
style?: { '--highlightColor'?: string } & React.CSSProperties
}
-interface Mist_div extends React.DetailedHTMLProps, HTMLDivElement> {
+interface Mist_div extends ReactHTMLProps<'div'> {
'data-component'?: never
}
-interface Mist_div_data_component_card extends React.DetailedHTMLProps, HTMLDivElement> {
+interface Mist_div_data_component_card extends ReactHTMLProps<'div'> {
'data-component': 'card'
'data-size'?: 'sm' | 'xl'
}
-interface Mist_div_data_component_card_title extends React.DetailedHTMLProps, HTMLDivElement> {
+interface Mist_div_data_component_card_title extends ReactHTMLProps<'div'> {
'data-component': 'card-title'
}