mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-05-26 15:58:28 +00:00
Remove whitespace from CSS rules
Minimizes bytes from CSS code that might be inlined in the head of the document during SSR.
This commit is contained in:
Nicolas Gallagher
+10
-10
@@ -22,15 +22,15 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit
|
||||
}
|
||||
@media all {
|
||||
[stylesheet-group=\\"1\\"]{}
|
||||
.css-reset-4rbku5 { background-color: rgba(0,0,0,0.00); color: inherit; font: inherit; list-style: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: inherit; text-decoration: none; }
|
||||
.css-cursor-18t94o4 { cursor: pointer; }
|
||||
.css-view-1dbjc4n { -ms-flex-align: stretch; -ms-flex-direction: column; -ms-flex-negative: 0; -ms-flex-preferred-size: auto; -webkit-align-items: stretch; -webkit-box-align: stretch; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-basis: auto; -webkit-flex-direction: column; -webkit-flex-shrink: 0; align-items: stretch; border: 0 solid black; box-sizing: border-box; display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 0px; min-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative; z-index: 0; }
|
||||
.css-hitSlop-mjp8i1 { bottom: 0px; left: 0px; position: absolute; right: 0px; top: 0px; z-index: -1; }
|
||||
.css-accessibilityImage-9pa8cd { bottom: 0px; height: 100%; left: 0px; opacity: 0; position: absolute; right: 0px; top: 0px; width: 100%; z-index: -1; }
|
||||
.css-text-76zvg2 { border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; box-sizing: border-box; color: rgba(0,0,0,1.00); display: inline; font: 14px system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; white-space: pre-wrap; word-wrap: break-word; }
|
||||
.css-textHasAncestor-16my406 { color: inherit; font: inherit; white-space: inherit; }
|
||||
.css-textOneLine-bfa6kz { max-width: 100%; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.css-textMultiLine-cens5h { -webkit-box-orient: vertical; display: -webkit-box; max-width: 100%; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; }
|
||||
.css-textinput-1cwyjr8 { -moz-appearance: textfield; -webkit-appearance: none; background-color: rgba(0,0,0,0.00); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 0 solid black; box-sizing: border-box; font: 14px system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; resize: none; }
|
||||
.css-reset-4rbku5{background-color:rgba(0,0,0,0.00);color:inherit;font:inherit;list-style:none;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;text-align:inherit;text-decoration:none;}
|
||||
.css-cursor-18t94o4{cursor:pointer;}
|
||||
.css-view-1dbjc4n{-ms-flex-align:stretch;-ms-flex-direction:column;-ms-flex-negative:0;-ms-flex-preferred-size:auto;-webkit-align-items:stretch;-webkit-box-align:stretch;-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-basis:auto;-webkit-flex-direction:column;-webkit-flex-shrink:0;align-items:stretch;border:0 solid black;box-sizing:border-box;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;min-height:0px;min-width:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;position:relative;z-index:0;}
|
||||
.css-hitSlop-mjp8i1{bottom:0px;left:0px;position:absolute;right:0px;top:0px;z-index:-1;}
|
||||
.css-accessibilityImage-9pa8cd{bottom:0px;height:100%;left:0px;opacity:0;position:absolute;right:0px;top:0px;width:100%;z-index:-1;}
|
||||
.css-text-76zvg2{border-bottom-width:0px;border-left-width:0px;border-right-width:0px;border-top-width:0px;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;white-space:pre-wrap;word-wrap:break-word;}
|
||||
.css-textHasAncestor-16my406{color:inherit;font:inherit;white-space:inherit;}
|
||||
.css-textOneLine-bfa6kz{max-width:100%;overflow-x:hidden;overflow-y:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
||||
.css-textMultiLine-cens5h{-webkit-box-orient:vertical;display:-webkit-box;max-width:100%;overflow-x:hidden;overflow-y:hidden;text-overflow:ellipsis;}
|
||||
.css-textinput-1cwyjr8{-moz-appearance:textfield;-webkit-appearance:none;background-color:rgba(0,0,0,0.00);border-bottom-left-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:0px;border-top-right-radius:0px;border:0 solid black;box-sizing:border-box;font:14px system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;resize:none;}
|
||||
}</style>"
|
||||
`;
|
||||
|
||||
+20
-48
@@ -6,7 +6,7 @@ Object {
|
||||
"identifier": "r-animationDirection-1kmv48j",
|
||||
"property": "animationDirection",
|
||||
"rules": Array [
|
||||
".r-animationDirection-1kmv48j { -webkit-animation-direction: alternate, alternate-reverse; animation-direction: alternate, alternate-reverse; }",
|
||||
".r-animationDirection-1kmv48j{-webkit-animation-direction:alternate,alternate-reverse;animation-direction:alternate,alternate-reverse;}",
|
||||
],
|
||||
"value": "[\\"alternate\\",\\"alternate-reverse\\"]",
|
||||
},
|
||||
@@ -14,25 +14,11 @@ Object {
|
||||
"identifier": "r-animationKeyframes-zacbmr",
|
||||
"property": "animationKeyframes",
|
||||
"rules": Array [
|
||||
".r-animationKeyframes-zacbmr { -webkit-animation-name: r-animation-8jhqzh, r-animation-5azpl5; animation-name: r-animation-8jhqzh, r-animation-5azpl5; }",
|
||||
"@-webkit-keyframes r-animation-8jhqzh {
|
||||
0% { top: 0px; }
|
||||
50% { top: 5px; }
|
||||
100% { top: 10px; }
|
||||
}",
|
||||
"@keyframes r-animation-8jhqzh {
|
||||
0% { top: 0px; }
|
||||
50% { top: 5px; }
|
||||
100% { top: 10px; }
|
||||
}",
|
||||
"@-webkit-keyframes r-animation-5azpl5 {
|
||||
from { left: 0px; }
|
||||
to { left: 10px; }
|
||||
}",
|
||||
"@keyframes r-animation-5azpl5 {
|
||||
from { left: 0px; }
|
||||
to { left: 10px; }
|
||||
}",
|
||||
".r-animationKeyframes-zacbmr{-webkit-animation-name:r-animation-8jhqzh,r-animation-5azpl5;animation-name:r-animation-8jhqzh,r-animation-5azpl5;}",
|
||||
"@-webkit-keyframes r-animation-8jhqzh{0%{top:0px;}50%{top:5px;}100%{top:10px;}}",
|
||||
"@keyframes r-animation-8jhqzh{0%{top:0px;}50%{top:5px;}100%{top:10px;}}",
|
||||
"@-webkit-keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
|
||||
"@keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
|
||||
],
|
||||
"value": "[{\\"0%\\":{\\"top\\":0},\\"50%\\":{\\"top\\":5},\\"100%\\":{\\"top\\":10}},{\\"from\\":{\\"left\\":0},\\"to\\":{\\"left\\":10}}]",
|
||||
},
|
||||
@@ -40,7 +26,7 @@ to { left: 10px; }
|
||||
"identifier": "r-fontFamily-1qd0xha",
|
||||
"property": "fontFamily",
|
||||
"rules": Array [
|
||||
".r-fontFamily-1qd0xha { font-family: system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif; }",
|
||||
".r-fontFamily-1qd0xha{font-family:system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif;}",
|
||||
],
|
||||
"value": "System",
|
||||
},
|
||||
@@ -48,7 +34,7 @@ to { left: 10px; }
|
||||
"identifier": "r-marginHorizontal-vlx1xi",
|
||||
"property": "marginHorizontal",
|
||||
"rules": Array [
|
||||
".r-marginHorizontal-vlx1xi { margin-left: 10px; margin-right: 10px; }",
|
||||
".r-marginHorizontal-vlx1xi{margin-left:10px;margin-right:10px;}",
|
||||
],
|
||||
"value": "10px",
|
||||
},
|
||||
@@ -56,10 +42,10 @@ to { left: 10px; }
|
||||
"identifier": "r-placeholderTextColor-1418aci",
|
||||
"property": "placeholderTextColor",
|
||||
"rules": Array [
|
||||
".r-placeholderTextColor-1418aci::-webkit-input-placeholder { color: rgba(128,128,128,1.00); opacity: 1; }",
|
||||
".r-placeholderTextColor-1418aci::-moz-placeholder { color: rgba(128,128,128,1.00); opacity: 1; }",
|
||||
".r-placeholderTextColor-1418aci:-ms-input-placeholder { color: rgba(128,128,128,1.00); opacity: 1; }",
|
||||
".r-placeholderTextColor-1418aci::placeholder { color: rgba(128,128,128,1.00); opacity: 1; }",
|
||||
".r-placeholderTextColor-1418aci::-webkit-input-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
|
||||
".r-placeholderTextColor-1418aci::-moz-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
|
||||
".r-placeholderTextColor-1418aci:-ms-input-placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
|
||||
".r-placeholderTextColor-1418aci::placeholder{color:rgba(128,128,128,1.00);opacity:1;}",
|
||||
],
|
||||
"value": "gray",
|
||||
},
|
||||
@@ -67,8 +53,8 @@ to { left: 10px; }
|
||||
"identifier": "r-pointerEvents-ah5dr5",
|
||||
"property": "pointerEvents",
|
||||
"rules": Array [
|
||||
".r-pointerEvents-ah5dr5 > * { pointer-events: none; }",
|
||||
".r-pointerEvents-ah5dr5 { pointer-events: auto !important; }",
|
||||
".r-pointerEvents-ah5dr5>*{pointer-events:none;}",
|
||||
".r-pointerEvents-ah5dr5{pointer-events:auto!important;}",
|
||||
],
|
||||
"value": "box-only",
|
||||
},
|
||||
@@ -76,7 +62,7 @@ to { left: 10px; }
|
||||
"identifier": "r-transform-1ehiua4",
|
||||
"property": "transform",
|
||||
"rules": Array [
|
||||
".r-transform-1ehiua4 { -webkit-transform: translateX(50px); transform: translateX(50px); }",
|
||||
".r-transform-1ehiua4{-webkit-transform:translateX(50px);transform:translateX(50px);}",
|
||||
],
|
||||
"value": "[{\\"translateX\\":50,\\"scale\\":-1}]",
|
||||
},
|
||||
@@ -88,25 +74,11 @@ Object {
|
||||
"css-text-1jr0ypv": Object {
|
||||
"identifier": "css-text-1jr0ypv",
|
||||
"rules": Array [
|
||||
"@-webkit-keyframes r-animation-8jhqzh {
|
||||
0% { top: 0px; }
|
||||
50% { top: 5px; }
|
||||
100% { top: 10px; }
|
||||
}",
|
||||
"@keyframes r-animation-8jhqzh {
|
||||
0% { top: 0px; }
|
||||
50% { top: 5px; }
|
||||
100% { top: 10px; }
|
||||
}",
|
||||
"@-webkit-keyframes r-animation-5azpl5 {
|
||||
from { left: 0px; }
|
||||
to { left: 10px; }
|
||||
}",
|
||||
"@keyframes r-animation-5azpl5 {
|
||||
from { left: 0px; }
|
||||
to { left: 10px; }
|
||||
}",
|
||||
".css-text-1jr0ypv { -webkit-animation-direction: alternate, alternate-reverse; -webkit-animation-name: r-animation-8jhqzh, r-animation-5azpl5; -webkit-transform: translateX(50px); animation-direction: alternate, alternate-reverse; animation-name: r-animation-8jhqzh, r-animation-5azpl5; font: 14px system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif; margin-left: 10px; margin-right: 10px; transform: translateX(50px); }",
|
||||
"@-webkit-keyframes r-animation-8jhqzh{0%{top:0px;}50%{top:5px;}100%{top:10px;}}",
|
||||
"@keyframes r-animation-8jhqzh{0%{top:0px;}50%{top:5px;}100%{top:10px;}}",
|
||||
"@-webkit-keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
|
||||
"@keyframes r-animation-5azpl5{from{left:0px;}to{left:10px;}}",
|
||||
".css-text-1jr0ypv{-webkit-animation-direction:alternate,alternate-reverse;-webkit-animation-name:r-animation-8jhqzh,r-animation-5azpl5;-webkit-transform:translateX(50px);animation-direction:alternate,alternate-reverse;animation-name:r-animation-8jhqzh,r-animation-5azpl5;font:14px system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif;margin-left:10px;margin-right:10px;transform:translateX(50px);}",
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
+6
-6
@@ -2,37 +2,37 @@
|
||||
|
||||
exports[`StyleSheet/createReactDOMStyle fontFamily "Noto, BlinkMacSystemFont" 1`] = `
|
||||
Object {
|
||||
"fontFamily": "Noto, BlinkMacSystemFont",
|
||||
"fontFamily": "Noto,BlinkMacSystemFont",
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`StyleSheet/createReactDOMStyle fontFamily "Noto, System" 1`] = `
|
||||
Object {
|
||||
"fontFamily": "Noto, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif",
|
||||
"fontFamily": "Noto,system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`StyleSheet/createReactDOMStyle fontFamily "Noto, System" 2`] = `
|
||||
Object {
|
||||
"font": "14px Noto, system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif",
|
||||
"font": "14px Noto, system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`StyleSheet/createReactDOMStyle fontFamily "System" 1`] = `
|
||||
Object {
|
||||
"fontFamily": "system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif",
|
||||
"fontFamily": "system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`StyleSheet/createReactDOMStyle fontFamily "System" 2`] = `
|
||||
Object {
|
||||
"font": "14px system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Ubuntu, \\"Helvetica Neue\\", sans-serif",
|
||||
"font": "14px system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`StyleSheet/createReactDOMStyle fontFamily "monospace" 1`] = `
|
||||
Object {
|
||||
"fontFamily": "monospace, monospace",
|
||||
"fontFamily": "monospace,monospace",
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
+23
-23
@@ -86,11 +86,11 @@ export function classic(style: Style, name: string): CompilerOutput {
|
||||
let animationName;
|
||||
if (animationKeyframes != null) {
|
||||
const { animationNames, rules: keyframesRules } = processKeyframesValue(animationKeyframes);
|
||||
animationName = animationNames.join(', ');
|
||||
animationName = animationNames.join(',');
|
||||
rules.push(...keyframesRules);
|
||||
}
|
||||
const block = createDeclarationBlock({ ...rest, animationName });
|
||||
rules.push(`${selector} ${block}`);
|
||||
rules.push(`${selector}${block}`);
|
||||
|
||||
return { [identifier]: { identifier, rules } };
|
||||
}
|
||||
@@ -126,18 +126,18 @@ function createAtomicRules(identifier: string, property, value): Rules {
|
||||
switch (property) {
|
||||
case 'animationKeyframes': {
|
||||
const { animationNames, rules: keyframesRules } = processKeyframesValue(value);
|
||||
const block = createDeclarationBlock({ animationName: animationNames.join(', ') });
|
||||
rules.push(`${selector} ${block}`, ...keyframesRules);
|
||||
const block = createDeclarationBlock({ animationName: animationNames.join(',') });
|
||||
rules.push(`${selector}${block}`, ...keyframesRules);
|
||||
break;
|
||||
}
|
||||
|
||||
case 'placeholderTextColor': {
|
||||
const block = createDeclarationBlock({ color: value, opacity: 1 });
|
||||
rules.push(
|
||||
`${selector}::-webkit-input-placeholder ${block}`,
|
||||
`${selector}::-moz-placeholder ${block}`,
|
||||
`${selector}:-ms-input-placeholder ${block}`,
|
||||
`${selector}::placeholder ${block}`
|
||||
`${selector}::-webkit-input-placeholder${block}`,
|
||||
`${selector}::-moz-placeholder${block}`,
|
||||
`${selector}:-ms-input-placeholder${block}`,
|
||||
`${selector}::placeholder${block}`
|
||||
);
|
||||
break;
|
||||
}
|
||||
@@ -146,26 +146,26 @@ function createAtomicRules(identifier: string, property, value): Rules {
|
||||
case 'pointerEvents': {
|
||||
let finalValue = value;
|
||||
if (value === 'auto' || value === 'box-only') {
|
||||
finalValue = 'auto !important';
|
||||
finalValue = 'auto!important';
|
||||
if (value === 'box-only') {
|
||||
const block = createDeclarationBlock({ [property]: 'none' });
|
||||
rules.push(`${selector} > * ${block}`);
|
||||
rules.push(`${selector}>*${block}`);
|
||||
}
|
||||
} else if (value === 'none' || value === 'box-none') {
|
||||
finalValue = 'none !important';
|
||||
finalValue = 'none!important';
|
||||
if (value === 'box-none') {
|
||||
const block = createDeclarationBlock({ [property]: 'auto' });
|
||||
rules.push(`${selector} > * ${block}`);
|
||||
rules.push(`${selector}>*${block}`);
|
||||
}
|
||||
}
|
||||
const block = createDeclarationBlock({ [property]: finalValue });
|
||||
rules.push(`${selector} ${block}`);
|
||||
rules.push(`${selector}${block}`);
|
||||
break;
|
||||
}
|
||||
|
||||
default: {
|
||||
const block = createDeclarationBlock({ [property]: value });
|
||||
rules.push(`${selector} ${block}`);
|
||||
rules.push(`${selector}${block}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -187,17 +187,17 @@ function createDeclarationBlock(style: Style) {
|
||||
// to represent "fallback" declarations
|
||||
// { display: -webkit-flex; display: flex; }
|
||||
if (Array.isArray(value)) {
|
||||
return value.map(v => `${prop}: ${v}`).join(';');
|
||||
return value.map(v => `${prop}:${v}`).join(';');
|
||||
} else {
|
||||
return `${prop}: ${value}`;
|
||||
return `${prop}:${value}`;
|
||||
}
|
||||
})
|
||||
// Once properties are hyphenated, this will put the vendor
|
||||
// prefixed and short-form properties first in the list.
|
||||
.sort()
|
||||
.join('; ');
|
||||
.join(';');
|
||||
|
||||
return `{ ${declarationsString}; }`;
|
||||
return `{${declarationsString};}`;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -218,18 +218,18 @@ function createKeyframes(keyframes) {
|
||||
const identifier = createIdentifier('r', 'animation', keyframes);
|
||||
|
||||
const steps =
|
||||
'{\n' +
|
||||
'{' +
|
||||
Object.keys(keyframes)
|
||||
.map(stepName => {
|
||||
const rule = keyframes[stepName];
|
||||
const block = createDeclarationBlock(rule);
|
||||
return `${stepName} ${block}`;
|
||||
return `${stepName}${block}`;
|
||||
})
|
||||
.join('\n') +
|
||||
'\n}';
|
||||
.join('') +
|
||||
'}';
|
||||
|
||||
const rules = prefixes.map(prefix => {
|
||||
return `@${prefix}keyframes ${identifier} ${steps}`;
|
||||
return `@${prefix}keyframes ${identifier}${steps}`;
|
||||
});
|
||||
return { identifier, rules };
|
||||
}
|
||||
|
||||
@@ -44,6 +44,6 @@ export const STYLE_SHORT_FORM_EXPANSIONS = {
|
||||
paddingVertical: ['paddingTop', 'paddingBottom']
|
||||
};
|
||||
|
||||
export const MONOSPACE_FONT_STACK = 'monospace, monospace';
|
||||
export const MONOSPACE_FONT_STACK = 'monospace,monospace';
|
||||
export const SYSTEM_FONT_STACK =
|
||||
'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif';
|
||||
'system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif';
|
||||
|
||||
@@ -120,7 +120,7 @@ const createReactDOMStyle = style => {
|
||||
if (value.indexOf('System') > -1) {
|
||||
const stack = value.split(/,\s*/);
|
||||
stack[stack.indexOf('System')] = SYSTEM_FONT_STACK;
|
||||
resolvedStyle[prop] = stack.join(', ');
|
||||
resolvedStyle[prop] = stack.join(',');
|
||||
} else if (value === 'monospace') {
|
||||
resolvedStyle[prop] = MONOSPACE_FONT_STACK;
|
||||
} else {
|
||||
@@ -170,7 +170,7 @@ const createReactDOMStyle = style => {
|
||||
}
|
||||
});
|
||||
} else {
|
||||
resolvedStyle[prop] = Array.isArray(value) ? value.join(', ') : value;
|
||||
resolvedStyle[prop] = Array.isArray(value) ? value.join(',') : value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user