color-function-notation

カラー関数のモダンまたはレガシーな表記法を指定します。

    a { color: rgb(0 0 0 / 0.2) }
/**            ↑
 *             This notation */

モダンなカラー関数は、CSSの関数が構文の塊をグループ化/命名するために使用されるため、コンマフリーの構文を使用します。これらは、CSS文法が一般的に行うのと同じルールに従って動作する必要があります。値はオプションであり、可能な場合は並べ替え可能で、スペースで区切られ、コンマは繰り返しのみを区切るために使用されます。

レガシーな理由により、rgb()およびhsl()は、すべての引数をコンマで区切る代替構文もサポートしています。また、レガシーな理由から、rgba()およびhsla()関数は同じコンマベースの構文を使用して存在します。

fixオプションは、プライマリオプションが"modern"の場合、このルールによって報告された問題の一部を自動的に修正できます。

messageセカンダリオプションは、このルールの引数を受け入れることができます。

オプション

string: "modern"|"legacy"

"modern"

適用可能なカラー関数は常にモダンな表記法を使用する必要があります。

以下のパターンは問題と見なされます。

a { color: rgb(0, 0, 0) }

a { color: rgba(12, 122, 231, 0.2) }

a { color: hsla(270, 60%, 50%, 15%) }

a { color: hsl(.75turn, 60%, 70%) }

以下のパターンは問題とは見なされません。

a { color: rgb(0 0 0) }

a { color: rgb(12 122 231 / 0.2) }

a { color: hsl(270 60% 50% / 15%) }

a { color: hsl(.75turn 60% 70%) }

"legacy"

適用可能なカラー関数は常にレガシーな表記法を使用する必要があります。

以下のパターンは問題と見なされます。

a { color: rgb(0 0 0) }

a { color: rgb(12 122 231 / 0.2) }

a { color: hsl(270 60% 50% / 15%) }

a { color: hsl(.75turn 60% 70%) }

以下のパターンは問題とは見なされません。

a { color: rgb(0, 0, 0) }

a { color: rgba(12, 122, 231, 0.2) }

a { color: hsla(270, 60%, 50%, 15%) }

a { color: hsl(.75turn, 60%, 70%) }

オプションのセカンダリオプション

ignore: ["with-var-inside"]

変数を含むカラー関数を無視します。

指定された場合

["modern", { "ignore": ["with-var-inside"] }]

以下のパターンは問題とは見なされません。

a {
  color: rgba(var(--foo), 0.5);
}

指定された場合

["legacy", { "ignore": ["with-var-inside"] }]

以下のパターンは問題とは見なされません。

a {
  color: rgba(var(--foo) / 0.5);
}