theme style.js files missing TypeScript definitions

[kwivix]

Describe the bug

Theme style.js files do not have TypeScript definition files when importing a theme for usage in the shadow dom:

TS7016: Could not find a declaration file for module '@shoelace-style/shoelace/dist/themes/light.styles.js'.

To Reproduce

Steps to reproduce the behaviour:

1. Create an web component in TypeScript
2. Import the light or dark theme from Shoelace

Demo

See playground

import {html, css, LitElement} from 'lit';
import {customElement} from 'lit/decorators.js';
import lightCss from '@shoelace-style/shoelace/dist/themes/light.styles.js';
//                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Cannot find module '@shoelace-style/shoelace/dist/themes/light.styles.js' or its corresponding type declarations.(2307)
import '@shoelace-style/shoelace/dist/components/alert/alert.js';

@customElement('my-element')
export class MyElement extends LitElement {
    static override styles = [
        lightCss,
        css`
            p {
                color: blue;
            }
        `,
    ];

    override render() {
        return html`
            <div class="sl-theme-light">
                <sl-alert>Example</sl-alert>
            </div>
        `;
    }
}

Screenshots

None provided

Browser / OS

• not relevant

Additional information

None provided

[claviska]

Thanks for the PR! I'm OK with this as a last resort, but since these are generated I wonder if we can co-locate the types to make them easier to maintain.

Would JSDoc comments suffice for this? e.g. if the generated file looked something like this:

import { css } from 'lit';

/** @type {import("lit").CSSResult} */
const styles = `
  ...
`;

export default styles;

[claviska]

I guess we'd still need to run TypeScript on this to generated the .d.ts files. I'll defer this one to @KonnorRogers.

[KonnorRogers]

Yea, end users would need checkJs: true and allowJs: true for this to be passed to them, and even then, the TS Compiler then needs to run through node_modules, so its not great. So generally its best to generate a .d.ts for users. Whether it be with JSDoc, or with the babel-ts PR