Lit-Elementで外部cssを取り込む方法

Lit-Elementのスタイリング

公式サイトでは、css関数をインポートして、タグ付きテンプレートリテラルで書くことを勧めています。

import { LitElement, css } from "lit-element"

class MyElement extends LitElement {
  static styles = css`
    :host {
      display: block;
    }
  `;
}

ですが、文字列として書くのでlintもシンタックスハイライトも付きません。そんな状態で規模が大きくなるとかなり見づらい。
そこで、.cssファイルを外部に定義してそれをインポートしたいと誰もが思いますが、公式の外部スタイルシートの取り込み例がコレジャナイだったので、ここにメモとして残しておきます。

外部cssを取り込む方法

import { LitElement, css, unsafeCSS } from "lit-element"
import styles from "path/to/css"

class MyElement extends LitElement {
    static styles = unsafeCSS(styles)
    // static styles = [ unsafeCSS(styles), unsafeCSS(otherStyles) ] 複数ある場合
}

webpack

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ "raw-loader" ] // raw-loaderで文字列としてインポートする
            }
        ]
    }

cssをそのまま文字列として読み込み、unsafeCSSでCSSResultオブジェクトに変換します。
unsafeCSSは、この関数の引数にユーザが任意の値を渡せてしまうと、悪意のあるコードが実行できてしまうのでunsafeのようです。
webpackでバンドルする文字列だけ渡すのでこのケースでは問題ありません。

各種csspreprocessorもraw-loaderかませば多分読み込めます。

問題点

raw-loaderだとcssのminifyができない。
何かいい方法があれば教えてください。