Initial commit
This commit is contained in:
commit
78f8d225ee
21173 changed files with 2907774 additions and 0 deletions
129
node_modules/style-to-js/src/index.test.ts
generated
vendored
Normal file
129
node_modules/style-to-js/src/index.test.ts
generated
vendored
Normal file
|
|
@ -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",
|
||||
}
|
||||
`);
|
||||
});
|
||||
});
|
||||
31
node_modules/style-to-js/src/index.ts
generated
vendored
Normal file
31
node_modules/style-to-js/src/index.ts
generated
vendored
Normal file
|
|
@ -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;
|
||||
62
node_modules/style-to-js/src/utilities.test.ts
generated
vendored
Normal file
62
node_modules/style-to-js/src/utilities.test.ts
generated
vendored
Normal file
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
52
node_modules/style-to-js/src/utilities.ts
generated
vendored
Normal file
52
node_modules/style-to-js/src/utilities.ts
generated
vendored
Normal file
|
|
@ -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);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue