Using Panda with Stencil.js: Module X has already exported member

[JollyGrin]

Description

When I attempt to use panda with a stencil.js init template, using postcss, I get build errors relating to exported types.

I was attempting both the CLI and PostCss approaches of panda css

[ ERROR ]  TypeScript: node_modules/.pnpm/ts-morph@21.0.1/node_modules/ts-morph/lib/ts-mor
ph.d.ts:5289:127
           Type 'CompilerNodeToWrappedType<InstanceOf<T>["compilerNode"]>' does not
           satisfy the constraint 'Node<Node>'.Type 'SourceFile | ImportDeclaration |
           ExportDeclaration | ImportEqualsDeclaration | Identifier | ... 198 more ... |
           Node<...>' is not assignable to type 'Node<Node>'.Type 'SourceFile' is not
           assignable to type 'Node<Node>'.The types returned by 'forgetDescendants()'
           are incompatible between these types.Type 'SourceFile' is not assignable to
           type 'CompilerNodeToWrappedType<InstanceOf<T>["compilerNode"]>'.

   L5288:        expression?: ts.Expression;
   L5289:    }>;                                                        
   L5290:  export declare function BaseExpressionedNode<T extends Constructor<Expressioned
NodeExtensionType>, TExpression extends Node = CompilerNodeToWrappedType<InstanceOf<T>["co
mpilerNode"]>>(Base: T): Constructor<BaseExpressionedNode<TExpression>> & T;

[ ERROR ]  TypeScript: node_modules/.pnpm/@pandacss+types@0.41.0/node_modules/@pandacss/ty
pes/dist/index.d.ts:14:1
           Module './composition' has already exported a member named 'Recursive'.
           Consider explicitly re-exporting to resolve the ambiguity.

     L13:  export type * from './runtime'
     L14:  export type * from './shared'
     L15:  export type * from './static-css'

[ ERROR ]  TypeScript: node_modules/.pnpm/@pandacss+types@0.41.0/node_modules/@pandacss/ty
pes/dist/index.d.ts:14:1
           Module './pattern' has already exported a member named 'LiteralUnion'.
           Consider explicitly re-exporting to resolve the ambiguity.

     L13:  export type * from './runtime'
     L14:  export type * from './shared'
     L15:  export type * from './static-css'

[ ERROR ]  TypeScript: node_modules/.pnpm/@pandacss+types@0.41.0/node_modules/@pandacss/ty
pes/dist/index.d.ts:14:1
           Module './pattern' has already exported a member named 'Primitive'. Consider
           explicitly re-exporting to resolve the ambiguity.

     L13:  export type * from './runtime'
     L14:  export type * from './shared'
     L15:  export type * from './static-css'

[ ERROR ]  TypeScript: node_modules/.pnpm/@pandacss+types@0.41.0/node_modules/@pandacss/ty
pes/dist/index.d.ts:19:1
           Module './composition' has already exported a member named 'Token'. Consider
           explicitly re-exporting to resolve the ambiguity.

     L18:  export type * from './theme'
     L19:  export type * from './tokens'
     L20:  export type * from './utility'

[ ERROR ]  TypeScript: styled-system/types/style-props.d.ts:3041:54
           Property 'initialLetterAlign' does not exist on type 'CssProperties'.

   L3040:  initialLetter?: ConditionalValue<CssProperties["initialLetter"] | AnyString>
   L3041:  itialLetterAlign?: ConditionalValue<CssProperties["initialLetterAlign"] | AnySt
   L3042:   /**

Link to Reproduction

https://github.com/JollyGrin/stencil-panda

Steps to reproduce

Option 1

git clone https://github.com/JollyGrin/stencil-panda
cd stencil-pencil
pnpm i
pnpm prepare
pnpm panda
pnpm start

Option 2

1. pnpm create stencil
2. pick component from the stencil init
3. pnpm i -D @stencil-community/postcss autoprefixer
4. update stencil.config.ts

   
   import { postcss } from '@stencil-community/postcss';
   import autoprefixer from 'autoprefixer';

export const config: Config = { namespace: 'stencil-panda', ... plugins: [ postcss({ plugins: [autoprefixer()], }), ], };

5. install panda

pnpm install -D @pandacss/dev pnpm panda init -p

6. update `package.json` scripts

"scripts": { "prepare": "panda codegen", }

7. update `src/components/my-component/my-component.css` by adding `@layer reset, base, tokens, recipes, utilities;`
8. run panda prep

pnpm prepare pnpm panda

9. try adding some css to `src/components/my-component/my-component.tsx`

import { css } from '../../../styled-system/css'; ... return ( <div class={css({ color: 'red' })}> Hello, World! I'm {this.getText()}

[segunadebayo]

Please set skipLibCheck: true in your tsconfig to resolve this.

I recommend using the CLI when integrating with Stencil until we develop a doc/example.

Feel free to contribute to the docs when you get all this working.