Please, help me to to make a plugin

[7iomka]

Hi. I want to make simple stylis plugin

1) It search through declarations, when find one with gap prop, it replaced by

--fgp-gap: ${value} !important;
margin-top: calc(-1 * var(--fgp-gap));
margin-right: calc(-1 * var(--fgp-gap));

2) Next to rule with declaration from step 1 we need to add a new rule

${declaration selector} > * {
   margin-top: var(--fgp-gap);
   margin-right: var(--fgp-gap);
}

Please help me. I want to make a polyfill for projects which use emotion 11 solutions with styles with vendors, that has not support Safari <14.1, for example in this case with gap property on flex elements. (For example popular ui lib mantine).

I tried like this.

import type { StylisPlugin } from '@emotion/cache';
import { copy } from 'stylis';

const gapPolyfillPlugin: StylisPlugin = (element, index, children, callback) => {
  // rule | decl | @media
  if (element.type === 'decl') {
    if (element.props === 'gap') {
      element.return = `
      --fgp-gap: ${element.children} !important;
      margin-top: calc(-1 * var(--fgp-gap));
      margin-right: calc(-1 * var(--fgp-gap));
      `;

      // code below not working
      if (element.parent && element.parent.type === 'rule') {
        const appendedRule = copy(element.parent.value, element.parent, element.parent.type);
        appendedRule.return = `${element.parent.return} ${element.parent.value} > * {
          margin-top: var(--fgp-gap);
          margin-right: var(--fgp-gap);
        }`;
      }
    }

    // prefix(element.value, element.length);
  }
};

export { gapPolyfillPlugin };

Anyone!