Less.js: `rgba（）`のような組み込み関数内のカスタムプロパティはエラーをスローします

ただ脱出してください。

カスタムプロパティがTRにあると間違いなく問題になるので、「機能リクエスト」ラベルを付けました。 CSS関数引数のエラー検出を無効にすることで簡単に修正できます（言語の重要な部分が削除されるので非常に悲しいですが、ブラウザでデバッグするまでエラーは見つかりません）。

カスタムプロパティは、IE11を除くすべてのブラウザーでサポートされています。 来年中には主流になると思いますので、まもなくサポートが実施されると思います。

少ないですが、AFAIKには、カスタムプロパティ値の非常に寛容な性質のテストもありません。 トップレベルのトークン（角かっこまたは中括弧のペアに含まれていない）でない限り、セミコロンを含め、ほとんどすべてのものを含めることができます。 参照： https ：

この変更にはとにかくn-of-argsチェックが必要なため（関数内で少なくともいくつかのエラー検証を維持するため）、新しいrgba実装も序数の色値の2つの引数形式をサポートすると想定されます。 ：

rgba(var(--some), .42); // -> rgba(var(--some), .42)
rgba(#010101, .42); // -> rgba(1, 1, 1, .42)

一般に、argsのカスタムプロパティをどのように処理する必要がありますか？ 技術的には、 var(--some-property)はほぼどこでも使用でき、Lessがrgba()などの組み込みCSS関数の引数を解釈しようとしている場合は問題になります。 Lessが組み込みのCSS関数に対して厳密な値エラーをスローする理由はわかりませんが？ 式をサポートするためだけですか？

https://github.com/less/less.js/blob/master/lib/less/functions/color.js#L34にたくさんの組み込みCSS関数があり

rgb() rgba()まだサポートしていないブラウザに追加されたかどうかはわかりませんか？ 4年前に追加されたようです。 おそらく、ブラウザでまだサポートされていない新しいカラー関数にバランスを追加することが理論的根拠でしたか？ 🤔@ lukeapageあなたはまだ答えるために周りにいますか？

＃3214での私のコメントを考慮すると、この問題の簡単な修正は、対応する関数の実装で「if（nargs <3/4）フォールバック（何も返さない）」になります。

（そして、より厳密な修正は、そのようなすべての関数のすべての引数をチェックして、それが評価可能かどうかを判断し、カラーオブジェクトまたはCSS文字列フォールバックのいずれかを返すことです）。

＃3214での私のコメントを考慮すると、この問題の簡単な修正は、対応する関数の実装で「if（nargs <3/4）フォールバック（何も返さない）」になります。

そして、 var()同様のチェック？

darken(rgba(var(--red-value), 2, 3, .4), 5%)

つまり、次のことを行う必要があります。

1. 関数がn引数と一致しない場合、関数のパススルーを許可しますか？ 関数レジストリについて特別なことは何もないので、関数に特別なフラグを立てる必要があると思います（ toString()関数のようなクレイジーなことをして、文字通り正規表現で引数をカウントしない限り-JSで唯一のリフレクションのタイプであるAFAIK;あなたTypeScriptでそれを行うことができるかもしれませんが、それは私たちを助けません）
2. 一致しない関数が別のLess関数評価で使用されている場合、エラーをスローします。

カスタムプロパティの導入により、コンパイル時にCSS関数を解決できなくなったため、これは興味深い問題です。 ある程度、静的前処理の時代の終わりにいる可能性があります。 しかし、それはまったく別の議論です。

カスタムプロパティの導入により、コンパイル時にCSS関数を解決できなくなったため、これは興味深い問題です。

本当に新しいことは何もありません。 Lessでこれを処理するために必要なすべての機能は、v1.x以降にあります-以下を参照してください。 唯一の課題は、肥大化しない方法でコーディングすることです。

関数レジストリについて特別なことは何もないので、関数に特別なフラグを立てる必要があると思います

いいえ、関数は引数を評価できない場合はundefined （またはnull ）を返す必要があります：このように（引数が100％不安定であることが検出されない限り、エラーをトリガーします）。 。
また、未定義の戻り値により、関数エバリュエーターは最初の文字列表現であるDemoにフォールバックします。

そして、 var()同様のチェック

また、いいえ、 varまたは特定のもの（基本的にCSSの将来からの未知のもの）をチェックする必要はありません。 それがポイントです。 コードは、評価できないもの（不明）ではなく、評価できるもの（既知のもの）をチェックする必要があります。
（詳細は特定の機能によって大きく異なる場合がありますが、それほど重要ではありません）。

ところで、という通知--varまた、内蔵されたレス機能（ならびに任意であるident(...)単に明示的に実装されていない事が）（それ故にそれは単にバック自己文字列表現に落ちます）必要がないからです。 ただし、プラグイン（たとえば）は、潜在的に評価可能な値を返す可能性のある独自の実装でプラグインをオーバーライドする場合があります。

@ Seven-phases-maxわかりました。簡単な修正は、これらのCSS / Less関数がエラーをスローするのではなく（そのままレンダリングするために）未定義を返すことだと思いますか？ それは理にかなっているようですが、関数がない場合。 2（ darken() ）は引数を解釈できません（この時点でrgba()匿名値に評価されますか？）、それでもスローする必要がありますか？

自分自身との議論：

また、いいえ、 var()または特定のもの（基本的にCSSの将来からの未知のもの）をチェックする必要はありません。

一方、関数がrgba(var(...), ...)とrgba(foo, ...)を区別し、それでもエラーをトリガーできるように、 var具体的に検出することは問題ではありません（さらには魅力的です）。後者の場合ですが、CSSに新しいものを追加するたびに発生する同様の問題を意味します。
（どちらのバリアントも問題ないと思います。バランスを見つけること、および/またはメンテナの負担が少ないことを予測することが重要です...）。

@ matthew-ディーン

それは理にかなっているようですが、関数がない場合。 2（darken（）のように）はargを解釈できません（この時点でrgba（）匿名値に評価されますか？）、それでもスローする必要がありますか？

はい、正確に-私たちも、理想的に、彼ら（のような関数ものの（このため、新しいコードは必要ありませんdarken現在のため）この場合には、よりフレンドリーエラーメッセージを持つ必要があります"a.toHSL is not a function"様のメッセージがありますかなり紛らわしい）。

さて、言及されていない他のことは、 rgba(calc(1),1,1)ようなものがブラウザによって有効として扱われることです（calcと3対4の引数の両方に注意してください）ので、おそらくそれについてあまり賢くなるべきではありません。 できれば、原則としてそのまま出力するという発想が好きです。

はい、これは私が意味することです

コードは、評価できないもの（不明）ではなく、評価できるもの（既知のもの）をチェックする必要があります。

Less rgbaの唯一の有効な引数は、数値またはカラーオブジェクトのいずれかです（ rgba(#123, .42)ような「neo」-「CSS4」のような形式も考慮する場合）。
それ以外は、エラーまたは（不明ですが有効な可能性がある）CSS値のいずれかです。

CSSカスタムプロパティのコンテンツの構文は非常に寛容ですが、 rgba()ような組み込み関数内でそのようなプロパティを使用すると問題が発生します

例：
私のプロジェクトでは、ユーザーがアプリのUI全体とさまざまなカスタムコンポーネントの基になるアクセントカラーを定義できます。 また、特定の場所でフェードする必要があるため、rgb形式を使用していますが、CSSはfade(<strong i="9">@color</strong>, 50%)ようなものを提供していません。 そうすれば、 rgba( var(--color), 0.5 )実行できます。 これはChromeで機能し、標準でサポートされています。 ただし、lessは次のエラーerror evaluation function 'rgba': color functions take numbers as parametersスローします。

コード例：

:root {
  --color-accent: 169,57,255;
}
button:hover {
  background-color: rgba(var(--color-accent), 0.2);
  color: rgb(var(--color-accent));
}

注：これはドロップインライブラリであり、ユーザーにワークフローに別のビルドステップを追加して、自分の色で少ないライブラリをビルドするように強制したくありません。 そのため、私は新しくて光沢のあるカスタムプロパティを使用しています（また、そのスコープ機能のため）。

ところで：そのような厳密な処理をスキップしてとにかくそれを構築する一時的な回避策はありますか？ ネストされたルールに角かっこがないわけではありません。

このように書いてください〜

:root {
    --color-accent: 169,57,255;
}
button:hover {
    background-color: ~"rgba(var(--color-accent), 0.2)";
    color: ~"rgb(var(--color-accent))";
}

@weivea最新バージョンのrgba(var(--color-accent))書くだけです。