"Unexpected token" while compiling with Sass

[JamesIves]

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)}
        `
    ];
}

[bennypowers]

Can you try this config:

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,
    },
    mimeTypes: {
      "src/*.scss": "js"
    },
    plugins: [
      styles({
        mode: "emit",
        minimize: true,
      }),
      litcss({
        include: ["src/*.scss"],
      }),
      typescript(),
    ],
  },
];

[bennypowers]

side note, you might like to try out @web/dev-server-esbuild as a replacement for @rollup/plugin-typescript as it's much faster

[JamesIves]

With the config above I end up with the same error and a warning provided by rollup:

(!) You have passed an unrecognized option Unknown input options: mimeTypes. Allowed options: acorn, acornInjectPlugins, cache, context, experimentalCacheExpiry, external, inlineDynamicImports, input, makeAbsoluteExternalsRelative, manualChunks, moduleContext, onwarn, perf, plugins, preserveEntrySignatures, preserveModules, preserveSymlinks, shimMissingExports, strictDeprecations, treeshake, watch

[bennypowers]

ahh my bad I had assumed this was your dev server config.

I have to assume this is a problem with rollup-plugin-styles. this package is extremely simple, it just takes a css string and outputs it as a js file.

Have you tried editing this plugin's files in node_modules and logging the inputs and outputs?