有没有办法类型检查 CSS 自定义属性（又名 CSS 变量）？

Question

我正在考虑用 CSS 自定义属性（例如

$someValue

）替换 SCSS 变量（即

var(--someValue)

），试图在主题和特定于上下文的覆盖形式上提供更多灵活性，并使浏览器中的开发工具更有用一些。最终，我可能想完全转储 SCSS 变量，以简化开发堆栈。

但是，我注意到与 SCSS 变量不同，CSS 自定义属性完全未经检查，并且拼写错误是一个问题。我曾以令人困惑的方式出现代码中断，因为设置 CSS 自定义属性或在表达式中使用它时出现拼写错误 - 毕竟，CSS 对于使用未设置或无效设置的 CSS 属性非常宽松。

由于 CSS 自定义属性目前并不完全是新的，我认为我能够找到一些 webpack 插件或其他解决方案来为 CSS 属性添加基本类型检查，但我似乎找不到任何。理想情况下，我希望要求以某种方式声明所有 CSS 自定义属性，包括其内容的类型（以确保例如变量始终用作无量纲、全量纲值、颜色等） ），但即使只是一个检测拼写错误的工具或技术也能捕获真正的错误。然而，我一直无法找到类似的东西，无论是作为构建工具，还是 SASS 插件。

在使用 CSS 自定义属性时，如何保护自己免受简单的疏忽，例如检测到设置为

--someValue: 13px

的属性从未使用过，或者相反，引用

var(--someValue)

似乎没有匹配的分配？

Answer 1

使用新的

@property

规则，你几乎可以得到你想要的，因为它允许定义变量的类型。

示例：

@property --primary-color {
  syntax: '<color>';
  inherits: false;
  initial-value: blue;
}

.box {
  --primary-color: red; /* this one is valid */
  background:var(--primary-color);
  height:100px;
}

.box-alt {
  --primary-color:10px; /* this one is invalid and will fall to the intial-value */
  background:var(--primary-color);
  border:var(--primary-color) solid green; /* it won't be used here even if contain pixel */
  height:100px;
}

<div class="box"></div>

<div class="box-alt"></div>

您需要在 Chrome 或 Edge 上运行上述内容（Firefox 还不支持）。正如你所看到的，这里不允许使用像素值，因为我们指定类型为

<color>

。

实际上开发工具不会向您显示任何内容，但这可能会在将来发生变化以获得一些警告。同时，您可以依赖当自定义属性未定义或定义为无效值时将使用的初始值。

Answer 2

另一种简单地允许所有变量的方法：

import * as react from 'react';

declare module 'react' {
  export interface CSSProperties extends Record<`--${string}`, any> {}

  export default react;
}