How to use the postcss.decl function in postcss

image = lodash.find(images, { url: url });

				if (image) {
					// We remove these declarations since
					// our plugin will insert them when
					// they are necessary.
					rule.walkDecls(/^background-(repeat|size|position)$/, function(decl) {
						decl.remove();
					});

					if (decl.prop === BACKGROUND) {
						color = getColor(decl);

						// Extract color to background-color propery
						if (color && color.length === 1) {
							declaration = postcss.decl({
								prop: 'background-color',
								value: color[0]
							});
							declaration.raws.before = ' ';

							rule.append(declaration);
						}
					}

					if (decl.prop === BACKGROUND || decl.prop === BACKGROUND_IMAGE) {
						image.token = postcss.comment({
							text: image.url,
						});

						image.token.raws.before = ' ';
						image.token.raws.left   = '@replace|';

formatHint = getFormatHint(defaultOptions.formatHints, format);
            source = getMethod('url', url) + ' ' + getMethod('format', formatHint);
            sources.push(source);
        }
    });

    // if the sources array is filled
    if (sources.length) {
        // create a font face rule
        var fontFaceRule = postcss.atRule({
            name: 'font-face'
        });

        // append a font-family declaration
        fontFaceRule.append(
            postcss.decl({
                prop: 'font-family',
                value: getSafelyQuoted(family)
            })
        );

        // append a font-style declaration
        fontFaceRule.append(
            postcss.decl({
                prop: 'font-style',
                value: options.style
            })
        );

        // append a font-weight declaration
        fontFaceRule.append(
            postcss.decl({

function rule(parent, item, cls, opt) {
    let [_rule, selectors, properties] = item;
    if(opt.additional_class) {
        selectors = selectors.map(sel =>
            sel.replace(/^([a-zA-Z0-9-]*)/, '$1' + cls))
    }
    let rule = postcss.rule({'selector': selectors.join(', ')})
    for(var line of properties) {
        switch(line[0]) {
            case 'property': {
                let [_property, prop, value] = line;
                rule.push(postcss.decl({prop, value}))
                break;
            }
        }
    }
    parent.push(rule)
}

rule.decls.forEach(decl => {
      newRule.append(postcss.decl({
        prop: decl.prop,
        value: decl.value
      }))
    });

inline: inlineBackground,
					postcssResult: result,
					postcssRule: rule,
					image: backgroundImage,
					newImage: newImage,
					size: backgroundSize,
				});

				newSelectors = rule.selectors.map(function(selector) {
					return fallbackSelector + ' ' + selector;
				});

				newRule = postcss.rule({ selectors: newSelectors });
				newRule.source = rule.source;

				newDecl = postcss.decl({
					prop: 'background-image',
					value: 'url(' + newImage + ')',
				});
				newDecl.source = matchedBackgroundImageDecl.source;

				newRule.append(newDecl);
				rule.parent.insertAfter(rule, newRule);
			}
		});

rule.decls.forEach(decl => {
      newRule.append(postcss.decl({
        prop: decl.prop,
        value: decl.value
      }))
    });

function handleImportedCSSMixin(
    transformer: StylableTransformer,
    mix: RefedMixin,
    rule: postcss.Rule,
    meta: StylableMeta,
    path: string[],
    variableOverride: Record,
    cssVarsMapping: Record
) {
    let resolvedClass = transformer.resolver.resolve(mix.ref) as CSSResolve;
    const roots = [];

    while (resolvedClass && resolvedClass.symbol && resolvedClass._kind === 'css') {
        const mixinDecl = getMixinDeclaration(rule) || postcss.decl();
        roots.push(
            createMixinRootFromCSSResolve(
                transformer,
                mix,
                meta,
                resolvedClass,
                path,
                mixinDecl,
                variableOverride,
                cssVarsMapping
            )
        );
        if (
            (resolvedClass.symbol._kind === 'class' || resolvedClass.symbol._kind === 'element') &&
            !resolvedClass.symbol[valueMapping.extends]
        ) {

css.eachRule(function(rule) {
      var decl = postcss.decl({
        prop: 'box-sizing',
        value: 'border-box'
      });
      rule.prepend(decl);
    });
  };

const sizeY = spriteHeight / ratio;

	const backgroundImageDecl = postcss.decl({
		prop: 'background-image',
		value: `url(${spriteUrl})`
	});

	const backgroundPositionDecl = postcss.decl({
		prop: 'background-position',
		value: `${posX}px ${posY}px`
	});

	rule.insertAfter(token, backgroundImageDecl);
	rule.insertAfter(backgroundImageDecl, backgroundPositionDecl);

	const backgroundSizeDecl = postcss.decl({
		prop: 'background-size',
		value: `${sizeX}px ${sizeY}px`
	});

	rule.insertAfter(backgroundPositionDecl, backgroundSizeDecl);
}

duplicatedProps.forEach((duplicatedProp) => {
                for (let i = 0; i < duplicatedProp.length - 1; i++) {
                    const newRule = postcss.rule({ selector: rule.selector });

                    const position = duplicatedProp[i];
                    const decl = rule.nodes[position];
                    newRule.append(
                        postcss.decl({ prop: decl.prop, value: decl.value })
                    );

                    removeDeclarations.push(decl);
                    rule.parent.insertBefore(rule, newRule);
                }
            });