Latest repo

node_modules/style-to-js/src/index.test.ts

@@ -0,0 +1,129 @@
+import styleToJS = require('.');
+
+it('exposes itself as default', () => {
+  expect(styleToJS).toBe(styleToJS.default);
+});
+
+it('parses empty style to object', () => {
+  expect(styleToJS('')).toEqual({});
+});
+
+it('does not parse CSS comment', () => {
+  expect(styleToJS('/* comment */')).toEqual({});
+});
+
+// invalid argument
+it.each([undefined, null, 0, 1, true, false, {}, [], () => {}, new Date()])(
+  'parses "%s" to empty object',
+  (text) => {
+    expect(styleToJS(text as string)).toEqual({});
+  },
+);
+
+it.each(['top:', ':12px', ':', ';'])('parses "%s" to empty object', (text) => {
+  expect(styleToJS(text)).toEqual({});
+});
+
+it('parses common styles to object', () => {
+  const style = `
+    color: #f00;
+    font-size: 42px;
+    z-index: -1;
+  `;
+  expect(styleToJS(style)).toMatchInlineSnapshot(`
+    {
+      "color": "#f00",
+      "fontSize": "42px",
+      "zIndex": "-1",
+    }
+  `);
+});
+
+it('parses style with vendor prefix to object', () => {
+  const style = `
+    display: -ms-grid;
+    display: grid;
+    -webkit-transition: all .5s;
+    -o-transition: all .5s;
+    transition: all .5s;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
+    background: -o-linear-gradient(top, white, black);
+    background: linear-gradient(to bottom, white, black);
+  `;
+  expect(styleToJS(style)).toMatchInlineSnapshot(`
+    {
+      "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)).toMatchInlineSnapshot(`
+    {
+      "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)).toMatchInlineSnapshot(`
+    {
+      "borderBottomLeftRadius": "1em",
+      "borderRightStyle": "solid",
+      "mozBorderRadiusBottomleft": "20px",
+      "zIndex": "-1",
+    }
+  `);
+});
+
+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;
+      -o-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+    `;
+    expect(styleToJS(style, options)).toMatchInlineSnapshot(`
+      {
+        "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(`
+      {
+        "msTransform": "none",
+        "msUserSelect": "none",
+      }
+    `);
+  });
+});

node_modules/style-to-js/src/index.ts

@@ -0,0 +1,31 @@
+import StyleToObject from 'style-to-object';
+
+import { camelCase, CamelCaseOptions } from './utilities';
+
+type StyleObject = Record<string, string>;
+
+interface StyleToJSOptions extends CamelCaseOptions {}
+
+/**
+ * Parses CSS inline style to JavaScript object (camelCased).
+ */
+function StyleToJS(style: string, options?: StyleToJSOptions): StyleObject {
+  const output: StyleObject = {};
+
+  if (!style || typeof style !== 'string') {
+    return output;
+  }
+
+  StyleToObject(style, (property, value) => {
+    // skip CSS comment
+    if (property && value) {
+      output[camelCase(property, options)] = value;
+    }
+  });
+
+  return output;
+}
+
+StyleToJS.default = StyleToJS;
+
+export = StyleToJS;

node_modules/style-to-js/src/utilities.test.ts

@@ -0,0 +1,62 @@
+import { camelCase } from './utilities';
+
+describe('camelCase', () => {
+  it('returns "" for empty string', () => {
+    expect(camelCase('')).toBe('');
+  });
+
+  // no hyphen
+  it.each([
+    ['foo', 'foo'],
+    ['fooBar', 'fooBar'],
+  ])('does not transform "%s"', (property, expected) => {
+    expect(camelCase(property)).toBe(expected);
+  });
+
+  // custom property
+  it.each([
+    ['--fooBar', '--fooBar'],
+    ['--foo-bar', '--foo-bar'],
+    ['--foo-100', '--foo-100'],
+    ['--test_ing', '--test_ing'],
+  ])('does not transform custom property "%s"', (property, expected) => {
+    expect(camelCase(property)).toBe(expected);
+  });
+
+  // vendor prefix
+  it.each([
+    ['-khtml-transition', 'khtmlTransition'],
+    ['-moz-user-select', 'mozUserSelect'],
+    ['-ms-transform', 'msTransform'],
+    ['-ms-user-select', 'msUserSelect'],
+    ['-o-transition', 'oTransition'],
+    ['-webkit-transition', 'webkitTransition'],
+    ['-webkit-user-select', 'webkitUserSelect'],
+  ])('transforms vendor prefix "%s" to "%s"', (property, expected) => {
+    expect(camelCase(property)).toBe(expected);
+  });
+
+  it.each([
+    ['foo-bar', 'fooBar'],
+    ['foo-bar-baz', 'fooBarBaz'],
+    ['CAMEL-CASE', 'camelCase'],
+  ])('transforms "%s" to "%s"', (property, expected) => {
+    expect(camelCase(property)).toBe(expected);
+  });
+
+  describe('option reactCompat is true', () => {
+    const options = { reactCompat: true };
+
+    it.each([
+      ['-khtml-transition', 'KhtmlTransition'],
+      ['-o-transition', 'OTransition'],
+      ['-moz-user-select', 'MozUserSelect'],
+      ['-ms-transform', 'msTransform'],
+      ['-ms-user-select', 'msUserSelect'],
+      ['-webkit-transition', 'WebkitTransition'],
+      ['-webkit-user-select', 'WebkitUserSelect'],
+    ])('capitalizes vendor prefix "%s" to "%s"', (property, expected) => {
+      expect(camelCase(property, options)).toBe(expected);
+    });
+  });
+});

node_modules/style-to-js/src/utilities.ts

@@ -0,0 +1,52 @@
+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.
+ */
+const skipCamelCase = (property: string) =>
+  !property ||
+  NO_HYPHEN_REGEX.test(property) ||
+  CUSTOM_PROPERTY_REGEX.test(property);
+
+/**
+ * Replacer that capitalizes first character.
+ */
+const capitalize = (match: string, character: string) =>
+  character.toUpperCase();
+
+/**
+ * Replacer that removes beginning hyphen of vendor prefix property.
+ */
+const trimHyphen = (match: string, prefix: string) => `${prefix}-`;
+
+/**
+ * CamelCase options.
+ */
+export interface CamelCaseOptions {
+  reactCompat?: boolean;
+}
+
+/**
+ * CamelCases a CSS property.
+ */
+export const camelCase = (property: string, options: CamelCaseOptions = {}) => {
+  if (skipCamelCase(property)) {
+    return property;
+  }
+
+  property = property.toLowerCase();
+
+  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);
+  }
+
+  return property.replace(HYPHEN_REGEX, capitalize);
+};