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