自作npm の css ファイルを import できない原因は package.json の sideEffects 設定だった話

npm を自作していたら css 関連でかなりハマってしまったので備忘録を残します。

① パッケージ内で css モジュールを import したら型定義ファイルが無いとエラーになる
② 完成したパッケージ内の css が import されない

結論：package.json の sideEffes に注意！

package.json に "sideEffects": false を記載していたのが原因でした。

変更前

package.json

"sideEffects": false

変更後

package.json

"sideEffects": [
  "*.css"
]

①パッケージ内で css モジュールを import したら型定義ファイルが無いとエラーになる

Vite + TypeScript + Vue3 という環境で .vue ファイル内に cssモジュールを読み込もうとしたら下記のようなエラーが表示されました。

Cannot find module './foo.module.css' or its corresponding type declarations.
モジュール './foo.module.css' またはそれに対応する型宣言が見つかりません。

cssモジュールの型定義をインストールする

@types/css-modules をインストールし、その後 tsconfig.json に追加します。

yarn add --dev @types/css-modules

tsconfig.json の compilerOptions.typeRoots に追加。

tsconfig.json

"compilerOptions": {
  "typeRoots": ["./node_modules/@types"]

package.json に css を定義

dist/style.css を置き、package.json にも記載します。

/my-npm
+-- /dist
    +-- style.css
    +-- my-npm.es.js

package.json

"exports": {
  ".": "./dist/my-npm.es.js",
  "./css": "./dist/style.css"
},
"sideEffects": false

この時はまだ "sideEffects": false が原因だったとは気付いてませんでした……。

② 完成したパッケージ内の css が import されない

import "my-npm/css";

上記のように css を import したのですがビルドされた js には css が含まれてませんでした。

原因は "sideEffects": false

今まで自作 npm 内で css モジュールを利用してなかったので sideEffects: false にしていたのですが、それをすっかり忘れていました。

下記のように変更することで解決できました。

package.json

"sideEffects": false
↓
"sideEffects": [
  "*.css"
],

sideEffects は副作用の有無を指定するものです。
このへんのページが詳しいです。