Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
// If a custom mapping is provided for the tag, use it
// Otherwise use the one from default mapping
customMappings && node.type in customMappings
? customMappings[node.type]
: mappings[node.type];
if (typeof Comp !== "function") {
// Don't render a tag if it doesn't have a mapping
return null;
}
let style;
try {
style = node.attrs.style
? css(
// Generate a 2D array from the inline style string
node.attrs.style
// Split lines to 'property: value' pair and filter empty values
.split(";")
.filter(Boolean)
// Split 'property: value' pair to an array
.map(r => r.split(":").map(it => it.trim()))
)
: undefined;
} catch (error) {
// eslint-disable-next-line no-console
console.warn(error);
}
// Extract the class names from the class attribute
const classList = node.attrs.class
if (!generated[hash]) {
const root = parse(flatCSS)
const declPairs = []
root.each(node => {
if (node.type === 'decl') {
declPairs.push([node.prop, node.value])
} else if (node.type !== 'comment') {
/* eslint-disable no-console */
console.warn(`Node of type ${node.type} not supported as an inline style`)
}
})
// RN currently does not support differing values for the corner radii of Image
// components (but does for View). It is almost impossible to tell whether we'll have
// support, so we'll just disable multiple values here.
// https://github.com/styled-components/css-to-react-native/issues/11
const styleObject = transformDeclPairs(declPairs, [
'borderRadius',
'borderWidth',
'borderColor',
'borderStyle',
])
const styles = styleSheet.create({
generated: styleObject,
})
generated[hash] = styles.generated
}
return generated[hash]
}
}
if (!generated[hash]) {
const root = parse(flatCSS);
const declPairs = [];
root.each(node => {
if (node.type === 'decl') {
declPairs.push([node.prop, node.value]);
} else if (process.env.NODE_ENV !== 'production' && node.type !== 'comment') {
/* eslint-disable no-console */
console.warn(`Node of type ${node.type} not supported as an inline style`);
}
});
// RN currently does not support differing values for the corner radii of Image
// components (but does for View). It is almost impossible to tell whether we'll have
// support, so we'll just disable multiple values here.
// https://github.com/styled-components/css-to-react-native/issues/11
const styleObject = transformDeclPairs(declPairs, [
'borderRadius',
'borderWidth',
'borderColor',
'borderStyle',
]);
const styles = styleSheet.create({
generated: styleObject,
});
generated[hash] = styles.generated;
}
return generated[hash];
}
}
!isLengthUnit &&
!isViewportUnit &&
!isPercent &&
!isUnsupportedUnit
) {
throw new Error(`Failed to parse declaration "${property}: ${value}"`);
}
if (!result.__viewportUnits && isViewportUnit) {
result.__viewportUnits = true;
}
if (shorthandBorderProps.indexOf(property) > -1) {
// transform single value shorthand border properties back to
// shorthand form to support styling `Image`.
const transformed = transformCSS([[property, value]]);
const vals = values(transformed);
if (allEqual(vals)) {
const replacement = {};
replacement[camelCase(property)] = vals[0];
Object.assign(styles, replacement);
} else {
Object.assign(styles, transformed);
}
} else {
Object.assign(styles, transformCSS([[property, value]]));
}
}
};
export function convertToRNStyles(styles) {
if (styles[0][0] !== undefined) {
let arr = []
arr.push(styles[0][0])
let len = styles.length
let i = 1
for (; i < len; i++) {
arr.push(styles[i], styles[0][i])
}
let css = createStyles.apply(this, arr)
let parsedCSS = convertStyles(css)
// Convert css styles to react native
let rnStyles = Array.isArray(parsedCSS) ? transform(parsedCSS) : {}
return [StyleSheet.create({ style: rnStyles }).style]
}
return styles.map(style => {
if (typeof style === 'object' && Object.keys(style).length > 0) {
return StyleSheet.create({ style }).style
}
return style
})
}
}
if (shorthandBorderProps.indexOf(property) > -1) {
// transform single value shorthand border properties back to
// shorthand form to support styling `Image`.
const transformed = transformCSS([[property, value]]);
const vals = values(transformed);
if (allEqual(vals)) {
const replacement = {};
replacement[camelCase(property)] = vals[0];
Object.assign(styles, replacement);
} else {
Object.assign(styles, transformed);
}
} else {
Object.assign(styles, transformCSS([[property, value]]));
}
}
};
function convertStyles(str: string) {
if (str.trim() === '') return
const stylePairs = []
const parsedString = str.split(';')
parsedString.forEach(convertPropertyValue, stylePairs)
return transform(stylePairs)
}
export default obj => {
const list = Object.keys(obj)
const listWithProps = list.filter(k => hasCode(obj[k]))
const listWithoutProps = list.filter(
k => !hasCode(obj[k]) && isValid(k, obj[k])
)
const res = transform(
listWithoutProps.map(k => [toSlugCase(k), getValue(k, obj[k])])
)
listWithProps.forEach(k => (res[k] = obj[k]))
return res
}
export const transformStyleTuples = (
styleTuples: StyleTuple[],
appliedVariables?: Variables
): Style => {
const transformedStyleTuples = styleTuples.map(([property, value]) => {
let transformedValue = value;
if (appliedVariables != null) {
transformedValue = transformVariables(transformedValue, appliedVariables);
}
transformedValue = transformColors(transformedValue);
transformedValue = transformCalc(transformedValue);
return [property, transformedValue];
});
return cssToReactNative(transformedStyleTuples);
};