Less.js: `rgba()`와 같은 내장 함수 내부의 사용자 정의 속성은 오류를 발생시킵니다.

그냥 탈출 .

사용자 정의 속성이 TR에 있을 때 확실히 문제가 되기 때문에 "기능 요청" 레이블을 붙였습니다. CSS 함수 args에 대한 오류 감지를 비활성화하여 쉽게 고칠 수 있습니다(언어의 중요한 부분을 죽이기 때문에 매우 슬프지만, 즉 브라우저에서 디버그할 때까지 더 이상 오류를 찾지 못할 것입니다).

사용자 지정 속성은 IE11을 제외한 모든 브라우저에서 지원됩니다. 그들은 아마도 내년 안에 주류를 이룰 것이므로 지원이 곧 구현되어야 한다고 생각합니다.

Less, AFAIK에는 사용자 지정 속성 값의 매우 허용적인 특성에 대한 테스트도 없습니다. 최상위 토큰이 아닌 한 세미콜론을 포함하여 거의 모든 것을 포함할 수 있습니다(대괄호 또는 중괄호 쌍에 포함되지 않음). 참조: https://www.w3.org/TR/css-variables/#syntax

이 변경 어쨌든 확인하는 n의-인수를 필요로하기 때문에 새로운 것을, 그것은 또한 가정한다 (함수 내에서 적어도 일부 오류 검증을 유지하기 위해) rgba 구현 또한 순서 색상 값, 예를 들어에 대한 두 개의 인수 형식을 지원합니다 :

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 함수를 볼 수 있으며 IMO는 대부분 그렇지 않아야 합니다. 거기 있어. Less는 린터가 아니며 Less 함수도 아닙니다. 파서가 CSS 기능에서 매우 영리해지려고 하면 실패할 것입니다. 그래서 저는 그것이 문제의 원인이라고 생각합니다. Less는 현재 일반 CSS 색상 기능을 통과시키는 대신 원숭이 패치를 적용하고 있습니다.

아직 rgb() rgba() 지원하지 않는 브라우저에 추가되었는지 확실하지 않습니다. 4년 전에 추가된 것 같습니다. 브라우저에서 아직 지원되지 않는 새로운 색상 기능에 균형을 추가하기 위한 근거가 아닐까요? 🤔 @lukeapage 아직 답변해주실 분

#3214에서 내 의견을 고려할 때 이 문제에 대한 빠른 수정은 해당 함수 구현에서 "if (nargs < 3/4) css 문자열로 폴백(아무것도 반환하지 않음)"입니다.

(그리고 더 엄격한 수정은 모든 함수의 모든 인수를 검사하여 평가 가능한지 결정하고 색상 개체 또는 CSS 문자열 폴백을 반환하는 것입니다).

#3214에서 내 의견을 고려할 때 이 문제에 대한 빠른 수정은 해당 함수 구현에서 "if (nargs < 3/4) css 문자열로 폴백(아무것도 반환하지 않음)"입니다.

var() 대한 유사한 수표 ?

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

즉, 다음을 수행해야 합니다.

1. n-args와 일치하지 않는 경우 함수의 통과를 허용하시겠습니까? 나는 우리가 미친 듯이 일을 수행하지 않으면 아무것도 특별 (기능 레지스트리에 대해이 이후 우리는 특별히 플래그 기능에 필요 가정 toString() 기능을 그대로 정규식 인수 계산 - (가)에만 JS에 반사 유형의 AFAIK을, 당신을 TypeScript로 할 수 있지만 우리에게 도움이되지 않습니다)
2. 일치하지 않는 함수가 다른 Less 함수 평가에서 사용되면 오류가 발생합니다.

사용자 정의 속성의 도입으로 인해 CSS 함수가 컴파일 시간에 해석되지 않게 되었기 때문에 이것은 흥미로운 문제입니다. 어느 정도 우리는 정적 전처리 시대의 끝자락에 와 있을지도 모릅니다. 그러나 그것은 완전히 다른 논의입니다.

사용자 정의 속성의 도입으로 인해 CSS 함수가 컴파일 시간에 해석되지 않게 되었기 때문에 이것은 흥미로운 문제입니다.

정말 새로운 것은 없습니다. Less를 사용하여 이를 처리하는 데 필요한 모든 기능은 v1.x부터 있습니다. 아래를 참조하세요. 유일한 문제는 부풀리지 않는 방식으로 코딩하는 것입니다.

함수 레지스트리에 대해 특별한 것이 없기 때문에 함수에 특별히 플래그를 지정해야 한다고 가정합니다.

아니, 기능 그냥 반환해야합니다 undefined (또는 null ) 그들은 그들의 인수를 평가할 수 없습니다 찾을 경우 : 이런 식으로 그들은 또한 인수를 감지하지 않는 (100 % 불규칙하고 더 나은에의 오류 발생). .
그리고 정의되지 않은 반환 값은 함수 평가자가 초기 문자열 표현인 Demo 로 폴백하도록 만듭니다.

var() 대한 유사한 수표

또한 아니요, var 또는 특정 항목(CSS 미래에서 기본적으로 알려지지 않은 항목)을 확인할 필요가 없습니다. 그게 요점입니다. 코드는 평가할 수 없는 것(알 수 없는 것) 대신 평가할 수 있는 것(알려진 것)을 확인해야 합니다.
(세부 사항은 특정 기능에 따라 매우 다를 수 있지만 그렇게 중요하지는 않습니다).

Btw., --var 는 명시적으로 구현되지 않은 내장된 Less 함수( 모든 ident(...) )이기도 합니다(따라서 단순히 자체 문자열 표현으로 대체됨) ) 그럴 필요가 없기 때문입니다. 그러나 플러그인(예: 플러그인)은 잠재적으로 평가 가능한 값을 반환할 수 있는 자체 구현으로 이를 재정의할 수 있습니다.

@seven-phases-max 오 좋아, 그래서 간단한 수정은 이러한 CSS/Less 함수가 오류를 던지기보다 undefined를 반환하는 것이라고 생각하십니까(있는 그대로 렌더링하기 위해)? 그것은 합리적으로 보입니다. 그렇다면 기능이 없습니다. 2( darken() 와 같은)는 arg(이 시점에서 rgba() 익명 값으로 평가됩니까?)를 해석할 수 없지만 여전히 던져야 합니까?

나 자신과 논쟁 :

또한 아니오, var() 또는 특정 항목(CSS 미래에서 기본적으로 알려지지 않은 항목)을 확인할 필요가 없습니다.

반면에 함수가 rgba(var(...), ...) 와 rgba(foo, ...) 구별하고 여전히 오류를 트리거할 수 있도록 var 를 감지하는 것은 문제가 되지 않습니다(심지어 유혹적일 수도 있습니다). 후자의 경우에는 CSS에 새로운 것을 추가할 때마다 발생하는 유사한 문제를 의미합니다.
(두 가지 변형 모두 괜찮으며 균형을 찾고/하거나 유지 관리자의 부담을 덜 예측하는 것이 더 중요합니다...).

@matthew-dean

그것은 합리적으로 보입니다. 그렇다면 기능이 없습니다. 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));
}

참고: 이것은 드롭인 라이브러리이며 사용자가 색상을 사용하여 더 적은 라이브러리를 빌드하기 위해 워크플로에 다른 빌드 단계를 추가하도록 강요하고 싶지 않습니다. 이것이 내가 새롭고 빛나는 사용자 정의 속성을 사용하는 이유입니다(또한 범위 지정 기능 때문에).

BTW: 그런 엄격한 처리를 건너뛰고 어쨌든 빌드하는 임시 해결 방법이 있습니까? 중첩 규칙에서 괄호가 누락된 것은 아닙니다.

이렇게 쓰세요~

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

@weivea Less 3.x의 최신 버전에서는 이것이 필요하지 않습니다. 그냥 rgba(var(--color-accent)) 라고 쓰세요.