bennypowers/rollup-plugin-lit-css

Moved to https://github.com/bennypowers/lit-css

Package Moved

Please see bennypowers/lit-css

rollup-plugin-lit-css's Issues

"Unexpected token" while compiling with Sass

Description

Combining rollup-plugin-lit-css and rollup-plugin-styles produces an "Unexpected token" error when mode is set to emit.

https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
lit-element (imported by src/MyComponent.ts)
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/MyComponent.scss (1:0)
1: .big-boi{background-color:#00f;color:red}
   ^
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

Reproduction

You can use the combination of the following files to reproduce this. If you'd prefer this in a different format please let me know.

rollup.config.js

import litcss from "rollup-plugin-lit-css";
import styles from "rollup-plugin-styles";
import typescript from "@rollup/plugin-typescript";

const distFolder = "dist";

export default [
  {
    input: ["index.ts"],
    output: {
      file: `${distFolder}/index.js`,
      format: "es",
      sourcemap: true,
    },
    plugins: [
      styles({
        mode: "emit",
        minimize: true,
      }),
      litcss({
        include: ["src/*.scss"],
      }),
      typescript(),
    ],
  },
];

index.ts

export { MyComponent } from './src/MyComponent.ts';

src/MyComponent.ts

import { CSSResult, html, LitElement, property } from "lit-element";
import componentStyles from "./MyComponent.scss";

export class MyComponent extends LitElement {
  static get styles(): CSSResult[] {
    console.log(componentStyles, typeof componentStyles);
    return [componentStyles];
  }

  @property({ type: String }) title = "Hey there";

  @property({ type: Number }) counter = 5;

  __increment() {
    this.counter += 1;
  }

  render() {
    return html`
      <h2>${this.title} Nr. ${this.counter}!</h2>
      <button @click=${this.__increment}>increment</button>
    `;
  }
}

src/MyComponent.scss

.big-boi {
    background-color: blue;
    color: red;
}

Workaround

You can workaround this by omitting litcss() and leveraging the css and unsafeCSS imports from lit-element.

static get styles(): CSSResult[] {
	return [
		css`
			${unsafeCSS(styles)}
		`
	];
}

Documentation request: Usage

How to import a css file ?

any chance this could work with .scss files?

Hi,

I am using vitejs with lit and was wondering if your plugin could be use with .scss files

Thank you