Remove automatic camel-casing of CSS custom properties

Fix #50
facebook · Apr 18, 2024 · 60710ee · 60710ee
1 parent 15dd106
commit 60710ee
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 30 deletions.
diff --git a/packages/react-strict-dom/src/native/stylex/customProperties.js b/packages/react-strict-dom/src/native/stylex/customProperties.js
@@ -14,15 +14,11 @@ import { errorMsg } from '../../shared/errorMsg';
 export type MutableCustomProperties = { [string]: string | number };
 export type CustomProperties = $ReadOnly<MutableCustomProperties>;
 
-function camelize(s: string): string {
-  return s.replace(/-./g, (x) => x.toUpperCase()[1]);
-}
-
 function normalizeVariableName(name: string): string {
   if (!name.startsWith('--')) {
     throw new Error("Invalid variable name, must begin with '--'");
   }
-  return camelize(name.substring(2));
+  return name.substring(2);
 }
 
 export function stringContainsVariables(input: string): boolean {

diff --git a/packages/react-strict-dom/tests/css-test.native.js b/packages/react-strict-dom/tests/css-test.native.js
@@ -1119,31 +1119,6 @@ describe('properties: custom property', () => {
     ).toEqual('blue');
   });
 
-  // TODO: this transform should not be supported. Custom properties are case sensitive.
-  test('parses kebab case var to camel case', () => {
-    const customProperties = { testVar: 'red' };
-    expect(
-      resolveCustomPropertyValue(customProperties, ['color', 'var(--test-var)'])
-    ).toEqual('red');
-  });
-
-  // TODO: this transform should not be supported. Custom properties are case sensitive.
-  test('parses kebab case var with a default value', () => {
-    const customProperties = { testVar: 'red' };
-    expect(
-      resolveCustomPropertyValue(customProperties, [
-        'color',
-        'var(--test-var, blue)'
-      ])
-    ).toEqual('red');
-    expect(
-      resolveCustomPropertyValue(customProperties, [
-        'color',
-        'var(--not-found, blue)'
-      ])
-    ).toEqual('blue');
-  });
-
   test('parses a var with a default value containing spaces', () => {
     const customProperties = { color: 'rgb(0,0,0)' };
     expect(