Theme-aware static rendering

[robinweser]

Description

Added a third argument props to renderer.renderStatic which are used when processing plugins.
This is mostly used when processing styles with plugins like theme-value or responsive-value where we want the theme being present in our props.

Additionally, I added a staticStyle function to useFela which passes the props including theme by default. This works exactly the same as the props passing in css.

Example

If required, add a code example or a link to a working example (repository).

const theme = {
  colors: {
    primary: 'blue',
  },
}

// assuming fela-plugin-theme-value is used with just backgroundColor: theme => theme
renderer.renderStatic(
  {
    backgroundColor: 'colors.primary',
  },
  'body',
  { theme }
)

Packages

List all packages that have been changed.

• fela
• fela-bindings
• react-fela
• preact-fela

Versioning

Minor

Checklist

Quality Assurance

You can also run pnpm run check to run all 4 commands at once.

• The code was formatted using Prettier (pnpm run format)
• The code has no linting errors (pnpm run lint)
• All tests are passing (pnpm run test)

Changes

If one of the following checks doesn't make sense due to the type of PR, just check them.

• Tests have been added/updated
• Documentation has been added/updated

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/robinweser/fela/CHjxCn7JCvNHY2fzzXvagZYrqU6k
✅ Preview: https://fela-git-876-render-static-props-robinweser.vercel.app

[chrisrzhou]

@robinweser, this looks great and I think will allow plugins needing additional props to work.

I think my original issue wasn't due to props-based plugins (e.g. theme-value) not working, but rather some behaviors of certain plugins not working (e.g. responsive-value). In #876 (comment), I think the main culprits that were not working were:

• Nested queries
• Pseudo selectors

The above are usually supported in inlined style definitions when using Fela, but when using with renderer.renderStatic some functionality was dropped.

Your solution does help me use a formal fix for theme-value so that's a plus, but wanted to confirm if you see the same issue on your end for nested queries and pseudo selectors (these themselves maybe due to respective fela plugins).

Thanks,
Chris

[robinweser]

@chrisrzhou Yeah, this does not introduce nested behaviour to static rendering yet. That's a feature I want to provide with an enhancer in the future, but didn't have time yet to do.