@styn/plugin-breakpoints/dist/index.es.js

Create breakpoints to use in your styn styles

const breakpoints = (screens, template = size => `@media (min-width: ${size})`) => (tree, walk) => {
  return walk(tree, (rule, parent, index) => {
    if (rule.type === "rule" && rule.declarations) {
      let it = 1;

      for (const property in rule.declarations) {
        if (typeof rule.declarations[property] === "object") {
          const mqrule = {
            type: "at-rule",
            keyword: template(screens[property]),
            rules: [{
              type: "rule",
              selector: rule.selector,
              declarations: rule.declarations[property]
            }]
          };
          delete rule.declarations[property];
          parent.splice(index + it, 0, mqrule);
          it++;
        }
      }
    }
  });
};

export { breakpoints };