Include CSS from lerna module in preact

[bhr]

Do you want to request a feature or report a bug?

Bug, likely a user configuration error thought.

What is the current behaviour?

Error is thrown during compilation when running preact watch

ERROR in /workspaces/preact-apps/packages/common/lib/components/Select.tsx(3,19):
TS2307: Cannot find module './select.css' or its corresponding type declarations.

If the current behaviour is a bug, please provide the steps to reproduce.

The typescript app has been set up using the preact-cli create command. The app uses some shared code that is referenced through lerna in node_modules. I've already been using the shared code in another preact project that is using a custom configuration (webpack).

Folder structure:

├── packages
│   ├── common
│   │   └── components
│   │   │   ├── select.css
│   │   │   └── Select.tsx
│   ├── preact-cli-app
│   └── preact-webpack-app
└── lerna.json

preact-webpack-app uses the Select component. It runs and builds without issues.

Gists:

• webpack config.js for preact-webpack-app,
• preact.config.js for preact-cli-app,
• typings.d.ts,
• Select.tsx and select.css

The css-loader options for preact-cli-app are:

{
  modules: { localIdentName: '[local]__[hash:base64:5]' },
  importLoaders: 1,
  sourceMap: true
}

I'm including the common module in the css rules

    config.module.rules[4].include =  [
      path.resolve(__dirname, 'src', 'routes'),
      path.resolve(__dirname, 'src', 'components'),
      path.resolve(__dirname, 'node_modules', 'common')
    ];
    config.module.rules[5].exclude = [
      path.resolve(__dirname, 'src', 'routes'),
      path.resolve(__dirname, 'src', 'components'),
      path.resolve(__dirname, 'node_modules', 'common')
    ];

What is the expected behaviour?

Typescript to build components in the common module without errors.

If this is a feature request, what is motivation or use case for changing the behaviour?

N/A

Please mention other relevant information.

I've taken a look at similar issues in this repository (#1368, #1475, #1218, #522) and on stackoverflow. Unfortunately, none have helped thus far.

Please paste the results of preact info here.

Environment Info:
  System:
    OS: macOS 11.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 12.16.1 - /usr/local/bin/node
    npm: 6.14.8 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Firefox: 83.0
    Safari: 14.0.1
  npmPackages:
    preact: 10.5.5 => 10.5.5
    preact-cli: ^3.0.0 => 3.0.3
    preact-render-to-string: ^5.1.4 => 5.1.12
    preact-router: ^3.2.1 => 3.2.1
  npmGlobalPackages:
    preact-cli: 3.0.3

[rschristian]

I don't believe your typings will apply to other modules. I'll need some time to set up reproduction but try:

declare module 'common/**/*.css' {
  const value: any;
  export default value;
}

[bhr]

I don't believe your typings will apply to other modules. I'll need some time to set up reproduction but try:

declare module 'common/**/*.css' {
  const value: any;
  export default value;
}

declare module allows only one *.
I tried (but no success):

declare module '@vestico/common/lib/components/*.css' {
  const value: any;
  export default value;
}

declare module '@vestico/common/lib/components/*.scss' {
  const content: {[className: string]: string};
  export = content;
}

I've published a sample repository that mimics the setup and reproduces the issue: Sample Repo

The divs from the common component are added but the css is missing.

[rschristian]

Whoops, sorry, didn't realize .d.ts files were limited like that. I'll take a look later. Repo helps a lot.

[rschristian]

@bhr Sorry, got busy right after work and could only look now.

Your issue is that your declaration file (typings.d.ts) isn't actually included in your tsconfig.json. Simply add it to the include array and you should be good to go.

After making that small edit the project could then build. TS just didn't know about the existence of that file is all.

[rschristian]

Closing as this should be fixed. Let me know if you have any further issues.