Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
// Styled components might create an element that clashes with native element (Text, View, Image, etc.)
if (
illegalComponentNames.includes(className) ||
StringUtils.dashCaseToUpperCamelCase(key) === name ||
Object.keys(dependencies).includes(className)
) {
className = `Styled${className}`
}
const timesReferred = countPropReferences(style, 0)
if (componentLibrary === 'reactnative') {
style = UIDLUtils.cleanupNestedStyles(style)
}
jssStyleMap[className] = UIDLUtils.transformDynamicStyles(
style,
(styleValue, attribute) => {
if (styleValue.content.referenceType === 'prop') {
const dashCaseAttribute = StringUtils.dashCaseToCamelCase(attribute)
switch (timesReferred) {
case 1:
ASTUtils.addDynamicAttributeToJSXTag(
root,
dashCaseAttribute,
styleValue.content.id,
propsPrefix
)
return `\$\{props => props.${dashCaseAttribute}\}`
default:
return `\$\{props => props.${styleValue.content.id}\}`
}
UIDLUtils.traverseElements(node, (element) => {
const { style, key } = element
if (style && Object.keys(style).length > 0) {
const root = jsxNodesLookup[key]
const className = StringUtils.camelCaseToDashCase(key)
// Generating the string templates for the dynamic styles
const styleRules = UIDLUtils.transformDynamicStyles(style, (styleValue) => {
if (styleValue.content.referenceType === 'prop') {
return `\$\{${propsPrefix}.${styleValue.content.id}\}`
}
throw new Error(
`Error running transformDynamicStyles in reactStyledJSXChunkPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
)
})
styleJSXString.push(StyleBuilders.createCSSClass(className, styleRules))
ASTUtils.addClassStringOnJSXTag(root, className)
}
})
)
// When the className is equal to the jsFriendlyClassName, it can be safely addressed with `styles.`
const classNameIsJSFriendly = className === jsFriendlyClassName
const classReferenceIdentifier =
camelCaseClassNames || classNameIsJSFriendly
? `styles.${jsFriendlyClassName}`
: `styles['${className}']`
ASTUtils.addDynamicAttributeToJSXTag(root, classAttributeName, classReferenceIdentifier)
}
if (Object.keys(dynamicStyles).length) {
const rootStyles = UIDLUtils.cleanupNestedStyles(dynamicStyles)
const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
)
// If dynamic styles are on nested-styles they are unfortunately lost, since inline style does not support that
if (Object.keys(inlineStyles).length > 0) {
ASTUtils.addAttributeToJSXTag(root, 'style', inlineStyles)
}
}
}
})
ASTUtils.addClassStringOnJSXTag(root, className, classAttributeName)
}
}
if (Object.keys(dynamicStyles).length > 0) {
const rootStyles = UIDLUtils.cleanupNestedStyles(dynamicStyles)
// If dynamic styles are on nested-styles they are unfortunately lost, since inline style does not support that
if (Object.keys(rootStyles).length > 0) {
if (templateStyle === 'html') {
// simple string expression
const inlineStyles = createDynamicInlineStyle(rootStyles)
HASTUtils.addAttributeToNode(root, inlineStyleAttributeKey, `{${inlineStyles}}`)
} else {
// jsx object expression
const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
)
ASTUtils.addAttributeToJSXTag(root, inlineStyleAttributeKey, inlineStyles)
}
}
}
})
)
// When the className is equal to the jsFriendlyClassName, it can be safely addressed with `styles.`
const classNameIsJSFriendly = className === jsFriendlyClassName
const classReferenceIdentifier =
camelCaseClassNames || classNameIsJSFriendly
? `styles.${jsFriendlyClassName}`
: `styles['${className}']`
ASTUtils.addDynamicAttributeToJSXTag(root, classAttributeName, classReferenceIdentifier)
}
if (Object.keys(dynamicStyles).length) {
const rootStyles = UIDLUtils.cleanupNestedStyles(dynamicStyles)
const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
)
// If dynamic styles are on nested-styles they are unfortunately lost, since inline style does not support that
if (Object.keys(inlineStyles).length > 0) {
ASTUtils.addAttributeToJSXTag(root, 'style', inlineStyles)
}
}
}
})
UIDLUtils.traverseElements(uidl.node, (element) => {
const { style, key } = element
if (style && Object.keys(style).length > 0) {
const jsxASTTag = componentChunk.meta.nodesLookup[key]
const propsPrefix = componentChunk.meta.dynamicRefPrefix.prop
if (!jsxASTTag) {
return
}
// Nested styles are ignored
const rootStyles = UIDLUtils.cleanupNestedStyles(style)
const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
)
ASTUtils.addAttributeToJSXTag(jsxASTTag, 'style', inlineStyles)
}
})
UIDLUtils.traverseElements(node, (element) => {
const { style, key } = element
if (style && Object.keys(style).length > 0) {
const root = jsxNodesLookup[key]
const className = StringUtils.camelCaseToDashCase(key)
jssStyleMap[className] = UIDLUtils.transformDynamicStyles(style, (styleValue) => {
if (styleValue.content.referenceType === 'prop') {
return new ParsedASTNode(
ASTBuilders.createArrowFunctionWithMemberExpression('props', styleValue.content.id)
)
}
throw new Error(
`Error running transformDynamicStyles in reactJSSComponentStyleChunksPlugin. Unsupported styleValue.content.referenceType value ${styleValue.content.referenceType}`
)
})
ASTUtils.addDynamicAttributeToJSXTag(
root,
classAttributeName,
`classes['${className}']`,
propsPrefix
)
}