renderStatic not applying some plugins about fela HOT 6 OPEN

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 ([email protected]) and I can share my phone number to connect over a proper messenger.

from fela.

@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.

from fela.

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!

from fela.

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!

from fela.

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).

from fela.

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.

from fela.