CSS Modules使う #7810
Comments
syuilo
added
✨Feature
|
機能が貧弱で、SCSSを使っているのにもかかわらず前世代的なCSSを書かなきゃいけなくなるためやらない |
|
やっぱやりたい |
|
比較的複雑と思われるMkNoteをCSS Modulesでフラットに書き直してみたけど思ってたより見にくくもないかも |
|
むしろクラス名が一意になることでファイル内検索とかしやすくなったかも |
|
（でしょ？） |
|
クラス名がランダム生成になったためカスタムCSSが無意味になってしまった…と思ったけどカスタムCSS廃止するんだっけ （ハッシュせずにファイル名とクラス名を使うのはダメかしら？） |
This comment was marked as off-topic.
This comment was marked as off-topic.
|
よく考えたらファイル名-クラス名が変更されれば崩壊する事実は変わらないので、ファイル名とクラス名のどちらをハッシュ化に含めようと含めまいと関係ないな |
予定は今のところない |
|
特定のクラスに対するスタイルはできないかもしれないけど(そもそもこの用途では非推奨)、普通にHTMLに対してフォント上書きとかは引き続きできる |
あとファイル名もクラス名も同じでも間に1個divが入るとかでもセレクタによっては壊れそう |
|
ファイル名はフルパスが突っ込まれるのでビルドした環境によってクラス名が違うという話を聞いた(しゅいろの意図に反してまだこの話をするのかという感じではあるけど) |
|
https://github.com/misskey-dev/misskey/blob/develop/packages/frontend/vite.config.ts#L67 これをベースにして、production時はハッシュ化、それ以外ではそのままというふうにすればよさそう generateScopedName: (name, filename, css) => {
const hashsrc = (path.relative(__dirname, filename.split('?')[0]) + '-' + name).replace(/[\\\/\.\?&=]/g, '-').replace(/(src-|vue-)/g, '');
if (process.env.NODE_ENV === 'production') {
return 'x' + toBase62(hash(hashsrc)).substring(0, 4);
} else {
return hashsrc;
}
}, |
|
@syuilo@misskey.io ﾎﾟﾝ |
|
|
特定のクラスに対してスタイルを当てられるようにすると、ちょっとした内部のリファクタリングでもユーザーに影響することになり苦情がくることになる |
|
上記に挙げたようなハッシュの計算にすれば、少なくともソースツリーが変わるかクラス名が変わるまでは同じクラス名が使えるから良いと思うんだけどな |
|
いやMisskey開発においては頻繁に変わるよ |
|
あとクラス名が長いとバンドルサイズに僅かに影響を与えそう |
|
#7810 (comment) ハッシュ化の元になる文字列を 元のクラス名ってランダムじゃないでしょ？ |
|
どうなんだろ :thinkhappy: |
これについてはどうじゃろ |
|
不可避なものだって言ったら適当すぎるか… |
クラス名がコロコロ変わるイメージは個人的にはあまりないかも |
|
updated |
Summary
被りを防ぐためにランダムな名前付ける必要とかが無くなる
が、
.foo > .barのようなセレクタが書けないという問題があり、今まで使ってなかったThe text was updated successfully, but these errors were encountered: