diff --git a/packages/teleport-plugin-css-modules/__tests__/component-scoped.ts b/packages/teleport-plugin-css-modules/__tests__/component-scoped.ts index 48f67eac6..fb9c56eb2 100644 --- a/packages/teleport-plugin-css-modules/__tests__/component-scoped.ts +++ b/packages/teleport-plugin-css-modules/__tests__/component-scoped.ts @@ -2,6 +2,7 @@ import { createCSSModulesPlugin } from '../src' import { staticNode, elementNode, component } from '@teleporthq/teleport-uidl-builders' import { ComponentStructure } from '@teleporthq/teleport-types' import { createComponentChunk } from './mocks' +import { JSXElement } from '@babel/types' describe('Component Scoped Styles', () => { const uidl = component('MYComponent', elementNode('container', {}, [], null, {}), {}, {}) @@ -85,8 +86,8 @@ describe('Component Scoped Styles', () => { const { chunks } = await plugin(structure) const jsxComponent = chunks.find((chunk) => chunk.name === 'jsx-component') - const jsxExpressions = - jsxComponent.meta.nodesLookup.container.openingElement.attributes[0].value.expression + const jsxExpressions = (jsxComponent?.meta?.nodesLookup?.container as unknown as JSXElement) + .openingElement.attributes[0]?.value.expression expect(jsxExpressions.quasis.length).toBe(4) expect(jsxExpressions.expressions[0]?.value).toBe('md-8') diff --git a/packages/teleport-plugin-css-modules/__tests__/index.ts b/packages/teleport-plugin-css-modules/__tests__/index.ts index 804fb015b..5694efc8f 100644 --- a/packages/teleport-plugin-css-modules/__tests__/index.ts +++ b/packages/teleport-plugin-css-modules/__tests__/index.ts @@ -227,12 +227,12 @@ describe('plugin-css-modules', () => { const jsxChunk = result.chunks.find((chunk) => chunk.fileType === 'js') const cssFile = result.chunks.find((file) => file.fileType === 'css') - const nodeReference = jsxChunk.meta.nodesLookup.container - const styleAttr = nodeReference.openingElement.attributes[0] + const nodeReference = jsxChunk?.meta?.nodesLookup?.container + const styleAttr = nodeReference?.openingElement?.attributes?.[0] expect(cssFile).toBeDefined() expect(jsxChunk).toBeDefined() - expect(nodeReference.openingElement.attributes.length).toBe(1) + expect(nodeReference?.openingElement?.attributes?.length).toBe(1) expect(styleAttr.value.expression.quasis.length).toBe(3) expect(styleAttr.value.expression.expressions.length).toBe(2) }) diff --git a/packages/teleport-plugin-css-modules/__tests__/mocks.ts b/packages/teleport-plugin-css-modules/__tests__/mocks.ts index 4af1cab38..cb3ce5f56 100644 --- a/packages/teleport-plugin-css-modules/__tests__/mocks.ts +++ b/packages/teleport-plugin-css-modules/__tests__/mocks.ts @@ -13,12 +13,17 @@ export const createComponentChunk = (elementKey: string = 'container') => { meta: { nodesLookup: { [elementKey]: { + type: 'JSXElement', openingElement: { + type: 'JSXOpeningElement', name: { + type: 'JSXIdentifier', name: '', }, + selfClosing: false, attributes: [], }, + children: [], }, }, dynamicRefPrefix: { @@ -36,12 +41,12 @@ export const createComponentChunk = (elementKey: string = 'container') => { export const setupPluginStructure = ( elementKey: string = 'container', - styleDefinition: UIDLStyleDefinitions = null + styleDefinition?: UIDLStyleDefinitions ) => { const style = styleDefinition || { height: staticNode('100px'), } - const element = elementNode('container', {}, [], null, style) + const element = elementNode('container', {}, [], undefined, style) element.content.key = elementKey const uidlSample = component('CSSModules', element) diff --git a/packages/teleport-plugin-html-base-component/src/node-handlers.ts b/packages/teleport-plugin-html-base-component/src/node-handlers.ts index 1644d8008..dd7fc0e72 100644 --- a/packages/teleport-plugin-html-base-component/src/node-handlers.ts +++ b/packages/teleport-plugin-html-base-component/src/node-handlers.ts @@ -160,10 +160,6 @@ const generateElementNode: NodeToHTML(component) - let compHasSlots: boolean = false if (children.length) { - compHasSlots = true UIDLUtils.traverseNodes(componentClone.node, (childNode, parentNode) => { if (childNode.type === 'slot' && parentNode.type === 'element') { const nonSlotNodes = parentNode.content?.children?.filter((n) => n.type !== 'slot') @@ -489,26 +483,13 @@ const generateComponentContent = async ( Promise.resolve(initialStructure) ) - if (compHasSlots) { - result.chunks.forEach((chunk) => { - if (chunk.fileType === FileType.CSS) { - chunks.push(chunk) - } - }) - } else { - const chunk = chunks.find((item) => item.name === componentClone.name) - if (!chunk) { - const styleChunk = result.chunks.find( - (item: ChunkDefinition) => item.fileType === FileType.CSS - ) - if (!styleChunk) { - return - } - chunks.push(styleChunk) + result.chunks.forEach((chunk) => { + if (chunk.fileType === FileType.CSS) { + chunks.push(chunk) } - } + }) - addNodeToLookup(elementType, node, compTag, nodesLookup, [compName, component.name]) + addNodeToLookup(node.content.key, node, compTag, nodesLookup, [compName, component.name]) return compTag } diff --git a/packages/teleport-plugin-react-jss/__tests__/mocks.ts b/packages/teleport-plugin-react-jss/__tests__/mocks.ts index 504cbb586..bf3b7aacf 100644 --- a/packages/teleport-plugin-react-jss/__tests__/mocks.ts +++ b/packages/teleport-plugin-react-jss/__tests__/mocks.ts @@ -1,35 +1,45 @@ import { ChunkDefinition, FileType, ChunkType } from '@teleporthq/teleport-types' +import * as types from '@babel/types' -export const createComponentChunk = (): ChunkDefinition => ({ - name: 'jsx-component', - meta: { - nodesLookup: { - container: { - openingElement: { - name: { - name: '', - }, - attributes: [], - }, +export const createComponentChunk = (): ChunkDefinition => { + const jsxElement: types.JSXElement = { + type: 'JSXElement', + openingElement: { + type: 'JSXOpeningElement', + name: { + type: 'JSXIdentifier', + name: '', }, + selfClosing: false, + attributes: [], }, - dynamicRefPrefix: { - prop: 'props', + children: [], + } + + return { + name: 'jsx-component', + meta: { + nodesLookup: { + container: jsxElement as unknown as Record, + }, + dynamicRefPrefix: { + prop: 'props', + }, }, - }, - type: ChunkType.AST, - fileType: FileType.JS, - linkAfter: ['import-local'], - content: { - declarations: [ - { - init: { - params: [], - body: { - body: [], + type: ChunkType.AST, + fileType: FileType.JS, + linkAfter: ['import-local'], + content: { + declarations: [ + { + init: { + params: [], + body: { + body: [], + }, }, }, - }, - ], - }, -}) + ], + }, + } +}