Less.js: Less未能解析有效的自定义属性值（例如：@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);类的尝试-否，较少的变量不是宏，不会随上下文而扩展，特别是对于未命名的规则集，唯一合适的语法是规则集主体中的@ruleset()和_not_作为属性值。

好吧，我同意您的观点，通常不应该支持非标准语法。

但是，这意味着LESS在许多情况下与Polymer不兼容。

无论如何，谢谢您的答复。 ：+1：

不知道这是否会影响您的决定@ seven-phases-max，但是有一个针对@apply规则的开放规范， http：//tabatkins.github.io/specs/css-apply-rule/ #issue -882293bd。

另请参阅https://github.com/Polymer/polymer/issues/1373 ，因为听起来Google会真正推动这一进程。

SASS似乎正在解决此问题https://github.com/sass/sass/issues/1128

@ donny-dont注意，我没有决定任何事情（我没有完成提案）-我只是批评者。

好吧，Tab Atkins生成了_tens_的CSS标准提案（命名为“想法”），尽管Google家伙甚至可能在明天将其推送到他们的浏览器中，但这离CSS草案还差得远（记住CSS vars进入CSS世界大约十年了？）。

@ seven-phases-max表示歉意。 我只是想说明一下，Polymer正在推动mixin提案，而Chrome可能会在其成形后立即实施，这是@Jamtis并未真正传达的内容。

我对使用LESS相当陌生，在这种情况下，解析器是否有任何种类的插件系统？ 可以打开和关闭类似实验性标志的东西吗？

我正在重新打开它，以便能够在此处重定向重复的请求。

/子

我们有一个规范。 存在polyfill； Chrome已实现它； Polymer已在1.0版本中使用它； 并且网站已经在使用Polymer。

我认为，对Less完全支持最低限度的语法是完全合理的期望。

较少的已通过@apply ， --foo: bar;和var(--foo)通过。 唯一缺少的是让Less穿过{ ... }中的--foo: { property: value; } ，而其他css块具有相同的基本处理； 而不是硬停下来并引发解析错误。

我认为CSS变量的完整规范应由LESS支持。 希望发生这种情况！

@丹特曼

我们有一个规范。 存在polyfill； Chrome已实现它； Polymer已在1.0版本中使用它； 并且网站已经在使用Polymer。

对我来说，这仍然不是一个非常令人信服的理由。 转换为：Google，Google和Google正在使用此功能。 在其他任何地方都没有兴趣出现，也没有迹象表明会有。

@ donny-dont

我对使用LESS相当陌生，在这种情况下，解析器是否有任何种类的插件系统？ 可以打开和关闭类似实验性标志的东西吗？

有一个插件系统，但不直接支持更改解析。 因此，这不是一件容易的事。

@丹特曼
我们有一个规范。 存在polyfill； 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变​​量支持的最低浏览器版本

• 铬49
• 适用于Android的Chrome 51
• Android浏览器51
• 适用于Android的Firefox 47
• Firefox 31
• 的Safari 9.1
• iOS Safari 9.3
• 歌剧36
• Opera Mobile 37

如果没有polyfill，这大约相当于全球浏览器使用率的65％。

随着多个CSS Variable Polyfills的出现，浏览器实现了它，而大型浏览器提供商也开始推动它。 似乎这将是一个有价值的功能。

官方规格： https ：

@stramel与此问题无关。 Less中已经支持CSS变量。 该请求大约是@apply ，这不是该规范的一部分。

编辑：并非所有CSS自定义属性值都受支持，请参见下文。

@马修院长对不起，我误会了。 无论如何，：+1：对于CSS Mixins /自定义属性集

@ matthew-dean减少支持的标准是什么？ 如果要实现另一个浏览器，那又好吗？

@ donny-dont由于Less是一个社区项目，因此没有特定的栏。 但是，是的，除单个浏览器外的其他功能会使它成为更通用的功能。

就像有人在搜索此文件一样（就像我一样）：您可以将所有Polymer非标准CSS放在单独的文件中，并使用inline关键字将其导入到less文件中。 较少的文件必须在较少的变量和聚合物自定义属性之间建立接口。 但是，无论如何，这就是Polymer想要的方式。 同意您不能实施与标准的所有偏差。

只是为了重新审视这个问题，我认为我对问题的范围有一个狭窄的看法。

也就是说：是的， @apply只是一个建议，但请注意，_this_不是无效的CSS。 不再。

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

我的错误以为@apply提议对Custom Property语法进行扩展，但事实并非如此。 上面的_IS_是有效的自定义属性值，因此，应将其添加到Less支持中。 我希望我花了一些时间来深入研究规范。 （此处：https：//www.w3.org/TR/css-variables/#syntax。）

Less的核心目标是支持有效的CSS，到目前为止，自定义属性语法已在所有浏览器中完全实现。 该规范是非常宽松的，并且可能需要对属性值的解析方式进行一些较大的更改。 您可以将几乎所有内容放入其中。 我不确定使用值会变得多么疯狂，以及浏览器是否会允许这样做。 但是，按照我阅读规范的方式，只要格式正确，几乎所有内容都是有效的。 意思是，直到遇到“顶级”分号为止，您可以发疯，用花括号或括号将各种内容包装起来。

这意味着像Polymer之类的JavaScript库越来越有可能“入侵” CSS以将声明性属性/值放置在JS可读的位置，而在此CSS功能之前，这实际上是不可能的。

因此👍要尽快实施。

抱歉，那些试图指出这是有效的自定义属性语法的人。

相关： https :

我将其标记为bug和功能请求，因为a）较少要求解析自定义属性值，但有时会失败（但不清楚何时），但是b）较少需要处理的值类型超出了原始设计甚至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>或<}-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：[¾]; 有效的？

我不知道。

我们应该将它们视为有效吗？ 海事组织是的。 因为我们不知道/不知道，但是我们_can_可以成功解析它而没有太多麻烦。

至于可能的实现...在;之前允许存在任何问题不是什么大问题，但是我们仍然应该至少处理字符串，URL和嵌套的{} （因为它们可能包含;内部）。 显然，这将意味着其中不存在任何更少的代码。

进一步的步骤是（在解析阶段）将其视为一种DR（不包含其外部{} ），并且只允许更多的令牌（尽管这看起来像是一条死路，因为您可以这样做）不能将DR分析器重用于--var: (1 > 2) / {whatever} foo; ）

最后，为了方便起见，我只好写了一个功能齐全的CSS令牌，其中包含一些Less功能（令牌，然后对其进行了评估），因此我看不到任何东西。biiiiiiiig问题换句话说：（

仅顶级分号是重要的。 我将其解释为“不在其他匹配对中”吗？ 但是我可能会误解“顶级”的含义。

是的，我很确定这与终止; 。 即，例如： --var: ";" url(;) {;};有效，而--var: ; {} foo;无效（第一个;是“ top-level”会终止该语句）。
我不确定只是(;) 。

显然，这将意味着其中没有更少的代码。

我唯一的想法是，如果您想生成自定义属性，我们可以允许插值语法。 但这也许是“如果感兴趣的话，进行第二回合”的想法。

我不确定只是（;）。

我也不是？ 我相信规范通常会在某处发布解析细节（例如令牌路径图），但是我不确定在这种情况下是否存在。 在第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：读取（*，*，iostat = ierr）半径，高度;），它将不会:(

🤔好.....是的，我明白你的意思了，这就是为什么可能需要某种插值的原因？ 我们基本上可以在解析器中处理类似于以下内容的事情：

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

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

（前面提到了适当匹配令牌的注意事项？）

我的意思是...。替代方法是，我们本质上建议转义语法。 只需对CSS代码进行较少的修改即可。

是的，插值可以解决问题。 尽管将DR-ike解析为实验选项还是不错的（我敢肯定，至少在这样的自定义属性被广泛使用之前，很多人更喜欢真实的--var: darken(red, 5%);而不是虚构的--javascript: 1 = 2; ： ）

换句话说，我对两种方式都可以（单独或同时使用）。

我认为我对此有一个相当强大的实现/解决方案。 我在测试中使用了该线程中的许多代码示例。 因此，自定义属性值和未知规则实际上被视为转义引用值以允许插值。 退房＃3213。

固定的。