code: function responsifyRule(breakpoints) {
    /**
     * Closure function that handles each @responsive sub rule
     * @param {Object} rule
     */
    return (rule) => {
      /* insert the base rule right before the @responsive rule */
      const root = rule.parent.parent;
      const clone = rule.clone();
      root.insertBefore(rule.parent, clone);
  
      const isValidSelector = rule.selector.charAt(0) === '.';
      if (!isValidSelector) return; /* equivilent to continue; */
  
      /* insert each responsive rule in its breakpoint's atRule */
      breakpoints.forEach((breakpoint) => {
        const responsiveRule = createPrefixedRule(rule, breakpoint.prefix);
        if (responsiveRule) {
          breakpoint.atRule.append(responsiveRule);
        }
      });
    };
  }
docs: Build a new PostCSS rule for every responsive state
  @param {Array} breakpoints The processed breakpoints the build the rules off of
  @return {Function}