add check for css vars in hyphenate properties

eagerpatch · Nov 26, 2023 · 02d1384 · 02d1384
1 parent 5661932
commit 02d1384
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 3 deletions.
diff --git a/.changeset/odd-vans-hang.md 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
@@ -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/...es/engine/src/helpers/hypenateProperty.ts → ...s/engine/src/helpers/hyphenateProperty.ts b/...es/engine/src/helpers/hypenateProperty.ts → ...s/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
@@ -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/...ests/src/helpers/hypenateProperty.test.ts → ...sts/src/helpers/hyphenateProperty.test.ts b/...ests/src/helpers/hypenateProperty.test.ts → ...sts/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');
+  });
 });