fix: make custom properties optional in created types (#69) (#70)

juice49 · web-flow · commit 672b5758c233 · 2024-11-29T00:57:29.000+01:00
* fix: make custom properties optional in created types (#69) * test: add custom property example to tests
diff --git a/src/index.ts b/src/index.ts
@@ -127,7 +127,7 @@ function render(parsed: Parsed): string {
 
         if (Array.from(properties).length > 0) {
           const propertyEntries = Array.from(properties)
-            .map((prop) => `'${prop}': string`)
+            .map((prop) => `'${prop}'?: string`)
             .join(', ')
           interfaceDefinition += `  style?: { ${propertyEntries} } & React.CSSProperties\n`
         }
diff --git a/test/button.mist.css b/test/button.mist.css
@@ -1,4 +1,5 @@
 button {
+  --highlightColor: rebeccapurple;
   padding: 0.5rem 1rem;
   border-radius: 0.25rem;
   font-weight: bold;
diff --git a/test/mist.d.ts b/test/mist.d.ts
@@ -1,5 +1,6 @@
 interface Mist_button extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
   'data-variant'?: 'primary' | 'secondary'
+  style?: { '--highlightColor'?: string } & React.CSSProperties
 }
 
 interface Mist_div extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {

Original file line number	Diff line number	Diff line change
`@@ -127,7 +127,7 @@ function render(parsed: Parsed): string {`
`127`	`127`
`128`	`128`	`if (Array.from(properties).length > 0) {`
`129`	`129`	`const propertyEntries = Array.from(properties)`
`130`		- .map((prop) => `'${prop}': string`)
	`130`	+ .map((prop) => `'${prop}'?: string`)
`131`	`131`	`.join(', ')`
`132`	`132`	interfaceDefinition += ` style?: { ${propertyEntries} } & React.CSSProperties\n`
`133`	`133`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`button {`
	`2`	`+ --highlightColor: rebeccapurple;`
`2`	`3`	`padding: 0.5rem 1rem;`
`3`	`4`	`border-radius: 0.25rem;`
`4`	`5`	`font-weight: bold;`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`interface Mist_button extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {`
`2`	`2`	`'data-variant'?: 'primary' \| 'secondary'`
	`3`	`+ style?: { '--highlightColor'?: string } & React.CSSProperties`
`3`	`4`	`}`
`4`	`5`
`5`	`6`	`interface Mist_div extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {`