renderStatic not applying some plugins

[chrisrzhou]

Firstly, thank you so much for this wonderful + delightful + beautiful library ❤️. I'm amazed at how much Fela can do with so little, and I am very close to wiring up something exciting that is only made possible with Fela!

Now onto the bug 😛

Type: Bug

Packages	Version
fela	11.6.1

---

Description

renderStatic does not seem to work with all plugins, specifically fela-plugin-theme-value, fela-plugin-responsive-value. Not sure if this is an intentional behavior since the docs mentions that

Style objects will also be processed with all applied plugins.

If renderStatic can process style objects using plugins, this is going to be really awesome (great DX in defining static styles using the extended syntax allowed by plugins), so hopefully that is either the expected behavior or something that is on the roadmap.

Steps to reproduce

Please see the following Codesandbox example for a repro.

In the example, we will use the ulStyleObject to test behaviors rendered through useFela (i.e. renderer.renderRule) and renderStatic. The former behaves as expected but the latter doesn't seem to applying plugins.

Expected Behavior

renderStatic to apply plugin behaviors (fela-plugin-theme-value and fela-plugin-responsive-value).

Actual Behavior

renderStatic seems to apply some plugin behaviors in defined by fela-preset-web (e.g. fela-plugin-unit) but not those defined by fela-plugin-theme-value and fela-plugin-responsive-value.

[chrisrzhou]

On searching issues, I think this maybe related: #465

If the goal of renderStatic is to basically apply simple static styles (objects or template strings) without rule processing, then I think the current behavior is probably as-expected, and this would be more of a feature request.

If this feature is supported, the most immediate use case specific to fela-plugin-theme-value plugin is you can now define static/global styles with theme variables without having to manually maintain it. The general use case is that renderStatic will formally use the Fela rule "langage" and APIs, which leads to a better developer experience when using the renderStatic method.

Thanks and would love to hear if this is a bug vs feature!

[chrisrzhou]

Quick update, I have an (almost complete) workaround for my problem:

const renderStatic = (renderer, style, selector, props) => {
  const staticStyle = renderer.plugins.reduce((_acc, plugin) => {
    return plugin(style, null, null, props);
  }, style);
  renderer.renderStatic(staticStyle, selector);
};

const renderer = createFelaRenderer({ enhancers, plugins });
const props = { theme }; // add any additional props that plugins depend on.
renderStatic(renderer, style, element, props);

EDIT: While the above applies most plugins and resolved my issue with fela-plugin-theme-value, I'm hitting a wall with nested/pseudo/media-queries which I can't get to work (I suspect this is an internal implementation on how Fela resolves nested pseudo/media-queries) e.g.

const ulStyleObject = {
  // primitive
  color: 'red', // works
  marginLeft: 40,  // works
  // theme-value, responsive-value
  padding: 'l', // NOW WORKS!
  backgroundColor: ['palette.red1', 'yellow'], // responsive still doesn't work
  // nested
  '> li': {
    paddingLeft: 100,  // nesting doesn't work
   ':hover': {
      color: 'pink', // nesting/pseudo doesn't work
    }
  },
}

Feel free to close the issue if this is something that fela is unlikely to support in the near future, but do let me know if renderStatic will be fully plugin-aware in the future!

[robinweser]

Hey @chrisrzhou,

Thanks for the bug report!
This is indeed a valid bug, since renderStatic (as long as used with objects) should process style with plugins.
Nested styles are another issue and will be handled in a separate PR, see #863

---

Firstly, thank you so much for this wonderful + delightful + beautiful library ❤️. I'm amazed at how much Fela can do with so little, and I am very close to wiring up something exciting that is only made possible with Fela!

That sounds amazing! Mind sharing what you're up to? Maybe I can help out or answer some questions :)
Feel free to contact me via Twitter (@robinweser) or E-Mail (contact@weser.io) and I can share my phone number to connect over a proper messenger.

[chrisrzhou]

Thanks for confirming it's a bug and I'll contact you soon in the next week or so after I've fleshed things out a bit more. tl;dr, it's proof that Fela is the minimal primitive for building UI/design systems with delightful DX (but you know that already :P).

[chrisrzhou]

A quick question/request while piggybacking on this issue:

Are there plans for an API method that can capture transformation of styles modified by plugins? Currently renderer.renderRule only returns the evaluated class name.

This would be huge in the debugging DX, and I can also see this being valuable for consumers who want to use Fela purely as a rules-processing engine, grabbing the data of the evaluated styles for custom use.

[robinweser]

@chrisrzhou This took quite some time, but I finally managed to look into it: #894

Would this solve your issues? We need to manually pass these props when using renderStatic as the renderer is not aware of any props or theme. The staticStyle from useFela solves that since it has access to all context.