@patreon/studio/css-config/postcss/responsive-at-rule.js

Patreon Studio Design System

// const { minimatch } = require('minimatch');
// const path = require('path');
const { breakpoints, breakpointSuffixes } = require('../lib/breakpoints');

const breakpointArray = Object.entries(breakpoints).reverse();

const plugin = () => {
  return {
    postcssPlugin: 'responsive-at-rule',
    AtRule(targetRule, { Rule, AtRule }) {
      if (targetRule.name !== 'responsive') {
        return;
      }

      // loop through each breakpoint and create a new set of rules for each
      breakpointArray.forEach(([bp, value]) => {
        if (value > 0) {
          // if the value is more than 0, wrap the targetRule in a media query
          const newNode = new AtRule({
            name: 'media',
            params: `(--${bp})`,
            nodes: targetRule.nodes.map(
              (originalDecl) =>
                // clone the original declaration and add a breakpoint class suffix
                new Rule({
                  selector: `${originalDecl.selector}${breakpointSuffixes[bp]}`,
                  nodes: originalDecl.nodes.map((node) => node.clone()),
                }),
            ),
          });

          // insert the new node after the targetRule
          targetRule.parent.insertAfter(targetRule, newNode);
        } else {
          // if the value is 0, just insert the breakpoint nodes after the targetRule
          targetRule.parent.insertAfter(
            targetRule,
            targetRule.nodes.map((node) => node.clone()),
          );
        }
      });

      // remove the original rule
      targetRule.remove();
    },
  };
};

plugin.postcss = true;

module.exports = plugin;