happy-css-modules/エッジケース
happy-css-modules で対処できていないエッジケースについて。
util.module.cssを更新しても、util.module.css を @import している App.module.css の型定義ファイルが更新されない
code:util.module.css
.flex {
display: flex;
}
code:App.module.css
@import './util.module.css';
.main {
// ...
}
この状態でhcm *.module.cssすると、以下が生成される。
code:App.module.css.d.ts
export default const styles: {
'flex': string,
'main': string,
};
しかし、ここでutil.module.cssを以下のように編集して...
code:util.module.css
.box {
display: flex;
}
この状態でhcm *.module.cssしても、App.module.css.d.tsは更新されない。
本来は以下のように更新されるべき。
code:App.module.css.d.ts
export default const styles: {
'box': string,
'main': string,
};
happy-css-modules のキャッシュの管理の仕方が悪いのが原因。
循環 import
@import、@value、composesを使うとモジュールファイル同士の循環 import ができる。しかし happy-css-modules はこのことを全く考慮していない。
code:case-1/a.module.css
@import './b.module.css';
.a {}
code:case-1/b.module.css
@import './a.module.css';
.b {}
@import単独による循環 import だけでなく、@importとcomponsesによる循環 import など、他の種類のものを組み合わせた場合もケアが必要。
code:case-2/a.module.css
@import './b.module.css';
.a {}
code:case-2/b.module.css
.b {
composes: a from './a.module.css':
}
同名の token の import
2つのモジュールファイルを@importでimportした時に、その両方に同名の token があった時どうするのか、考慮できていない。
code:a.module.css
.token {
color: red;
}
code:b.module.css
.token {
color: blue;
}
code:index.module.css
@import './a.module.css';
@import './b.module.css';
// a.module.css と b.module.css のどちらの .token が import される?
import した token とファイル内で定義している token 名が衝突したときも、同じような問題があるだろう。