Chrome拡張機能向けの内容です。
ビルドツールはviteを使用しています。

1. 背景

個人開発でChrome拡張機能を開発しています。
ノーフレームワークのプロジェクトでcssファイルを以下のようなtsファイルで管理していました。

css.ts

export const css = `<style>
.className {
    margin-top: 1rem;
    float: left;
}
</style>`

これだと以下の問題があります

cssの記法が誤っている場合にエディタで気づきづらい
トランスパイルの対象となり、型チェック、バンドルの時間が余分にかかる
CSSのグローバルスコープ問題

css-modulesを勉強していたら、ノーフレームワークでも使えることを知り検証してみました

import styles from './style.css';

element.innerHTML = '<div class="' + styles.className + '">';

2. 手順

2.1. CssModulesの型定義を補完

以下で紹介する方法のいずれかをご使用ください

2.1.1. @types/css-modules

npm i @types/css-modules

2.1.2. vite-env.d.tsを作成

Vite はデフォルトでは Node.js の API を提供しているとのことです。
ですのでクライアント用のコードを使用するには型定義ファイルを作成する必要があります。

vite-env.d.ts

/// <reference types="vite/client" />

型ディレクティブ/// <reference types= ~/>とは型のimportのようなものです。
以前こちらでまとめましたので良ければご覧ください！

上のvite-env.d.tsファイルを作成すると、以下のCssModulesの型定義が使用可能になります。

type CSSModuleClasses = { readonly [key: string]: string }

cssのファイル名の拡張子は.module.cssにする必要があります。

client.d.tsで以下のように宣言しているからです。

// CSS modules
type CSSModuleClasses = { readonly [key: string]: string }

declare module '*.module.css' {
  const classes: CSSModuleClasses
  export default classes
}

2.1.3. typed-css-modules

npm i typed-css-modules

cssファイル作成後に

tcm src

このコマンドを実行すると、src配下にcssファイル名.css.d.tsが作成されます。

上で紹介した型定義ライブラリのユースケース

CssModulesでアクセスするclass属性がcssファイルにあるかエディタでチェックしたい場合
- typed-css-modules
- ただし、毎回cssファイルが作成されるごとに型定義ファイルを作成する手間がある
CssModulesの型定義までできたら十分な場合
- vite-env.d.ts(@types/css-modulesは管理する手間があるなと感じました)

2.2. cssファイルを記述

styles.module.css

.className {
    color: green;
  }

2.3. 呼び出し元で使用

import styles from '@/styles.module.css';
document.body.innerHTML = `<span class=${styles.className}>green</span>`;

2.4. viteのrollupOptions.output.assetFileNamesのファイル名を固定

vite.config.ts

rollupOptions: {
    output: {
        ~~~~~~,
        assetFileNames: "override.css"
    },
}

2.5. cssをサイトに注入

manifest.json

"content_scripts": [
        {"css": ["override.css"]}
]

3. 最後に

CssModulesによりCssを管理しやすくなりました
CssModulesについてもっと知りたいと思いました

4. 参考

本記事を読んで頂き、ありがとうございました。
いいねいただけると記事執筆の励みになりますので、参考になったと思われた方は是非よろしくお願い致します🙏

ノーフレームワークのChrome拡張機能にCssModulesを導入する