このサイトのコードを見ると、スタイルもTypeScriptで書かれている。たとえば一覧ページのリンクは、こんな形で見た目を定義しているよ。
const styles = css.create({
link: {
display: 'flex',
padding: '18px 20px',
borderRadius: 14,
},
});
コンポーネントと同じ言語で書けるなら、プロパティ名の間違いにも気づきやすそうですね。
そうだね。このスタイルはコンポーネントから classStyle を使って参照する。
const ArticleLink = () => (
<a classStyle={styles.link}>記事を読む</a>
);
className ではないんですね。何か特別な仕組みですか?
ここで使われているのがPlumeriaだ。Enginemixでは特別な機能として目立たせるのではなく、普段のスタイリング方法として内部のさまざまな場所で自然に使われている。
Plumeriaで書いたスタイルは、ビルド時に静的なCSSとクラス名へコンパイルされることが保証されている。ブラウザがページを表示するたびに、スタイルオブジェクトを組み立て直す仕組みではない。
書くときはTypeScriptの助けを借りて、配信するときは普通のCSSになる。そのくらい自然に考えればよさそうですね。
その理解で十分だよ。利用者がライブラリの存在を意識しなくても、サイトの見た目が安定して表示される。それがこのサイトでのPlumeriaの役割だ。

