JavaScript中css`xxx`语法是否合法？库如何底层处理该类语法？

问题解答 #

1. 该语法是否是JavaScript原生支持的合法语法？ #

是。这种写法是ES2015（ES6）标准中正式引入的「标签模板字面量（Tagged Templates）」特性，完全属于JavaScript原生合法语法，并非第三方库自定义的非标准语法。
你看到的css本质上就是库对外暴露的一个普通JavaScript函数，这种写法只是函数调用的一种特殊语法糖，等价于手动把模板字符串拆分后传入css函数。

2. 底层处理逻辑 #

当JS引擎执行标签模板语法时，会自动把模板字符串的内容拆分为两部分参数传入标签函数：

• 第一个参数是数组，存储所有被插值表达式分割的静态字符串片段
• 后续参数按顺序对应每个插值表达式的运行时计算结果
  举个简单的示例：

const color = 'red';
const width = 100;
const style = css`
  color: ${color};
  width: ${width}px;
`
// 上述写法等价于手动调用函数
const style = css(["\n  color: ", ";\n  width: ", "px;\n"], color, width)

各类使用该语法的CSS-in-JS库，底层处理流程一般如下：

• 接收拆分后的静态字符串和插值参数，拼接为完整的CSS样式字符串
• 对样式进行预处理：比如自动补全浏览器前缀、语法校验、压缩冗余内容
• 根据库的设计逻辑做后续处理：
  • 运行时方案：生成唯一类名，把样式插入到页面的动态<style>标签中，最终返回类名字符串供开发者绑定到DOM元素
  • 静态提取方案：在构建编译阶段就把这些样式抽取出来，生成单独的CSS文件，运行时直接返回对应的类名，没有额外运行时开销
    你给出的代码片段就是典型的CSS-in-JS库用法，最终button变量拿到的一般是可以直接用在DOMclass属性上的类名字符串。

内容的提问来源于stack exchange，提问作者Abhishek Prakash