Error in Parcel Transformer sass when reading sass file in lit using Typescript

[Darrenbydesign]

I am trying to figure out how this import is supposed to run. I have followed the steps in the readme and I ran into two errors.

The first error was in recognizing the module for the named pipeline litsass*:.

I fixed this issue by adding a declarations.d.ts file to my project with the following content

declare module "litsass:*" {
  const value: string
  export default value
}

This allowed parcel to recognize the named pipeline in my component.ts file.

Where I am getting confused at now is in why I am getting this error:

Class static side 'typeof MyButton' incorrectly extends base class static side 'typeof LitElement'.
  Types of property 'styles' are incompatible.
    Type 'string' is not assignable to type 'CSSResultGroup'.

Here's the component file:

import { LitElement, html, css } from "lit"
import { customElement, property } from "lit/decorators"
import myButtonStyles from 'litsass:./my-button.component.scss'

@customElement( 'my-button' )
export class MyButton extends LitElement
{
    static styles = [myButtonStyles];
...

}

My .parcelrc

{
  "extends": "@parcel/config-default",
  "resolvers": [
    "@parcel/resolver-glob",
    "..."
  ],
  "transformers": {
    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"],
    "sass":["...", "@parcel/transformer-sass"],
    "litsass:*": [
      "@parcel/transformer-sass",
      "parcel-transformer-lit-sass",
      "@parcel/transformer-js",
      "..."
    ]
  }
}

Parcel Version: "parcel": "^2.9.3", Lit Version: "lit": "^2.7.2",

I am not sure why what I have that could be different. It looks like the example in the readme also uses the Typescript version of Lit so I am at a loss. Can anyone help me figure this out?

[Darrenbydesign]

I am trying to figure out how this import is supposed to run. I have followed the steps in the readme and I ran into two errors.

The first error was in recognizing the module for the named pipeline litsass*:.

I fixed this issue by adding a declarations.d.ts file to my project with the following content

declare module "litsass:*" {
  const value: string
  export default value
}

This allowed parcel to recognize the named pipeline in my component.ts file.

Where I am getting confused at now is in why I am getting this error:

Class static side 'typeof MyButton' incorrectly extends base class static side 'typeof LitElement'.
  Types of property 'styles' are incompatible.
    Type 'string' is not assignable to type 'CSSResultGroup'.

Here's the component file:

import { LitElement, html, css } from "lit"
import { customElement, property } from "lit/decorators"
import myButtonStyles from 'litsass:./my-button.component.scss'

@customElement( 'my-button' )
export class MyButton extends LitElement
{
  static styles = [myButtonStyles];
...

}

My .parcelrc

{
  "extends": "@parcel/config-default",
  "resolvers": [
    "@parcel/resolver-glob",
    "..."
  ],
  "transformers": {
    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"],
    "sass":["...", "@parcel/transformer-sass"],
    "litsass:*": [
      "@parcel/transformer-sass",
      "parcel-transformer-lit-sass",
      "@parcel/transformer-js",
      "..."
    ]
  }
}

Parcel Version: "parcel": "^2.9.3", Lit Version: "lit": "^2.7.2",

I am not sure why what I have that could be different. It looks like the example in the readme also uses the Typescript version of Lit so I am at a loss. Can anyone help me figure this out?

Update

I was able to resolve the error in my Typescript by updating my declarations.d.ts file to the following structure:

declare module "*.scss" {
const litsass: any
export default litsass
}

I found the above from the quickshare.dev project that Kiernan wrote.

I am now getting the following error:

Error Message:

Error: expected "{".
    ╷
  2 │         import {css} from 'lit';
    │                    ^

After looking at the code for the transformer it should be present already but it seems like this is not being recognized.

@kieran-harte have you run into the above issue when using this transformer in your sass files?

Another Update

I discovered the problem it was user error. I added (mistakenly) the following to the litsass*: named pipeline:

...
"litsass:*": [
   "@parcel/transformer-sass",
       "parcel-transformer-lit-sass",
       "@parcel/transformer-js",
       "..." // this part is the problem!

once I remove the link with the "..." it works as intended.

Adding this here for if other people are as silly as I am someday