Emmet 样式表缩写解析器

给 Emmet 解析 样式表 缩写为AST. 解析分两步进行:先是将给定的缩写符号化(在编辑器中用于语法加亮),再将符号分析出并转换为AST节点作为平原,JSON-串行对象.

不同于 标记缩写,样式表缩写中的元素不能被嵌入并包含属性,而是允许在元素名称中嵌入值.

使用量

您可以通过 npm 安装 :

npm install @emmetio/css-abbreviation

然后把它添加到你的项目中:

import parse from '@emmetio/css-abbreviation';

const props = parse('p10+poa');
/* [{
    name: 'p',
    value: [{ type: 'CSSValue', value: [...] }],
    important: false
}, {
    name: 'poa',
    value: [],
    important: false
}] */

返回的结果是一系列 CSSProperty 项:带有名称和值的节点.

缩略语法

Emmet 样式表缩略语元素可能从名称开始,然后是数值,可选用链条 - 断取者. 在多数情况下,实际的CSS属性在名字中没有数字(或者至少没有在缩写快捷键中使用),所以在alpha字符被认为是 嵌入值,以及从 # 字符 : p10, (中文(简体) ), bg#fc0 包括: 如果无法识别隐含的名称/值边界,您应该使用 - 作为值分隔符 : m-a, (中文(简体) ), p10-20 包括:.

运算符

CSS 属性无法被嵌入, 唯一可用的操作员是 +。 。 。 .