Help with Meteor RSPack CSS Modules

help
1

Has anyone been able to use css modules in Meteor 3.4 with RSPack? I get issues making the modules work and getting the import to work without TypeScript definition issues.

2

Not a use case I have experimented with yet. I will do it soon. Rspack has docs on CSS modules setup.

Could you share the repository with the app exactly at the point where the error happens? It would be interesting for me to experiment more closely with what you are trying to do.

3

Thank you @nachocodoner for taking a look at this. I did a very simple repository with a fresh installation of Meteor 3.4 with the TypeScript template (GitHub - juanpmd/meteor-css-modules · GitHub).

If I use import * as styles from './App.module.css'; CSS Modules work but with TypeScript errors and when I enable default imports in Rspack, it does not work (using the way defined in CSS - Rspack).

4

Hi @juanpmd,

I managed to reproduce it and got it working :+1:

There are 2 parts to fix:

1. Add a TypeScript declaration for *.module.css

TypeScript does not know how to type CSS module imports by default, so you need a declaration file, for example imports/css-modules.d.ts:

declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

2. Disable named exports in the Rspack CSS parser config

When Rspack resolves a .module.css file through css/auto, it internally delegates to css/module, so namedExports: false needs to be set on both:

export default defineConfig(() => ({
  module: {
    parser: {
      'css/auto': {
        namedExports: false,
      },
      'css/module': {
        namedExports: false,
      },
    },
  },
  plugins: [new TsCheckerRspackPlugin()],
}));

After that, this works correctly:

import styles from './App.module.css';

So you get:

  • no TypeScript error
  • proper default import
  • CSS Modules scoping working at runtime

I tested this locally and it works :+1:

Good catch btw :smile: the CSS Modules setup is missing from the Meteor-Rspack docs, we’ll look into adding it

4 Likes
5

Than you @dupontbertrand for this. I do think its worth checking how we can setup the type definitions from the Meteor core itself (I myself am not a fan of adding d.ts files around my code).

This is a new feature and @nachocodoner might have a better opinion, I would love if I can just setup the config in rspack and no need for extra type definitions for everything to work correctly (simillar to how .less files work perfectly right now).

1 Like