diff --git a/.changeset/odd-vans-hang.md b/.changeset/odd-vans-hang.md
new file mode 100644
index 0000000..0d8f9e6
--- /dev/null
+++ b/.changeset/odd-vans-hang.md
@@ -0,0 +1,5 @@
+---
+'@navita/engine': minor
+---
+
+css vars will not be automatically hyphenated
diff --git a/packages/engine/src/helpers/declarationsToBlock.ts b/packages/engine/src/helpers/declarationsToBlock.ts
index 3252d53..aefd097 100644
--- a/packages/engine/src/helpers/declarationsToBlock.ts
+++ b/packages/engine/src/helpers/declarationsToBlock.ts
@@ -1,4 +1,4 @@
-import { hyphenateProperty } from "./hypenateProperty";
+import { hyphenateProperty } from "./hyphenateProperty";
 
 // https://github.com/styletron/styletron/blob/b552ddc5050a8cc5eec84a46a299d937d3bb0112/packages/styletron-engine-atomic/src/css.ts#L36
 export function declarationsToBlock(style: Record<string, string | number>): string {
diff --git a/packages/engine/src/helpers/hypenateProperty.ts b/packages/engine/src/helpers/hyphenateProperty.ts
similarity index 81%
rename from packages/engine/src/helpers/hypenateProperty.ts
rename to packages/engine/src/helpers/hyphenateProperty.ts
index da9ce2d..453ad1f 100644
--- a/packages/engine/src/helpers/hypenateProperty.ts
+++ b/packages/engine/src/helpers/hyphenateProperty.ts
@@ -1,9 +1,15 @@
+// Modified from
 // https://github.com/styletron/styletron/blob/b552ddc5050a8cc5eec84a46a299d937d3bb0112/packages/styletron-engine-atomic/src/hyphenate-style-name.ts
 const uppercasePattern = /[A-Z]/g;
 const msPattern = /^ms-/;
+const cssVarPattern = /^--/;
 const cache = {};
 
 export function hyphenateProperty(property: string): string {
+  if (cssVarPattern.test(property)) {
+    return property;
+  }
+
   return property in cache
     ? cache[property]
     : (cache[property] = property
diff --git a/packages/engine/src/processStyles.ts b/packages/engine/src/processStyles.ts
index f97618d..d98dab0 100644
--- a/packages/engine/src/processStyles.ts
+++ b/packages/engine/src/processStyles.ts
@@ -1,7 +1,7 @@
 import type { StyleRule } from "@navita/types";
 import type { Cache } from "./cache";
 import { generateCombinedAtRules } from "./helpers/generateCombinedAtRules";
-import { hyphenateProperty } from "./helpers/hypenateProperty";
+import { hyphenateProperty } from "./helpers/hyphenateProperty";
 import { isMediaQuery } from "./helpers/isMediaQuery";
 import { isNestedSelector } from "./helpers/isNestedSelector";
 import { isObject } from "./helpers/isObject";
diff --git a/packages/engine/tests/src/helpers/hypenateProperty.test.ts b/packages/engine/tests/src/helpers/hyphenateProperty.test.ts
similarity index 70%
rename from packages/engine/tests/src/helpers/hypenateProperty.test.ts
rename to packages/engine/tests/src/helpers/hyphenateProperty.test.ts
index 47f13b0..a2a068a 100644
--- a/packages/engine/tests/src/helpers/hypenateProperty.test.ts
+++ b/packages/engine/tests/src/helpers/hyphenateProperty.test.ts
@@ -1,4 +1,4 @@
-import { hyphenateProperty } from "../../../src/helpers/hypenateProperty";
+import { hyphenateProperty } from "../../../src/helpers/hyphenateProperty";
 
 describe("hypenateProperty", () => {
   it("should return the same value if it is already hyphenated", () => {
@@ -12,4 +12,8 @@ describe("hypenateProperty", () => {
   it('ms- prefix should be lowercase', () => {
     expect(hyphenateProperty('msBackground')).toBe('-ms-background');
   });
+
+  it(`it doesn't hyphenate css vars`, () => {
+    expect(hyphenateProperty('--myVar')).toBe('--myVar');
+  });
 });