How to use the postcss.atRule function in postcss

export default (e, rootCss, opts) => {
  containers(e.containers, rootCss, opts);
  rows(e.rows, rootCss, opts);
  blocs(e.blocs, rootCss, opts);
  fractions(e.fractions, rootCss, opts);
  columns(e.columns, rootCss, opts);

  fractionsQuery(e.fractions[0], rootCss, opts);
  columnsQuery(e.columns, rootCss, opts, 0);
  rulesQuery(e.rules[0], rootCss);

  for (let breakpoint = 1; breakpoint <= opts.max; breakpoint += 1) {
    const queryWidth = breakpoint * opts.width - opts.gutter + 2 * opts.padding;
    const mediaQuery = postcss.atRule({
      name: 'media',
      params: `(min-width: ${queryWidth}rem)`,
    });

    blocsQuery(e.blocs, mediaQuery, opts, breakpoint);

    if (breakpoint >= opts.min) {
      containersQuery(e.containers, mediaQuery, opts, breakpoint);
      fractionsQuery(e.fractions[breakpoint], mediaQuery, opts);
      columnsQuery(e.columns, mediaQuery, opts, breakpoint);
      rulesQuery(e.rules[breakpoint], mediaQuery);
    }

    if (mediaQuery.nodes && mediaQuery.nodes.length) {
      // console.log('booo', util.inspect(mediaQuery.nodes.length, false, null))
      rootCss.append(mediaQuery);

maxWidth = pxToRem(params.maxWidth);
  } else if (sizeUnit === widthUnit || sizeUnit === 'rem' && widthUnit === 'em') {
    minWidth = params.minWidth;
    maxWidth = params.maxWidth;
  } else {
    rule.warn(result, 'this combination of units is not supported');
  }

  // Build the responsive type decleration
  sizeDiff = parseFloat(maxSize) - parseFloat(minSize);
  rangeDiff = parseFloat(maxWidth) - parseFloat(minWidth);

  rules.responsive = 'calc(' + minSize + ' + ' + sizeDiff + ' * ((100vw - ' + minWidth + ') / ' + rangeDiff + '))';

  // Build the media queries
  rules.minMedia = postcss.atRule({
    name: 'media',
    params: 'screen and (max-width: ' + params.minWidth + ')'
  });

  rules.maxMedia = postcss.atRule({
    name: 'media',
    params: 'screen and (min-width: ' + params.maxWidth + ')'
  });

  // Add the required content to new media queries
  rules.minMedia.append({
    selector: rule.selector
  }).walkRules(selector => {
    selector.append({
      prop: declName,
      value: params.minSize

atRule.walkRules(selectorRegExp, (rule: Object) => {
      const childRule = matchChild(parent, rule);
      // Create new at-rule to append only necessary selector to critical
      const criticalAtRule = postcss.atRule({
        name: atRule.name,
        params: atRule.params
      });
      /**
       * Should append even if parent selector, but make sure the two rules
       * aren't identical.
       */
      if (
        (rule.selector === parent.selector || childRule) &&
        postcss.parse(rule).toString() !== postcss.parse(parent).toString()
      ) {
        const clone = rule.clone();
        criticalAtRule.append(clone);
        result.push(criticalAtRule);
      }
    });

bundle.forEach(stmt => {
    if (!stmt.media.length) return
    if (stmt.type === "import") {
      stmt.node.params = `${stmt.fullUri} ${stmt.media.join(", ")}`
    } else if (stmt.type === "media") stmt.node.params = stmt.media.join(", ")
    else {
      const nodes = stmt.nodes
      const parent = nodes[0].parent
      const mediaNode = postcss.atRule({
        name: "media",
        params: stmt.media.join(", "),
        source: parent.source,
      })

      parent.insertBefore(nodes[0], mediaNode)

      // remove nodes
      nodes.forEach(node => {
        node.parent = undefined
      })

      // better output
      nodes[0].raws.before = nodes[0].raws.before || "\n"

      // wrap new rules with media query

var nonAscii = /[^\x00-\x7F]/;

        css.walk(function (node) {
            if (node.type === 'atrule' && node.name === charset) {
                if (!charsetRule) {
                    charsetRule = node;
                }
                node.remove();
            } else if (!nonAsciiNode && node.parent === css && nonAscii.test(node)) {
                nonAsciiNode = node;
            }
        });

        if (nonAsciiNode) {
            if (!charsetRule && opts.add !== false) {
                charsetRule = postcss.atRule({
                    name: charset,
                    params: '"utf-8"'
                });
            }
            if (charsetRule) {
                charsetRule.source = nonAsciiNode.source;
                css.prepend(charsetRule);
            }
        }
    };
});

options.mediaQueries.forEach(media => {
            const atRule = postcss.atRule({
              name: 'media',
              params: media.params
            });

            const prefix = media.prefix || '';
            const prefixSeparator = media.prefixSeparator || '';
            const classNamePrefix = prefix + prefixSeparator;

            features.objectFit(atRule, options, classNamePrefix);

            comment.parent.append(atRule);
          });
        }

return atrules.reduce((rule, atrule) => {
            const { name, params } = atrule;
            return postcss.atRule({ name, params }).append(rule);
        }, postcss.rule({ selector }).append(decl));
    }

mq.queries.forEach(({ media, queries, source }) => {
        const atRule = postcss.atRule({
          name: 'media',
          params: media
        });

        const mediaRule = postcss.rule({
          selector: mq.selector
        });
        queries.forEach(({ prop, value }) => {
          mediaRule.append({
            prop,
            value
          });
        });
        atRule.append(mediaRule);
        atRule.source = source;

options.mediaQueries.forEach(media => {
            const atRule = postcss.atRule({
              name: 'media',
              params: media.params
            });

            const prefix = media.prefix || '';
            const prefixSeparator = media.prefixSeparator || '';
            const classNamePrefix = prefix + prefixSeparator;

            features.opacity(atRule, options, classNamePrefix);

            comment.parent.append(atRule);
          });
        }