mrmckeb/typescript-plugin-css-modules

CSS Modules `composes` properties and default v. named exports

wegry opened this issue · 2 comments

Describe the bug

Similar to #207, we have a project using typescript-plugin-css-modules@5.1.0 (and all default plugin options usage), in it, we use CSS Modules exclusively with named exports.

There seem to be different numbers of exports between the default and namedExports.

To Reproduce
Steps to reproduce the behavior:

  1. Using typescript-plugin-css-modules@5.1.0 and typescript@5.4.3.
  2. With this example css module:
/* theme-typography.module.css */
.aliasingBase {
	-webkit-font-smoothing: antialiased;
}

.h1 {
	composes: aliasingBase;

	font-weight: 300;
}
  1. With the following snippet:
import * as sColors from './theme-colors.module.css';
import * as sLayout from './theme-layout.module.css';
import * as sMisc from './theme-misc.module.css';
import * as sShadow from './theme-shadow.module.css';
import * as sSpacing from './theme-spacing.module.css';
import * as sText from './theme-text.module.css';
import * as sTypo from './theme-typography.module.css';

const s = {...sColors, ...sMisc, ...sTypo, ...sText, ...sLayout, ...sShadow, ...sSpacing};

export function themeCx(props: AllTokens): string {
  const normalized = normalize(props);
  return cx(s, normalized);
}
// s has ~40ish keys on the default export and ~268 named exports besides default
  1. edit: I remembered that adding composes to a css module makes the types for plugin's named exports stop working. There's only a default export in that case and no namedExports.

Expected behavior

Adding composes should continue exporting namedExports from the CSS modules they're contained in.

Desktop (please complete the following information):

  • OS: macOS 14.5
  • Node Version: 20.12