Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
content: jssStylesArray.join('\n'),
linkAfter: [],
})
/**
* Setup an import statement for the styles
* The name of the file is either in the meta of the component generator
* or we fallback to the name of the component
*/
const cssFileName = UIDLUtils.getStyleFileName(uidl)
if (declareDependency === 'decorator' && componentDecoratorChunk) {
const decoratorAST = componentDecoratorChunk.content
const decoratorParam = decoratorAST.expression.arguments[0]
ASTUtils.addPropertyToASTObject(decoratorParam, 'styleUrls', [
`${cssFileName}.${FileType.CSS}`,
])
}
if (declareDependency === 'import') {
dependencies.styles = {
// styles will not be used in this case as we have importJustPath flag set
type: 'local',
path: `./${cssFileName}.${FileType.CSS}`,
meta: {
importJustPath: true,
},
}
}
}
return structure
} else {
// jsx object expression
const inlineStyles = UIDLUtils.transformDynamicStyles(rootStyles, (styleValue) =>
StyleBuilders.createDynamicStyleExpression(styleValue, propsPrefix)
)
ASTUtils.addAttributeToJSXTag(root, inlineStyleAttributeKey, inlineStyles)
}
}
}
})
if (jssStylesArray.length > 0) {
chunks.push({
type: ChunkType.STRING,
name: chunkName,
fileType: FileType.CSS,
content: jssStylesArray.join('\n'),
linkAfter: [],
})
/**
* Setup an import statement for the styles
* The name of the file is either in the meta of the component generator
* or we fallback to the name of the component
*/
const cssFileName = UIDLUtils.getStyleFileName(uidl)
if (declareDependency === 'decorator' && componentDecoratorChunk) {
const decoratorAST = componentDecoratorChunk.content
const decoratorParam = decoratorAST.expression.arguments[0]
ASTUtils.addPropertyToASTObject(decoratorParam, 'styleUrls', [
`${cssFileName}.${FileType.CSS}`,
let htmlCode
if (codeChunks[FileType.HTML]) {
htmlCode = StringUtils.removeLastEmptyLine(codeChunks[FileType.HTML])
} else {
throw new Error('No code chunk of type HTML found, vue file concatenation aborded')
}
if (codeChunks[FileType.JS]) {
jsCode = StringUtils.removeLastEmptyLine(codeChunks[FileType.JS])
} else {
throw new Error('No code chunk of type JS found, vue file concatenation aborded')
}
// if no CSS, skip the <style></style>
if (codeChunks[FileType.CSS]) {
cssCode = StringUtils.removeLastEmptyLine(codeChunks[FileType.CSS])
}
const formattedHTMLCode = StringUtils.addSpacesToEachLine(' '.repeat(2), htmlCode)
const vueCode = buildVueFile(formattedHTMLCode, jsCode, cssCode)
return {
[FileType.VUE]: vueCode,
}
}
it('should return code in an array of files', async () => {
const result = await generator.generateComponent(ComponentWithValidStyle)
const jsFile = findFileByType(result.files, FileType.JS)
const cssFile = findFileByType(result.files, FileType.CSS)
expect(jsFile).toBeDefined()
expect(cssFile).toBeDefined()
expect(jsFile.content).toContain('import React')
expect(jsFile.content).toContain('flexDirection: props.direction')
expect(cssFile.content).toContain(`align-self: center`)
})
})
it('generates a string chunk out of the styles and adds the className between brackets', async () => {
const plugin = createCSSModulesPlugin({
camelCaseClassNames: true,
})
const structure = setupPluginStructure('list-container')
const { chunks } = await plugin(structure)
expect(chunks.length).toBe(2)
expect(chunks[1].type).toBe('string')
expect(chunks[1].fileType).toBe(FileType.CSS)
expect(chunks[1].content).toContain('height: 100px;')
const nodeReference = chunks[0].meta.nodesLookup['list-container']
expect(nodeReference.openingElement.attributes.length).toBe(1)
const classNameAttr = nodeReference.openingElement.attributes[0]
expect(classNameAttr.name.name).toBe('className')
expect(classNameAttr.value.expression.name).toBe('styles.listContainer')
})
it('CSSModules should refer state in styles when state is mapped', async () => {
const generator = createReactComponentGenerator(ReactStyleVariation.CSSModules)
const result = await generator.generateComponent(ComponentWithStateReference)
const jsFile = findFileByType(result.files, FileType.JS)
const cssFile = findFileByType(result.files, FileType.CSS)
expect(jsFile).toBeDefined()
expect(cssFile).toBeDefined()
expect(jsFile.content).toContain('display: active')
expect(jsFile.content).toContain('height: props.config.height')
expect(cssFile.content).toContain('align-self: center;')
})
const getFileName = (
fileType: string,
fileName: string,
styleFileName: string,
templateFileName: string
) => {
if (fileType === FileType.CSS) {
return styleFileName || fileName
}
if (fileType === FileType.HTML) {
return templateFileName || fileName
}
return fileName
}
*/
if (moduleExtension) {
cssFileName = `${cssFileName}.module`
uidl.outputOptions = uidl.outputOptions || {}
uidl.outputOptions.styleFileName = cssFileName
}
dependencies[styleObjectImportName] = {
type: 'local',
path: `./${cssFileName}.${FileType.CSS}`,
}
structure.chunks.push({
name: styleChunkName,
type: ChunkType.STRING,
fileType: FileType.CSS,
content: cssClasses.join('\n'),
linkAfter: [],
})
return structure
}
* or we fallback to the name of the component
*/
let cssFileName = UIDLUtils.getStyleFileName(uidl)
/**
* In case the moduleExtension flag is passed, the file name should be in the form [fileName].module.css
*/
if (moduleExtension) {
cssFileName = `${cssFileName}.module`
uidl.outputOptions = uidl.outputOptions || {}
uidl.outputOptions.styleFileName = cssFileName
}
dependencies[styleObjectImportName] = {
type: 'local',
path: `./${cssFileName}.${FileType.CSS}`,
}
structure.chunks.push({
name: styleChunkName,
type: ChunkType.STRING,
fileType: FileType.CSS,
content: cssClasses.join('\n'),
linkAfter: [],
})
return structure
}
* or we fallback to the name of the component
*/
let cssFileName = UIDLUtils.getStyleFileName(uidl)
/**
* In case the moduleExtension flag is passed, the file name should be in the form [fileName].module.css
*/
if (moduleExtension) {
cssFileName = `${cssFileName}.module`
uidl.outputOptions = uidl.outputOptions || {}
uidl.outputOptions.styleFileName = cssFileName
}
dependencies[styleObjectImportName] = {
type: 'local',
path: `./${cssFileName}.${FileType.CSS}`,
}
structure.chunks.push({
name: styleChunkName,
type: ChunkType.STRING,
fileType: FileType.CSS,
content: cssClasses.join('\n'),
linkAfter: [],
})
return structure
}