ビルド後、HTMLのclassの順番を変更させないようにするには

トラブルシューティング
#1

現在、SemanticUI（のフォーク先であるFomanticUI）を使用するために試行錯誤をしています。

コンポーネントのHTML上でスタイル設定のためにclassをこのように記入した時、

<div class="ui inverted vertical masthead center aligned segment"></div>

ng serveすると

<div class="aligned center inverted masthead segment ui vertical"></div>

のようにclassの順番がソートされてしまいます。

FomanticUIがclassの順番によってスタイルを決めているものがある(.ui[class*=“center aligned”].segment など)のでhmtlファイルで書いたそのままでビルドをしたいのですが、どこかで設定ができるでしょうか？

環境

"@angular/core": "~8.2.5",
"@angular-devkit/build-angular": "~0.803.4",
"@angular/cli": "~8.3.4",
"@angular/compiler-cli": "~8.2.5",

ivy使用

＊ちなみにngSemanticは更新が止まっているため今回はしないでいこうと思っています。

#2

調べてみたところ、こちら Ivyによるバグで間違いなさそうです。

ngClassを使っても class を使っても、Ivyによって順番を変えられてしまうようです。
v9.0.0 RC.1時点で修正されていないため、今のところはIvyを無効化する以外に対策がなさそうです。

「いいね！」 1
#3

なるほど…！
ivyを使い始めてみようと思ったのですが残念です…
バグだといかんともしがたいですね

とりあえず自分でcssの適用方法を変える、使用するスタイルを厳選するなどしてivyのまま対応してみたいと思います。

ありがとうございました！