How to generate css module TS declaration using @modernjs/module-tools

[stevebeauge]

Hi,

I'm maintaining a large monorepo with many private libraries (react component or ts only packages) and a few apps. Currently, the packages are built using heft, which is working fine but is quite slow.

I'm experimenting with various alternatives including modernjs. I didn't find, however, how to generate the TS strong declaration for css modules.

I found output.enableCssModuleTSDeclaration in the modern framework, but not in module tools.

How I can enable emitting these declarations?

As an alternative, I tried to use PostCSS modules Typescript definitions generator and this config:

import { moduleTools, defineConfig } from "@modern-js/module-tools";

import postcssDTS from "postcss-typescript-d-ts";

import packageJson from "./package.json";

const banner = `/*
${packageJson.name}@${packageJson.version}
© ${packageJson.author} ${new Date().getFullYear()}
*/`;
export default defineConfig({
    plugins: [moduleTools()],
    buildPreset: "npm-component",
    buildConfig: {
        style: {
            postcss: {
                plugins: [
                    postcssDTS({
                        extra: {
                            header: banner,
                        },
                    }),
                ],
            },
        },
    },
});

Unfortunately, it works "sometimes". If I delete the css.d.ts file, it works.

Subsequent build won't work with some obscure message:

Error: Build failed with 23 errors:
../../node_modules/.pnpm/postcss-typescript-d-ts@1.0.0_postcss@8.4.35/node_modules/postcss-typescript-d-ts/plugin.js:85:44: ERROR: [plugin: esbuild:adapter] undefined is not iterable (cannot read property Symbol(Symbol.iterator))

I wonder if multiple concurrent builds (the npm-component preset builds both es and cjs output) can interfere each other.

Thanks in advance for help

[10Derozan]

Sorry I miss this discussion. Here is the solution

[stevebeauge]

No problem. Thanks for the link, I'll take a close look at your suggestion.

Thanks