编程语言编译器语言运行时【免费下载链接】imba The friendly full-stack language项目地址https://gitcode.com/gh_mirrors/im/imba点击查看免费下载CSS 值定义语法CSS value definition syntax是描述 CSS 属性“合法取值”的正式文法。在 Imba 仓库中apps/imba.io/scripts/mdn-data/css/syntaxes.json收录了 MDN 数据集中数百条这样的语法定义它们与属性定义、类型定义相互引用共同构成了 Imba 样式系统自动生成类型声明styles.generated.d.ts的数据底座。读完本文你将掌握 syntaxes.json 的数据结构、schema 约束、语法条目之间与类型条目之间的引用关系以及 Imba 的 CSS 正式语法解析器是如何消费这些定义、将其转化为编辑器智能提示与类型检查能力的。syntaxes.json 在 MDN CSS 数据目录中的位置与作用在apps/imba.io/scripts/mdn-data/css/目录下CSS 数据被拆分为六类分别对应六个 JSON 数据文件、对应的 schema 文件与说明文档数据类别数据文件结构约束规则at-rulesat-rules.jsonat-rules.schema.json属性propertiesproperties.jsonproperties.schema.json选择器selectorsselectors.jsonselectors.schema.json语法syntaxessyntaxes.jsonsyntaxes.schema.json类型typestypes.jsontypes.schema.json单位unitsunits.jsonunits.schema.json这些数据通过 index.js 统一汇总导出module.exports { atRules: require(./at-rules), selectors: require(./selectors), types: require(./types), properties: require(./properties), syntaxes: require(./syntaxes), units: require(./units), }properties.json负责给每个 CSS 属性声明其正式语法而syntaxes.json负责把语法中出现的抽象片段如attachment、alpha-value拆成可复用的定义。二者配合才能把“属性允许哪些值”完整描述出来。schema 约束每个条目都必须是一个 syntax 字符串syntaxes.schema.json 给出了语法条目的结构约束整个文件是一个对象每个键对应一个语法名每个值都是一个对象且必须且只能包含一个名为syntax的字符串字段{ type: object, additionalProperties: { type: object, additionalProperties: false, required: [ syntax ], properties: { syntax: { type: string } } } }也就是说syntaxes.json中不存在任何元数据字段如描述、浏览器兼容性它是一份纯粹“语法即数据”的字典键名即被引用名键值即正式语法表达式。基本单元关键字与|分隔的取值集合syntaxes.json中最常见的定义是由竖线|分隔的关键字集合。原文档以background-attachment属性为例属性定义引用attachment语法而attachment在 syntaxes.json 中被定义为三个关键字之一properties.json中的定义background-attachment: { syntax: attachment# }syntaxes.json中的定义attachment: { syntax: scroll | fixed | local }这里出现了两个值得注意的细节attachment与attachment的对应关系语法中的attachment尖括号包裹表示“引用名为 attachment 的语法条目”去掉尖括号即是 syntaxes.json 中的键名#是重复修饰符attachment#表示该语法可以出现一次或多次且多个取值之间以逗号分隔参见 parser.js 中multiplier[#]的实现它把数量区间设为[1, 20]并指定分隔符为,。类似的关键字集合定义在数据文件中大量存在例如absolute-size: { syntax: xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large }|在正式文法中表示“多选一”exactly one of them must occur这是 CSS 值定义语法中最基础的组合子。引用 CSS 类型从语法到类型数据语法并不局限于关键字还可以引用 CSS 基础数据类型。原文档给出的alpha-value示例alpha-value: { syntax: number | percentage }这里的number与percentage是 CSS 类型types条目定义在 types.json 中。于是alpha-value表达的含义是该取值要么是一个 number 类型要么是一个 percentage 类型——例如opacity: 0.5与opacity: 50%都合法。在 Imba 的解析器实现中number、percentage这类基础类型并非只依赖 JSON 数据而是由 css-syntax-parser/index.js 中的reference对象用正则表达式直接落地例如number: CSSFormalSyntaxParser.generateRegExpType(/^[-]?([0-9]*\.[0-9]|[0-9])(e[-]?[0-9])?$/, 1), percentage: CSSFormalSyntaxParser.generateRegExpListType(/^[|-]?([0-9]*\.[0-9]|[0-9])(e[-]?[0-9])?%$/i, /^[|-]?(?:[0-9]*\.[0-9]|[0-9])(e[-]?[0-9])?$/i, 1%, [%]),其中generateRegExpType生成“正则校验 默认值”的数据类型generateRegExpListType额外附带单位列表用于生成补全建议。从源码结构看这保证了number的浮点与科学计数法写法、percentage的%后缀都能被精确校验。语法条目之间的相互引用syntaxes.json不只是“叶子定义”语法条目之间可以层层引用、互相组合。原文档给出了length-percentage被shape-radius复用的例子length-percentage: { syntax: length | percentage }, shape-radius: { syntax: length-percentage | closest-side | farthest-side }展开后shape-radius的合法取值等价于length | percentage | closest-side | farthest-side。这种“组合式”定义避免了在多个属性语法中重复书写同一段表达式也让clip-path、shape-outside等属性见 css-syntax-parser/index.js 中clip-path: clip-source | [ basic-shape || geometry-box ] | none的属性引用表共享同一套几何半径规则。引用解析在解析器中由combinator[]的prepare方法完成遇到xxx时先在basicDataType基础类型中查找找不到再到property属性引用中查找找到的是字符串则递归解析其语法是正则则构造组件检查器并在递归解析成功后回写缓存见 parser.js 中Undefined import的错误处理与结果缓存逻辑。更复杂的文法组合子、分组与数量修饰符原文档明确指出CSS 语法可以比“用|分隔的关键字”复杂得多。从 parser.js 的combinator定义可以看到解析器完整支持 CSS 值定义语法中的全部组合子并按优先级排序组合子含义优先级空格并列所有组件必须按顺序出现4全部组件都必须出现但顺序任意3||至少一个组件出现顺序任意2\|多选一恰好一个出现1[...]分组0...引用其他语法/类型0以及multiplier中的数量修饰符*020 次、120 次、?01 次、{m,n}指定次数区间支持∞、#逗号分隔的重复可写作#{2,}等。这些原语组合在一起就能表达真实世界里复杂属性的完整语法。例如数据文件中的网格轨道与渐变定义auto-repeat: { syntax: repeat( [ auto-fill | auto-fit ] , [ line-names? fixed-size ] line-names? ) }, auto-track-list: { syntax: [ line-names? [ fixed-size | fixed-repeat ] ]* line-names? auto-repeat [ line-names? [ fixed-size | fixed-repeat ] ]* line-names? }以及背景层定义bg-layer: { syntax: bg-image || bg-position [ / bg-size ]? || repeat-style || attachment || box || box }bg-layer恰好演示了||的语义背景各组成部分可以任意顺序出现只要全部或按?修饰部分可选覆盖即可。解析器对/||采用回溯式搜索process中通过复制stringObjt、记录cantFound集合来尝试不同排列组合从实现层面印证了“顺序任意”的文法语义。在 Imba 中的实际应用从 syntaxes.json 到类型声明syntaxes.json并非孤立的数据文件它直接服务于 Imba 样式系统的类型生成流程。generate-typings.imba 是这一流程的核心脚本其关键步骤是导入css-data.json由 mdn-data 数据加工而来以及css-syntax-parser导出的parser与propertyReference对每个属性用parser.prototype.parseSyntax(format)解析其正式语法得到语法树的组件数量上限maxlen据此决定生成set(...)方法签名需要的参数个数let len Math.min(item.type..maxlen or 1, 4) let nr 1 while nr len sign , arg{nr}: any将属性名中的连字符转换为合法标识符str.replace(/\-/g,Ξ)为每个属性生成一个interface xxx extends _类型声明结合主题StyleTheme、theme.variants把调色板、字号、阴影、圆角、缓动曲线等变体值也生成为可补全的枚举类型最终写入typings/styles.generated.d.ts。这一整条链路JSON 数据 → 正式语法解析 → d.ts 生成意味着syntaxes.json 中任何语法条目的增删都会直接影响 Imba 编辑器里样式属性的补全候选与参数提示。可以推断这就是 Imba 能把 CSS 书写体验做到“接近类型安全”的机制之一——样式属性的合法值并非手写硬编码而是从 MDN 数据集自动推导的。小结syntaxes.json是 MDN CSS 数据集中“语法的字典”它以syntax字符串承载 CSS 值定义语法通过尖括号引用、组合子、数量修饰符把关键字、基础类型与复合语法串联成一张可递归展开的网。在 Imba 仓库中这张网经由 css-syntax-parser 的正式语法解析器落地为可校验、可补全的类型声明成为 Imba 全栈样式系统中“CSS 即类型”能力的数据基石。想继续深入可以阅读 syntaxes.json 查看完整的语法条目对照 syntaxes.schema.json 理解其结构约束再结合 parser.js 追踪组合子与乘数在解析阶段的处理细节。赞分享编程语言编译器语言运行时【免费下载链接】imba The friendly full-stack language项目地址https://gitcode.com/gh_mirrors/im/imba点击查看免费下载相关推荐Imba 项目中的 CSS At-rules 数据规范MDN 数据结构的解析与实战指南Imba 项目中的 CSS At rules 数据规范MDN 数据结构的解析与实战指南 CSS at rule以 开头的规则是样式表中控制浏览器行为的编程语言编译器语言运行时5步轻松让旧款Mac焕发新生OpenCore Legacy Patcher实战指南5步轻松让旧款Mac焕发新生OpenCore Legacy Patcher实战指南 你是否有一台闲置多年的Intel Mac看着它性能依旧却无法体验最新的m操作系统固件驱动开发Imba 文档站 CSS 数据类型清单mdn-data/css/types 的 JSON 结构与校验规范解析Imba 文档站 CSS 数据类型清单mdn data/css/types 的 JSON 结构与校验规范解析 本指南聚焦 imba 仓库 apps/imba.编程语言编译器语言运行时上一篇dynamic-datasource异步任务数据源隔离级别配置终极指南下一篇EventSource Polyfill打破浏览器壁垒实现跨平台实时通信的统一方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考