CSSのmin() / max()がStylusのビルトイン関数と競合する件

結論

.hoge
  width @css{max(0px, 100vh - 10px)}

.fuga
  width "min(%s)" %  (50vh, 500px)

// Stylus変数を一緒に使う場合
.piyo
  width "min(%s, %s)" % (value_a value_b)

何が問題か

Stylusにはビルトイン関数というものがあります。
便利な機能を元々用意してくれているのですね。

Built-in Functions | Stylus
Stylusのビルトイン関数まとめ · GitHub

その中にはmin()とmax()という関数があります。
2つの数字を与えると、小さい方 or 大きい方を返してくれます。

min(1, 5) // 1が返る

ここで問題なのが、CSSにもmin()とmax()があることです。
昔はなかったので、Stylusを久々に触ってアカンやん！となりました。

CSSのmin()とmax()は、その値の最小値 or 最大値を指定できる関数です。

min() - CSS: カスケーディングスタイルシート | MDN
max() - CSS: カスケーディングスタイルシート | MDN
CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説 | コリス

レスポンシブデザインとの相性の良さから、非常に便利な関数です。

解決策

CSSとStylusに、同じ名前で違う関数が存在してしまっていることがわかりました。

これを回避するために、StylusのCSSリテラルという機能が使えます。
@css{}で囲むことで、プレーンなCSSとして扱えるようです。
CSS Literal | Stylus

以下のように記載します。

.hoge
  width @css{max(0px, 100vh - 10px)}

これでCSSのmaxを使えるようになりました（モチロンminも同様です）。

Stylusの変数を使う場合

これで解決と思いきや。
Stylusの変数を組み合わせて使いたい場合は、@cssではうまくいきませんでした。

@cssで囲むとStylusの機能ではなくCSSで出力してねという意味になるので、Stylusの変数が効かなくなってしまいました。

変数も同時に使いたい場合は、以下のように記載します。

.piyo
  width "min(%s, %s)" % (value_a value_b)

Stylusで変数を使うときの記法で%sを使う書き方があるのですが、それと併用することで使えました。
（いつ見てもクセ強いんだよな……）

解決。

終わりに

カッコもコロンも要らないStylus、私は大好きなのですが世はPostCSS or Sassって印象です。
てかピュアなCSSも相当高機能になってきてますしおすし。

でも使うもんね！と思って久々に触ってみたら今回の罠にかかりました。
私がStylusガッツリ使ってたのは、calc()すげええぇぇ！ってなってたくらい昔だったので……ヘヘ……。

CSS自体と競合してしまってるのは、正直かなり微妙やなーと思いました。
また動向を見守っていきたい所存です。

では！

参考

how can i use max()/min() as css-math-functions instead of stylus-bulidin-functions - Stack Overflow
Stylus should not overwrite CSS built-in functions, such as min and max · Issue #2584 · stylus/stylus · GitHub