How to reuse code in patterns?

[freddydumont]

The code generated from patterns defined in the config is not evaluated but "copy-pasted" as is. Example:

  patterns.extend.link: {
        jsxElement: 'a',
        transform() {
          return {
            // ! also defined above
            color: 'link',
            _visited: {
              color: 'visited',
            },
            _hocus: {
              textDecoration: 'none',
              backgroundColor: 'link',
              color: 'background',
            },
          };
        },
      },

will generate the following code in styled-system/patterns:

const linkConfig = {
transform() {
  return {
    // ! also defined above
    color: "link",
    _visited: {
      color: "visited"
    },
    _hocus: {
      textDecoration: "none",
      backgroundColor: "link",
      color: "background"
    }
  };
}}

Note that the comment is still present. Now, if I try and extract the css object from transform() to a variable, that variable's name is "copy-pasted", not its value:

example:

  patterns.extend.link: {
        jsxElement: 'a',
        transform() {
          return myCSSObject;
        },
      },

will generate:

const linkConfig = {
transform() {
  return myCSSObject;
}}

That variable is of course non-existant in patterns/link.

So I'm wondering, how do I extract variables to reuse between recipes and patterns?

Basically what I want to do is reuse the same styles from the link pattern, in the recipe that wraps markdown. The recipe itself serves as a scoped-global CSS where I apply its className to the markdown-wrapping div.

[segunadebayo]

This is a design limitation at the moment. Unfortunately, we won't be able to resolve this anytime soon.

I'd recommend inlining pattern code inside the transform for now

[freddydumont]

Thanks for the answer. It's good to know at least that it's a known limitation.

Should there be an issue for this? Just wondering how I can track if it's resolved even if it's a long time from now.