Angular and React examples

[Kim-Andersen]

Hi. I got very excited when I learned about this plugin on Twitter, it's exactly what we need on project using lit elements.
However I'm having problems configuring this in an Angular (12+) app.

Could you maybe give some guidance or advice on how to get up and running using Angular?

I'm currently trying using @angular-builders/custom-webpack, but no luck yet.

Thanks a lot and thanks for you work on this.

[bennypowers]

Hi @Kim-Andersen Thanks for opening this issue

Can you give me some more information about the kinds of trouble you're having?

I suspect that what you need to do is exclude css files that are used with lit-css-loader from angular's bespoke css processes, and to include those files for lit-css-loader.

I'd be very happy to take a docs PR when you get this working.

[Kim-Andersen]

@bennypowers Sorry, I fell sick but I'll have another look today or tomorrow.

[Kim-Andersen]

@bennypowers Here is some more info.
This is the custom webpack setup in my Angular app:

module.exports = {
  test: /\.lit.css$/,
  loader: 'lit-css-loader'
};

I'm using the ".lit.css" extension here to avoid loader conflicts with regular .css files in Angular.

But as soon as I try to import blah.lit.css in a Lit element file, I get this Angular compile error:
"Cannot find module './styles.lit.css' or its corresponding type declarations."

So this might be a Typescript problem and not a loader problem.

Try and have a look here:
https://github.com/drdreo/lit-scss-loader#typescript
https://github.com/drdreo/lit-scss-loader/blob/master/types.d.ts

Maybe you also need some type for the import to work in Typescript projects?

[bennypowers]

add this declaration.d.ts file somewhere that TS picks it up

declare module '*.lit.css' {
  import type { CSSResult } from 'lit';

  // import style from './some-styles.scss';
  const style: CSSResult;
  export default style;
}

[Kim-Andersen]

Thanks, I tried that but no luck. I always end up with the following compile error in Angular:

I have changed configuration to use ".litcss", to further avoid conflicts with other css loaders.

[bennypowers]

most likely your declaration file isn't picked up by typescript, make sure it's in your include or files

[Kim-Andersen]

@bennypowers Oh f*ck me. I have two tsconfig.json files, one extending the other, and the "includes" field got overridden.
It works now. Thanks a lot.

So as a final suggestion; it would be nice with the declaration.d.ts file included in your package.

[bennypowers]

thanks for the suggestion.

As you've seen from your example, it would be difficult if not impossible for me to anticipate everyone's particular usages (e.g. *.litcss). Since typescript's module graph is global I wouldn't want to pollute it for users by asserting anything about their use of css files.

But I do have the technique of wildcard module augmentation documented in the various project readmes.

I'm going to close this issue as it appears you've resolved the problem. Thanks again for the report.