diff --git a/src/util.js b/src/util.js index c6e90c2..4ddc3c6 100644 --- a/src/util.js +++ b/src/util.js @@ -32,10 +32,15 @@ export const flattenDeep = (list /* : any[] */) /* : any[] */ => list.reduce((memo, x) => memo.concat(Array.isArray(x) ? flattenDeep(x) : x), []); const UPPERCASE_RE = /([A-Z])/g; -const MS_RE = /^ms-/; +const UPPERCASE_RE_TO_KEBAB = (match /* : string */) /* : string */ => `-${match.toLowerCase()}`; -const kebabify = (string /* : string */) /* : string */ => string.replace(UPPERCASE_RE, '-$1').toLowerCase(); -export const kebabifyStyleName = (string /* : string */) /* : string */ => kebabify(string).replace(MS_RE, '-ms-'); +export const kebabifyStyleName = (string /* : string */) /* : string */ => { + const result = string.replace(UPPERCASE_RE, UPPERCASE_RE_TO_KEBAB); + if (result[0] === 'm' && result[1] === 's' && result[2] === '-') { + return `-${result}`; + } + return result; +}; const isNotObject = ( x/* : ObjectMap | any */ diff --git a/tests/util_test.js b/tests/util_test.js index 95c6ad4..bb826b8 100644 --- a/tests/util_test.js +++ b/tests/util_test.js @@ -1,6 +1,6 @@ import {assert} from 'chai'; -import {flattenDeep, recursiveMerge} from '../src/util.js'; +import {flattenDeep, kebabifyStyleName, recursiveMerge} from '../src/util.js'; describe('Utils', () => { describe('flattenDeep', () => { @@ -66,4 +66,19 @@ describe('Utils', () => { }); }); }); + + describe('kebabifyStyleName', () => { + it('kebabifies camelCase', () => { + assert.equal(kebabifyStyleName('fooBarBaz'), 'foo-bar-baz'); + }); + it('kebabifies PascalCase', () => { + assert.equal(kebabifyStyleName('FooBarBaz'), '-foo-bar-baz'); + }); + it('does not force -webkit-', () => { + assert.equal(kebabifyStyleName('webkitFooBarBaz'), 'webkit-foo-bar-baz'); + }); + it('forces -ms-', () => { + assert.equal(kebabifyStyleName('msFooBarBaz'), '-ms-foo-bar-baz'); + }); + }); });