zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2026-06-07 16:54:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: optimize style element inlining, inline setProperty

Browse Source
This commit is contained in:
Mikael Sand
2019-10-20 23:21:20 +03:00
parent 91912516fc
commit c899670c44
1 changed files with 7 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css.js
+7 -19
View File
@@ -284,8 +284,9 @@ function CSSStyleDeclaration({ props: { style }, styles }) {
.parse(styles, declarationParseProps) .parse(styles, declarationParseProps)
.children.each(({ property, value, important }) => { .children.each(({ property, value, important }) => {
try { try {
const val = csstree.generate(value); const name = property.trim();
setProperty(style, properties, property.trim(), val, important); properties.set(name, important);
style[camelCase(name)] = csstree.generate(value).trim();
} catch (styleError) { } catch (styleError) {
if (styleError.message !== 'Unknown node type: undefined') { if (styleError.message !== 'Unknown node type: undefined') {
console.warn( console.warn(
@@ -304,21 +305,6 @@ function CSSStyleDeclaration({ props: { style }, styles }) {
return styleDeclaration; return styleDeclaration;
} }
/**
* Modify an existing CSS property or creates a new CSS property in the declaration block.
*
* @param {Object} style style property given to jsx
* @param {Map} properties map of priorities for existing properties
* @param {String} name representing the CSS property name to be modified.
* @param {String} [value] containing the new property value. If not specified, treated as the empty string. value must not contain "!important" -- that should be set using the priority parameter.
* @param {String} [important] allowing the "important" CSS priority to be set. If not specified, treated as the empty string.
* @return {undefined}
*/
function setProperty(style, properties, name, value, important) {
properties.set(name, important);
style[camelCase(name)] = value.trim();
}
function initStyle(selectedEl) { function initStyle(selectedEl) {
if (!selectedEl.style) { if (!selectedEl.style) {
if (!selectedEl.props.style) { if (!selectedEl.props.style) {
@@ -426,12 +412,14 @@ export function inlineStyles(document) {
// inline styles, external styles same priority as inline styles, inline styles used // inline styles, external styles same priority as inline styles, inline styles used
// inline styles, external styles higher priority than inline styles, external styles used // inline styles, external styles higher priority than inline styles, external styles used
const name = property.trim(); const name = property.trim();
const val = csstree.generate(value); const camel = camelCase(name);
const val = csstree.generate(value).trim();
for (let element of matched) { for (let element of matched) {
const { style, properties } = element.style; const { style, properties } = element.style;
const current = properties.get(name); const current = properties.get(name);
if (current === undefined || current < important) { if (current === undefined || current < important) {
setProperty(style, properties, name, val, important); properties.set(name, important);
style[camel] = val;
} }
} }
}, },