diff --git a/src/index.ts b/src/index.ts
index 23281fb..621f19b 100644
--- 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
index be08ba3..5207d9e 100644
--- 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
index b64cbfd..047696c 100644
--- 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> {