Less.js: 유효한 사용자 지정 속성 값을 구문 분석하지 못하는 경우 (예 : @apply polyfill)

비 CSS 구문 지원은 Less 범위를 벗어납니다. 그래서 내 -1.

어느 쪽이든 이스케이프를 사용하여 출력에 모든 코드를 내보낼 수 있습니다. 예 :

xpaper-drawer-panel {
  --paper-drawer-panel-left-drawer: ~"{background-color: red;}";
}

또는 더 험난한 여러 줄 방식으로 :

paper-drawer-panel {
  -:~";--paper-drawer-panel-left-drawer: {";
    background-color: red;
    color: blue;
  -:~";}";
}

더 복잡한 상황에서는 항상 <strong i="13">@import</strong> (inline) 를 사용할 수도 있습니다.

%(~"%d", @ruleset); -아니요, Less 변수는 매크로가 아니며 컨텍스트에 관계없이 확장되지 않으며 특히 이름이 지정되지 않은 규칙 집합의 경우 유일한 적절한 구문은 규칙 집합 본문 내에서 @ruleset() 이고 _not_ as 속성 값.

비표준 구문은 일반적으로 지원되지 않아야한다는 데 동의합니다.

그러나 이것은 LESS가 많은 경우 Polymer와 호환되지 않음을 의미합니다.

어쨌든 답장을 보내 주셔서 감사합니다. : +1 :

이것이 @ seven-phases-max 결정에 차이가 있는지 확실하지 않지만 @apply 규칙에 대한 공개 사양이 있습니다. http://tabatkins.github.io/specs/css-apply-rule/ #issue -882293bd.

또한 https://github.com/Polymer/polymer/issues/1373 을 참조

그리고 SASS는 https://github.com/sass/sass/issues/1128을 해결하는 것 같습니다.

@ donny-dont 참고 나는 아무것도 결정하지 않는다 (나는 제안을 닫지 않았다)-나는 단지 비평가 일 뿐이다.

음, Tab Atkins는 _tens_ 개의 CSS 표준 제안 ( "아이디어"라고 함)을 생성했으며 Google 직원이 내일에도이를 브라우저에 밀어 넣을 수 있지만 아직 CSS 초안이 되기에는 너무 멀었습니다 (CSS vars 는 약 10 년 동안 CSS 세계에 들어 오 셨나요?).

의미에 대해 @ seven-phases-max 사과합니다. Polymer가 mixin 제안을 추진하고 있으며 @Jamtis 가 실제로 전달하지 않은 것이 형성되면 Chrome

이런 종류의 시나리오에서 파서 용 플러그인 시스템이 있습니까? 실험용 플래그와 같이 켜고 끌 수 있습니까?

여기에서 중복 요청을 리디렉션 할 수 있도록 다시 엽니 다.

/보결

이에 대한 사양이 있습니다. 폴리 필이 존재합니다. Chrome에서 구현했습니다. Polymer는 이미 1.0 릴리스에서 사용하고 있습니다. 웹 사이트는 이미 Polymer를 사용하고 있습니다.

Less가 최소한의 수준에서 구문을 지원하는 것이 완벽하게 합리적인 기대라고 생각합니다.

적은 @apply 이미 --foo: bar; 및 var(--foo) 통과합니다. 빠진 유일한 것은 Less가 --foo: { property: value; } 의 { ... } 를 통과하는 것입니다. 다른 CSS 블록에 주어진 것과 동일한 기본 처리를 사용합니다. 하드 스톱에 도달하고 구문 분석 오류를 던지는 대신.

CSS 변수의 전체 사양이 LESS에서 지원되어야한다고 생각합니다. 이런 일이 일어나기를 원합니다!

@dantman

이에 대한 사양이 있습니다. 폴리 필이 존재합니다. Chrome에서 구현했습니다. Polymer는 이미 1.0 릴리스에서 사용하고 있습니다. 웹 사이트는 이미 Polymer를 사용하고 있습니다.

나에게 그것은 여전히 ​​그다지 설득력이없는 이유가 아닙니다. 즉, Google, Google 및 Google이 이것을 사용하고 있습니다. 다른 곳에서는 관심이 뜨지 않았고 어떤 징후도 없을 것입니다.

@ donny-dont

이런 종류의 시나리오에서 파서 용 플러그인 시스템이 있습니까? 실험용 플래그와 같이 켜고 끌 수 있습니까?

플러그인 시스템이 있지만 구문 분석 변경에 대한 직접적인 지원은 없습니다. 그래서 그것은 사소한 일이 아닙니다.

@dantman
이에 대한 사양이 있습니다. 폴리 필이 존재합니다. Chrome에서 구현했습니다. Polymer는 이미 1.0 릴리스에서 사용하고 있습니다. 웹 사이트는 이미 Polymer를 사용하고 있습니다.

나에게 그것은 여전히 ​​그다지 설득력이없는 이유가 아닙니다. 즉, Google, Google 및 Google이 이것을 사용하고 있습니다. 다른 곳에서는 관심이 뜨지 않았고 어떤 징후도 없을 것입니다.

이 결론은 일반적인 CSS에서 크게 벗어난보다 독점적이고 지원되지 않는 구문에 대해 이야기하고 있다면 의미가 있습니다. 하지만 Less가 이미 중첩을 이해하고 문제의 구문이 CSS의 대괄호 일치 기반 구문 분석 규칙에 완벽하게 맞고 주변 CSS를 깨지 않으며 다른 주요 CSS 전 처리기 및 후 처리기가 작업 중일 때 덜 생성 구문 분석 오류에 대해 이야기하고 있습니다. 지원하거나 이미 작동합니다.

이 결론은 일반적인 CSS에서 크게 벗어난보다 독점적이고 지원되지 않는 구문에 대해 이야기하고 있다면 의미가 있습니다. 하지만 Less가 이미 중첩을 이해하고 문제의 구문이 CSS의 대괄호 일치 기반 구문 분석 규칙에 완벽하게 맞고 주변 CSS를 깨지 않으며 다른 주요 CSS 전 처리기 및 후 처리기가 작업 중일 때 덜 생성 구문 분석 오류에 대해 이야기하고 있습니다. 지원하거나 이미 작동합니다.

관련이 없습니다. Less의 분리 된 규칙 집합과 매우 유사합니다. Less에 추가 된 다른 "pass-thru"항목에 대한 선례가 있습니다. 그래서 반드시 반대하는 것은 아닙니다. 현재 Polymer 이상의 가치가 있다면 회의적입니다.

CSS 변수에 대한 공식 지원은 여기에 나열되어 있습니다. http://caniuse.com/#feat = css-variables

기본 CSS 변수 지원을위한 최소 브라우저 버전

• 크롬 49
• Android 용 Chrome 51
• Android 브라우저 51
• Android 용 Firefox 47
• Firefox 31
• Safari 9.1
• iOS Safari 9.3
• 오페라 36
• 오페라 모바일 37

폴리 필이없는 경우 이는 약 65 %의 글로벌 브라우저 사용에 해당합니다.

여러 CSS Variable Polyfill을 사용하면 브라우저가이를 구현하고 대규모 브라우저 공급자가이를 추진합니다. 이것이 가지고있는 귀중한 기능인 것 같습니다.

공식 사양 : https://drafts.csswg.org/css-variables/

@stramel 그것은이 문제와 관련이 없습니다. Less에서는 CSS 변수가 이미 지원됩니다. 요청은 해당 사양의 일부가 아닌 약 @apply 입니다.

편집 : 모든 CSS 사용자 정의 속성 값이 지원되는 것은 아닙니다. 아래를 참조하십시오.

@ matthew-dean 죄송합니다. 오해했습니다. 관계없이 : +1 : CSS 믹스 인 / 사용자 정의 속성 세트 용

@ matthew-dean 덜 지원하는 기준은 무엇입니까? 다른 브라우저가 구현되어 있으면 괜찮습니까?

@ donny-dont Less는 커뮤니티 프로젝트이므로 특별한 바가 없습니다. 그러나 예, 단일 브라우저를 넘어서는 것이 더 일반적인 기능으로 만들 것입니다.

누군가가 이것을 검색하는 경우 (내가 한 것처럼) : 모든 Polymer 비표준 CSS를 별도의 파일에 넣고 더 적은 파일에 인라인 키워드로 가져올 수 있습니다. 적은 수의 파일이 더 적은 변수와 폴리머 사용자 정의 속성 사이에 인터페이스해야합니다. 그러나 그것이 폴리머가 원하는 방식입니다. 표준에서 모든 편차를 구현할 수는 없다는 데 동의하십시오.

이것을 다시 살펴보기 위해 나는 불행히도 문제의 범위에 대해 좁은 시각을 가지고 있다고 생각합니다.

즉, 예, @apply 는 제안 일 뿐이지 만 _this_는 잘못된 CSS가 _ 아닙니다 _. 더 이상은 아닙니다.

paper-drawer-panel {
  --paper-drawer-panel-left-drawer: {
    background-color: red;
  };
}

내 실수는 @apply 가 사용자 정의 속성 구문에 대한 확장을 제안하고 있다고 생각했지만 그렇지 않습니다. 위의 _IS_는 유효한 사용자 지정 속성 값이므로 Less 지원에 추가해야합니다. 사양에 대해 더 깊이 파고들 시간이 있었으면 좋았을 텐데요. (여기 : https://www.w3.org/TR/css-variables/#syntax.)

Less는 유효한 CSS를 지원하는 핵심 목표를 가지고 있으며 사용자 정의 속성 구문은 현재 모든 브라우저에서 완전히 구현됩니다. 사양은 매우 관대하며 속성 값이 구문 분석되는 방식에 몇 가지 큰 변경이 필요할 수 있습니다. 거의 모든 것을 넣을 수 있습니다. 당신이 값을 가지고 얼마나 미쳤는지 그리고 브라우저가 그것을 허용할지 여부는 확실하지 않습니다. 그러나 사양을 읽는 방식은 잘 구성되어 있으면 대부분 유효합니다. 즉, "최상위"세미콜론 토큰을 만날 때까지 모든 종류의 항목을 중괄호 나 괄호로 묶어서 미쳐 버릴 수 있습니다.

즉, Polymer와 같은 JavaScript 라이브러리는이 CSS 기능 이전에는 불가능했던 선언적 속성 / 값을 JS에서 읽을 수있는 곳에 배치하기 위해 CSS를 "해킹"할 가능성이 점점 더 커지고 있습니다.

그래서 👍 ASAP 구현.

이것이 유효한 사용자 정의 속성 구문이라고 지적하려는 사람들에게 죄송합니다.

관련 : https://github.com/less/less.js/issues/2986

나는 이것을 버그와 기능 요청으로 표시하고있다. Less는 말할 것도없고 CSS 자체도 새로운 기능입니다.

사용자 지정 속성 구문 분석을 위해 Less 테스트에 추가 할 수있는 또 다른 테스트입니다. 이것은 오늘날 완벽하게 유효한 CSS입니다.

.test {
  --custom-function: () => { let x = 1; window['NAMESPACE'].doSomething(x); };
}

기본적으로 () [] 또는 {} 에 있으면 원하는 문자를 덤프 할 수 있습니다. 따라서 세미콜론은 위의 예에서 전달됩니다. 닫는 세미콜론을 테스트하기 전에 중괄호가 일치하고 닫힐 때까지 (열린 경우) 재귀 적 구문 분석이 필요합니다.

나는 여기서 그 일을 시작했지만 이것이 올바른지 아직 확실하지 않습니다. https://github.com/less/less.js/blob/edge/lib/less/parser/parser.js#L1326

_ 참고 : 위 줄을보고 혼란스러워하는 사람이 있는지 명확히하기 위해이 JavaScript는 아무 작업도 수행하지 않습니다. CSS는 길고 알려지지 않은 익명 값으로 간주합니다 ._

기본적으로 () [] 또는 {}에 무언가가 있으면 원하는 모든 문자를 덤프 할 수 있습니다.

음? 나를 위해 https://www.w3.org/TR/css-variables/#syntax 는 모든 토큰 (여기에 나열된 것을 제외하고)은 어디에나있을 수 있습니다 (두 종류의 괄호에 관계없이). 아니면 다른 단락에서 가정합니까? 어떤 문자에 대한 내용이나 괄호 안의 값에 대한 구체적인 내용을 알려주시겠습니까? (물론 url(...) 이 아니라면)?

즉, --var: ?; , --var: (?); 또는 --var: [¾]; 실제로 유효합니까?

이것은 내가 잘못 해석 할 수있는 관련 섹션입니다.

사용자 지정 속성에 허용되는 구문은 매우 관대합니다. <declaration-value> 프로덕션은 시퀀스에 <bad-string-token> , <bad-url-token> , 일치하지 않는 <)-token> , <]-token> 포함되지 않는 한 하나 이상의 토큰 시퀀스와 일치합니다 <bad-url-token> <]-token> , <}-token> , 또는 값이 "!"인 최상위 <semicolon-token> 토큰 또는 <delim-token> 토큰.

따라서 중요한 내용은 다음과 같습니다.

1. 최상위 세미콜론 토큰 만 중요합니다. "다른 일치 된 쌍 내에 있지 않다"는 의미로 해석합니까? 하지만 "최상위"가 무엇을 의미하는지 잘못 해석 할 수 있습니다.

2. 해당 페이지에 제공된 JS 예제가 오해의 소지가있을 수 있습니다. ( -foo: if(x > 5) this.width = 10; 는 유효합니다.) 그러나 공백이없는 = 확실히 일반적인 CSS 토큰이 아니며 this.width 도 아닙니다. 명확하지 않고 브라우저에서 허용되는 오류 복구가 얼마나 허용되는지를 고려할 때 파싱 오류를 가정 할 수 없다고 생각합니다. 우리는 @apply 구문이 사용자 정의 응용 프로그램이 있더라도 유효한 (규칙 집합과 함께) 유효하다는 것을 _ 이미 알고 있습니다 _. 따라서 사용자 지정 속성은 {} 내에서 여러 세미콜론을 허용한다는 것을 알고 있습니다. 따라서이 언어가 일치하는 () , [] , {} 내에서 허용되는 특성에 대해 암시하는 것은 논리적입니다. 여기서 우리가 알지 못하는 것이 많이 있으며, _what_이 사용자 정의 속성에 들어갈 수 있다는 것을 알지 못한 채 특정 구조를 따르는 한 ( "시퀀스가 <bad-string-token> , <bad-url-token> , 일치하지 않는 <)-token> , <]-token> 또는 <}-token> ")를 포함하고 해당 속성을 브라우저에 전달합니다. 여기서 의도는 성공적인 구문 분석을위한 최소한의 요구 사항을 만드는 동시에 개발자를위한 최대의 유연성을 만드는 것입니다.

따라서이 작업을 수행 할 수 없습니다.

.bar {
  --foo: {;
  --baz: ";
}

... 구문은 여러 세미콜론을 포함하여 무엇이든 넣을 수 있도록 허용하기를 원하지만 작업이 완료되면 알 수 있기를 원하기 때문입니다. 여기서 일치하는 따옴표 / 중괄호 / 괄호 / 괄호가 작동합니다. 어떤 식 으로든 구문을 "종료"했다고 표시 할 수있는 한, 여기서 의도는 해당 구문 내에서 원하는 것을 수행 할 수 있다는 것입니다.

이것에 관해서 :

--var :?;, --var : (?); 또는 --var : [¾]; 유효한?

모르겠어요.

유효한 것으로 취급해야합니까? IMO 예. 왜냐하면 우리는 알지 못하기 때문입니다. 그러나 우리는 큰 문제없이 성공적으로 파싱 할 수 있습니다.

가능한 구현에 관해서는 ... ; 까지 아무것도 허용하지 않는 것이 큰 문제는 아니지만 적어도 문자열, URL 및 중첩 된 {} ( ; 포함 할 수 있으므로)을 처리해야합니다. Less 코드가 없다는 것을 의미합니다.

한 단계 더 나아가서 (파싱 단계에서) 일종의 DR (외부 {} 제외)을 허용하고 더 많은 토큰을 허용하는 것으로 처리하는 것입니다. t --var: (1 > 2) / {whatever} foo; 와 같은 용도로 DR 파서를 재사용합니다.)

그리고 마지막으로 더 편리한 것을 위해 솔직히 아무것도 볼 수 없지만 Less 기능 (토큰과 그 평가)이 허용되는 완전한 기능을 갖춘 CSS 토큰을 작성하는 것 외에는 볼 수 없습니다. 다른 말로하면 biiiiiiiig 문제 :(

최상위 세미콜론 토큰 만 중요합니다. "다른 일치 된 쌍 내에 있지 않다"는 의미로 해석합니까? 하지만 "최상위"가 무엇을 의미하는지 잘못 해석 할 수 있습니다.

예, ; 종료에 관한 것입니다. 즉, --var: ";" url(;) {;}; 는 유효하고 --var: ; {} foo; --var: ";" url(;) {;}; 는 유효하지 않습니다 ( "최상위 수준"이되는 첫 번째 ; 는 문을 종료합니다).
하지만 (;) 에 대해서는 잘 모르겠습니다.

분명히 이것은 Less 코드가 없다는 것을 의미합니다.

내 유일한 생각은 사용자 정의 속성을 생성하려는 경우 보간 구문을 허용 할 수 있다는 것입니다. 하지만 아마도 그것은 일종의 "관심이 있다면 2 라운드"와 같은 아이디어 일 것입니다.

그래도 (;)에 대해서는 잘 모르겠습니다.

나도 아니야? 사양에는 종종 토큰 경로 다이어그램과 같은 구문 분석 세부 정보가 어딘가에 게시되어 있다고 생각하지만이 경우에 존재하는지 확실하지 않습니다. 1 단계로- {} , () , 따옴표 및 따옴표 만 일치시키고 최상위 ; 괜찮아 보일 때까지 익명 노드에 아무것도 덤핑하면됩니다. 일치하는 대괄호 [] 는 필요하지 않을 수 있지만 언급되어 있으며 다른 모든 부분이 있으면 상당히 사소합니다.

특별히 토큰화할 필요가 없다고 생각합니다. 또는 DR과 혼합 할 필요가 없습니다. 결국 누군가는 다음과 같이 끝날 수 있습니다.

.weird {
  --php: ($x = 5 /* + 15 */ + 5; echo $x;);
  --example: [My DR will be --this: { 
    blah: nope;
    --never mind i gave up;
    no wait here it --is: {
      lol: cats;
    }
  }];
}

즉, Less가 사용자 지정 속성의 내용을 다룰 때 손을 깨끗이 닦는 것이 더 낫습니다.

또한 Less 플러그인 작성자가 조각을 가져와 Less 파서를 통해 일치하는 사용자 지정 속성을 다시 전송하여 새 노드를 만드는 방문자 플러그인을 작성하는 것이 기술적으로 가능합니다. 우리가해야 할 일은 내용을 규칙 노드에 덤프하고 규칙을 사용자 지정 속성으로 표시 한 다음 출력을 충실하게 덤프하는 것뿐입니다.

위의 예를 수정하면 유효하지 않은 것으로 간주되어야합니다.

.weird {
  --example: [My DR will be --this: { 
    blah: nope;
    --never mind i gave up;
    no wait here it --is: {
      lol: cats;
   // missing matching }
  }];
}

"No Less 코드"

아마도 이것은 다운 그레이드를 의미합니다. 지금처럼 다음과 같이 작성할 수 있습니다.
--var: darken(red, 5%) + 1;
그리고 그것은 작동하지만 ( --fortran: read (*, *, iostat=ierr) radius, height; ) 작동하지 않습니다 :(

아마도 이것에 대한 옵션을 가질 수 있습니다 ( --oh-no-yet-another-option-for-custom-properties-to-be-parsed-one-way-or-another: on :)

아마도 이것은 다운 그레이드를 의미합니다-지금처럼 --var : darken (red, 5 %); 그리고 그것은 작동하지만 (--fortran을 위해 : read (*, *, iostat = ierr) radius, height;)하지 않습니다 :(

🤔 글쎄 ..... 네, 무슨 말인지 알 겠어요. 그래서 어떤 종류의 보간이 필요할 수도 있습니다. 우리는 기본적으로 파서에서 다음과 같이 처리 할 수 ​​있습니다.

<strong i="8">@iostat</strong>: ierr;
--fortran: read (*, *, iostat=@{iostat}) radius, height;

// treat similar to:
--fortran: ~"read (*, *, iostat=@{iostat}) radius, height";

(적절한 매칭 토큰에 대한 앞서 언급 한주의 사항이 있습니까?)

내 말은 .... 대안은 본질적으로 이스케이프 구문을 권장한다는 것입니다. 내부 CSS 코드를 적게 수정하는 것이 좋습니다.

예, 보간이 트릭을 수행합니다. 실험적 옵션으로 DR-ike 구문 분석에 여전히 좋을 것 같지만 (적어도 사용자 정의 속성 해킹이 널리 퍼질 때까지 많은 사람들이 가상 --javascript: 1 = 2; 보다 실제 --var: darken(red, 5%); 를 선호 할 것이라고 확신합니다. )

즉, 나는 두 가지 방법 (별도 또는 동시에)으로 괜찮습니다.

나는 이것에 대한 상당히 강력한 구현 / 솔루션을 가지고 있다고 생각합니다. 이 스레드의 여러 코드 예제를 테스트에 사용했습니다. 따라서 사용자 지정 속성 값과 알 수없는 at- 규칙은 보간을 허용하기 위해 본질적으로 이스케이프 된 따옴표 값으로 처리됩니다. # 3213을 확인하십시오.

결정된.