字符串生成器

字符串生成器

样式生成器是一个很好的字符串生成器的例子。它生成包含CSS组件的HTML。对于这个用例，解析器是不必要的，所以此时语法包应该只包含一个字符串生成器。

字符串生成器API比解析器API要复杂一点.PostCSS生成一个源映射，所以一个字符串生成器不能只返回一个字符串。它必须链接每个子串与其源节点。

字符串生成器是一个函数，接收它节点构建状语从句：回调函数作为参数。然后它将节点字符串和节点实例作为参数调用构建回调函数。Root

module.exports = function（root，builder）{
    // Some magic一些魔法
    var string = decl.prop + ':' + decl.value + ';';
    builder(string, decl
    // Some science
};

主要原理

PostCSS 默认字符串只是一个类，它有一个方法来处理每种节点类型，并且拥有很多方法来检测原始属性。

在大多数情况下，只要扩展这个类就足够了，就像在SCSS stringifier中一样。

构建函数

函数构建将作为第二个参数传递给stringify函数。例如，默认的PostCSS生成字符串类器将其保存到this.builder属性。

构建函数接收输出子字符串和源节点，并将此子字符串追加到最后的输出。

一些节点在中间包含其他节点。例如，规则一个以{开始，里面包含很多声明的时候，以然后}结束。

对于这些情况，您应该传递第三个参数给构建函数：'start'或者'end'字符串：

this.builder（rule.selector +'{'，rule，'start'）;
//Stringify declarations inside 将内部的声明字符串化
this.builder（'}'，rule，'end'）;

原始值

一个好的PostCSS自定义语法会保存所有的符号，如果没有变化的话，它会提供字节到字节的幂等输出。

也。这就是为什么每个节点都有node.raws对象来存储空间符号等等。

不过要小心，因为有时这些原始属性不会出现;一些节点可能是由手动建立的，或者在移动时到另一个父节点时可能会失去缩进。

也。这就是为什么默认的字符串生成器拥有一个raw()方法来自动检测其他节点的原始属性。例如，它会查看其他节点来检测缩进大小，并将其与当前节点深度相乘。

测试

一个字符串生成器也必须有测试。

你可以使用PostCSS Parser Tests中的单元和集成测试用例，只需要比较输入的CSS和经过解析器和字符串生成器处理后的CSS。