Visual Studio 'Format Document' 中断 CSS 自定义属性

Question

我正尝试在 Visual Studio 中使用 Google Polymer。在设置组件样式时，我使用了 Polymer API 指南中指定的自定义属性：

<style is="custom-style">
    paper-toolbar {
        --paper-toolbar: {
            border: none;
        };
    }
</style>

这会在 visual studio 中生成以下警告：

Missing a property name before the colon (':') in the "(property) : (value)" declaration.

The block is unclosed, '}' expected.

Missing a selector in the style rule.

Expected a selector for the style rule.

Missing an opening brace ('{') after the selector in the style rule.

Unexpected character sequence.

此外，当尝试自动格式化文档时（Ctrl+K、Ctrl+D），Visual studio 插入分号导致无效 css:

paper-toolbar {
    --paper-toolbar:;

{
    border: none;
}

;
}

（注意 'paper-toolbar' 后的分号）。

我真的很想能够使用自动格式来快速修复同一组件中 html 的缩进，但是我不能，因为它会在 CSS 中插入杂散字符.有没有办法让 VS 理解这个 CSS，或者至少不插入不合适的分号？

我使用的是 VS 2017 RC，但是在 VS 2015 中的行为是相同的。

Answer 1

Visual Studio CSS 编辑器不期望属性值的块 ({})。 in CSS 无法使用您合法使用的值（出于同样的原因，它在 var() 中无效），但自定义属性的规范确实指定它们不限于被 CSS.

使用

老实说，这是对我们处理自定义属性的实施方式的疏忽。我已经提交了一个错误来跟踪这个问题。目前没有修复该行为的解决方法，因为格式化程序会根据它认为合适的方式积极修复标点符号。

（来源：我目前在 VS 中使用 CSS 编辑器。）

Visual Studio 'Format Document' 中断 CSS 自定义属性

Visual Studio 'Format Document' breaks CSS custom properties

polymer

visual-studio-2017