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

また、 https：//github.com/Polymer/polymer/issues/1373も参照して

そしてSASSはこのhttps://github.com/sass/sass/issues/1128に対処しているようです

@ donny-dont注私は何も決定しません（私は提案を閉じませんでした）-私はただの批評家です。

ええと、タブアトキンスはCSS標準提案（「アイデア」と名付けられた）を数十個生成しました。Googleの人たちはこれを明日でもブラウザにプッシュするかもしれませんが、これはまだCSSドラフトのものになるにはほど遠いです（CSS varsはないことを覚えておいてください） CSSの世界に約10年間入りますか？）。

@ seven-phases-その影響について最大の謝罪。 ポリマーがミックスインの提案を推進しており、 @ Jamtisが実際には伝えていなかった形になったら、Chromeがそれを実装する可能性が高いことをメモしたいと思います。

私はLESSの使用にかなり慣れていませんが、この種のシナリオでパーサー用のプラグインシステムはありますか？ オンとオフを切り替えることができる実験的な旗のようなものですか？

ここで重複するリクエストをリダイレクトできるように、これを再度開きます。

/サブ

これには仕様があります。 ポリフィルが存在します。 Chromeはそれを実装しています。 Polymerはすでに1.0リリースでそれを使用しています。 そしてウェブサイトはすでにPolymerを使用しています。

Lessが最低限のレベルで構文をサポートすることは、完全に合理的な期待だと思います。

Lessはすでに@apply 、 --foo: bar; 、およびvar(--foo)を通過しています。 足りないのは、他のcssブロックに与えられたのと同じ基本的な処理で--foo: { property: value; }の{ ... }を通過するLessを取得することだけです。 ハードストップして解析エラーをスローする代わりに。

CSS変数の完全な仕様はLESSでサポートされるべきだと思います。 これが起こることを望みます！

@dantman

これには仕様があります。 ポリフィルが存在します。 Chromeはそれを実装しています。 Polymerはすでに1.0リリースでそれを使用しています。 そしてウェブサイトはすでにPolymerを使用しています。

私にとって、それはまだあまり説得力のある理由ではありません。 つまり、Google、Google、およびGoogleがこれを使用しています。 他のどこにも関心がポップアップすることはなく、今後もそうなる兆候はありません。

@ donny-いけない

私はLESSの使用にかなり慣れていませんが、この種のシナリオでパーサー用のプラグインシステムはありますか？ オンとオフを切り替えることができる実験的な旗のようなものですか？

プラグインシステムはありますが、解析の変更を直接サポートしていません。 ですから、それは簡単なことではありません。

@dantman
これには仕様があります。 ポリフィルが存在します。 Chromeはそれを実装しています。 Polymerはすでに1.0リリースでそれを使用しています。 そしてウェブサイトはすでにPolymerを使用しています。

私にとって、それはまだあまり説得力のある理由ではありません。 つまり、Google、Google、およびGoogleがこれを使用しています。 他のどこにも関心がポップアップすることはなく、今後もそうなる兆候はありません。

この結論は、通常のcssから大幅に逸脱した、より独自仕様でサポートされていない構文について話している場合に意味があります。 しかし、Lessがすでにネストを理解していて、問題の構文がCSSのブラケットマッチングベースの解析ルールに完全に適合し、周囲のcssを壊さず、他の主要なCSSプリプロセッサとポストプロセッサのいずれかが機能している場合に、Lessが解析エラーを生成しないことについて話します。それをサポートするか、すでに機能しています。

この結論は、通常のcssから大幅に逸脱した、より独自仕様でサポートされていない構文について話している場合に意味があります。 しかし、Lessがすでにネストを理解していて、問題の構文がCSSのブラケットマッチングベースの解析ルールに完全に適合し、周囲のcssを壊さず、他の主要なCSSプリプロセッサとポストプロセッサのいずれかが機能している場合に、Lessが解析エラーを生成しないことについて話します。それをサポートするか、すでに機能しています。

無関係ではありません。 これは、Lessの分離されたルールセットと非常によく似ています。 そして、Lessに追加された他の「パススルー」のものの前例があります。 だから私は必ずしもそれに反対しているわけではありません。 現時点でPolymerを超える価値があるかどうかについては、懐疑的です。

CSS変数の公式サポートはここにリストされています： http ：

デフォルトのCSS変数サポートの最小ブラウザバージョン

• Chrome 49
• Chrome for Android 51
• Androidブラウザ51
• Android47用Firefox
• Firefox 31
• Safari 9.1
• iOS Safari 9.3
• Opera 36
• Opera Mobile 37

ポリフィルがない場合、これはおよそ65％のグローバルブラウザ使用量に相当します。

複数のCSS可変ポリフィルがあり、それを実装しているブラウザーと大規模なブラウザープロバイダーがそれを推進しています。 これは持っている価値のある機能のようです。

公式仕様： https ：

@stramelそれはこの問題とは何の関係もありません。 CSS変数はすでにLessでサポートされています。 リクエストは約@apply 、これはその仕様の一部ではありません。

編集：すべてのCSSカスタムプロパティ値がサポートされているわけではありません。以下を参照してください。

@ matthew-dean申し訳ありませんが、誤解しました。 とにかく、：+ 1：CSSミックスイン/カスタムプロパティセットの場合

@ matthew-deanサポートを減らすための基準は何ですか？ 別のブラウザが実装されている場合は、問題ありませんか？

@ donny-dont Lessはコミュニティプロジェクトであるため、特定のバーはありません。 しかし、はい、単一のブラウザを超えた何かがそれをより汎用的な機能にするでしょう。

誰かがこれを検索している場合（私が行ったように）：すべてのPolymer非標準cssを別のファイルに入れ、inlineキーワードを使用してlessファイルにインポートできます。 lessファイルは、less変数とポリマーカスタムプロパティの間でインターフェースする必要があります。 しかし、とにかく、それはポリマーがそれを望んでいる方法です。 標準からのすべての逸脱を実装できるわけではないことに同意します。

これを再考するために、残念ながら私は問題の範囲について狭い視野を持っていたと思います。

つまり、はい、 @applyは単なる提案ですが、関係なく、これは無効な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機能の前には実際には不可能でした。

だから👍できるだけ早く実装する。

これが有効なカスタムプロパティ構文であることを指摘しようとした人には申し訳ありません。

関連： https ：

これをバグと機能リクエストの両方としてマークしているのは、a）カスタムプロパティ値を解析するクレームが少ないが、失敗することがある（ただし、いつかは明確ではない）が、b）処理する必要のない値のタイプが元の設計を超えているためです。 CSS自体でさえ、Lessは言うまでもなく、新しい機能です。

カスタムプロパティ解析の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>が含まれていない限り、1つ以上のトークンの任意のシーケンスに一致します。 <}-token> 、または「！」の値を持つトップレベルの<semicolon-token>トークンまたは<delim-token>トークン。

したがって、重要なポイントは次のとおりです。

1. トップレベルのセミコロントークンのみが重要です。 私はそれを「他のマッチしたペアの中にない」という意味だと解釈しますか？ しかし、私は「トップレベル」の意味を誤解している可能性があります。

2. そのページに示されているJSの例は誤解を招く可能性があります（ -foo: if(x > 5) this.width = 10;は有効です）。しかし、スペースのない=確かに典型的なCSSトークンではなく、 this.widthでもありません。 明確にすることなく、またブラウザでのエラー回復の許容度を考えると、解析エラーを想定することはできないと思います。 カスタムアプリケーションがある場合でも、 @apply構文が（一連のルールを使用して）有効であることは_すでにわかっています_。 したがって、カスタムプロパティでは、 {}内で複数のセミコロンを使用できます。 したがって、この言語が一致する() 、 [] 、 {}内の許容的な性質について何かを暗示していることは論理的です。 ここではわからないことがたくさんあります。カスタムプロパティに何が入るかを知らなくても、特定の構造に従っている限り、何でも入ることができると想定する必要があると思います（「シーケンスがそうでない限り」 <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トークンを書く以外に何もありません。

トップレベルのセミコロントークンのみが重要です。 私はそれを「他のマッチしたペアの中にない」という意味だと解釈しますか？ しかし、私は「トップレベル」の意味を誤解している可能性があります。

はい、 ;終了についてだと確信しています。 つまり、次のようになります。 --var: ";" url(;) {;};は有効で、 --var: ; {} foo;は無効です（「トップレベル」である最初の;はステートメントを終了します）。
(;)だけではわかりませんが。

明らかに、これは内部に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 }
  }];
}

「ノーレスコード」

おそらく、しかしこれはダウングレードを意味します-今のように次のように書くことができます：
--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-rulesは、補間を可能にするために、基本的にエスケープされた引用符で囲まれた値として扱われます。 ＃3213をチェックしてください。

修繕。