fix: don't capitalize -ms vendor prefix in reactCompat mode

Fixes #2
remarkablemark · May 30, 2022 · 208926b · 208926b
1 parent d3fa894
commit 208926b
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 59 deletions.
diff --git a/src/__snapshots__/index.test.ts.snap b/src/__snapshots__/index.test.ts.snap
diff --git a/src/index.test.ts b/src/index.test.ts
@@ -26,7 +26,13 @@ it('parses common styles to object', () => {
     font-size: 42px;
     z-index: -1;
   `;
-  expect(styleToJS(style)).toMatchSnapshot();
+  expect(styleToJS(style)).toMatchInlineSnapshot(`
+    Object {
+      "color": "#f00",
+      "fontSize": "42px",
+      "zIndex": "-1",
+    }
+  `);
 });
 
 it('parses style with vendor prefix to object', () => {
@@ -44,33 +50,76 @@ it('parses style with vendor prefix to object', () => {
     background: -o-linear-gradient(top, white, black);
     background: linear-gradient(to bottom, white, black);
   `;
-  expect(styleToJS(style)).toMatchSnapshot();
+  expect(styleToJS(style)).toMatchInlineSnapshot(`
+    Object {
+      "background": "linear-gradient(to bottom, white, black)",
+      "display": "grid",
+      "mozUserSelect": "none",
+      "msUserSelect": "none",
+      "oTransition": "all .5s",
+      "transition": "all .5s",
+      "userSelect": "none",
+      "webkitTransition": "all .5s",
+      "webkitUserSelect": "none",
+    }
+  `);
 });
 
 it('parses background style to object', () => {
   const style =
     'background: url(data:image/png; base64,ivborw0kggoaaaansaaaabgdbtueaalgpc/xhbqaaaafzmuexurczmzpf399fx1+bm5mzy9avzxbesmgces5/p8/t9furvcrmu73jwlzosgsiizurcjo/ad+eqjjb4hv8bft+idpqocx1wjosbfhh2xssxeiyn3uli/6mnree07uiwjev8u8czwyuqdlkpg1bkb4nnm+veanfhqn1k4+gpt6ugqcvu2h2ovuif)';
-  expect(styleToJS(style)).toMatchSnapshot();
+  expect(styleToJS(style)).toMatchInlineSnapshot(`
+    Object {
+      "background": "url(data:image/png; base64,ivborw0kggoaaaansaaaabgdbtueaalgpc/xhbqaaaafzmuexurczmzpf399fx1+bm5mzy9avzxbesmgces5/p8/t9furvcrmu73jwlzosgsiizurcjo/ad+eqjjb4hv8bft+idpqocx1wjosbfhh2xssxeiyn3uli/6mnree07uiwjev8u8czwyuqdlkpg1bkb4nnm+veanfhqn1k4+gpt6ugqcvu2h2ovuif)",
+    }
+  `);
 });
 
 it('parses style with no spaces to object', () => {
   const style =
     'border-bottom-left-radius:1em;border-right-style:solid;Z-Index:-1;-moz-border-radius-bottomleft:20px';
-  expect(styleToJS(style)).toMatchSnapshot();
+  expect(styleToJS(style)).toMatchInlineSnapshot(`
+    Object {
+      "borderBottomLeftRadius": "1em",
+      "borderRightStyle": "solid",
+      "mozBorderRadiusBottomleft": "20px",
+      "zIndex": "-1",
+    }
+  `);
 });
 
-describe('option `reactCompat`', () => {
+describe('when option reactCompat is true', () => {
   const options = { reactCompat: true };
 
   it('capitalizes vendor prefixes', () => {
     const style = `
       -khtml-user-select: none;
       -moz-user-select: -moz-none;
-      -ms-user-select: none;
       -o-user-select: none;
       -webkit-user-select: none;
       user-select: none;
     `;
-    expect(styleToJS(style, options)).toMatchSnapshot();
+    expect(styleToJS(style, options)).toMatchInlineSnapshot(`
+      Object {
+        "KhtmlUserSelect": "none",
+        "MozUserSelect": "-moz-none",
+        "OUserSelect": "none",
+        "WebkitUserSelect": "none",
+        "userSelect": "none",
+      }
+    `);
+  });
+
+  it('does not capitalize ms prefixes', () => {
+    const style = `
+      -ms-transform: none;
+      -ms-user-select: none;
+    `;
+    expect(styleToJS(style, options)).toMatchInlineSnapshot(`
+      Object {
+        "msTransform": "none",
+        "msUserSelect": "none",
+      }
+    `);
   });
 });
diff --git a/src/utilities.test.ts b/src/utilities.test.ts
@@ -26,6 +26,7 @@ describe('camelCase', () => {
   it.each([
     ['-khtml-transition', 'khtmlTransition'],
     ['-moz-user-select', 'mozUserSelect'],
+    ['-ms-transform', 'msTransform'],
     ['-ms-user-select', 'msUserSelect'],
     ['-o-transition', 'oTransition'],
     ['-webkit-transition', 'webkitTransition'],
@@ -42,14 +43,15 @@ describe('camelCase', () => {
     expect(camelCase(property)).toBe(expected);
   });
 
-  describe('option `reactCompat`', () => {
+  describe('option reactCompat is true', () => {
     const options = { reactCompat: true };
 
     it.each([
       ['-khtml-transition', 'KhtmlTransition'],
       ['-o-transition', 'OTransition'],
       ['-moz-user-select', 'MozUserSelect'],
-      ['-ms-user-select', 'MsUserSelect'],
+      ['-ms-transform', 'msTransform'],
+      ['-ms-user-select', 'msUserSelect'],
       ['-webkit-transition', 'WebkitTransition'],
       ['-webkit-user-select', 'WebkitUserSelect'],
     ])('capitalizes vendor prefix "%s" to "%s"', (property, expected) => {

diff --git a/src/utilities.ts b/src/utilities.ts
@@ -2,6 +2,7 @@ const CUSTOM_PROPERTY_REGEX = /^--[a-zA-Z0-9-]+$/;
 const HYPHEN_REGEX = /-([a-z])/g;
 const NO_HYPHEN_REGEX = /^[^-]+$/;
 const VENDOR_PREFIX_REGEX = /^-(webkit|moz|ms|o|khtml)-/;
+const MS_VENDOR_PREFIX_REGEX = /^-(ms)-/;
 
 /**
  * Checks whether to skip camelCase.
@@ -39,7 +40,10 @@ export const camelCase = (property: string, options: CamelCaseOptions = {}) => {
 
   property = property.toLowerCase();
 
-  if (!options.reactCompat) {
+  if (options.reactCompat) {
+    // `-ms` vendor prefix should not be capitalized
+    property = property.replace(MS_VENDOR_PREFIX_REGEX, trimHyphen);
+  } else {
     // for non-React, remove first hyphen so vendor prefix is not capitalized
     property = property.replace(VENDOR_PREFIX_REGEX, trimHyphen);
   }