Comments (1)
If someone can't wait for real solid bindnings this stupid approach seems to get the basics working:
// felaSetup.js
import {createRenderer} from 'fela';
import {render} from 'fela-dom';
import {createContext, useContext} from 'solid-js';
import webPreset from 'fela-preset-web';
felaRenderer = createRenderer({plugins: [...webPreset]});
FelaContext = createContext();
render(felaRenderer); // kick of rendering (includes automatic subscription)
export const FelaProvider = (props) => {
return (
<FelaContext.Provider value={felaRenderer}>
{props.children}
</FelaContext.Provider>
)
};
export const useFela = (props) => {
const renderer = useContext(FelaContext);
const css = (ruleFunction) => {
return renderer.renderRule(ruleFunction, props);
};
return {css}
};
// App.jsx
import {FelaProvider, useFela} from './felaSetup.js'
const App = (props) => {
return (
<FelaProvider>
<MyComp />
</FelaProvider>
)
}
const rule = ({fontSize}) => ({
color: 'red',
fontSize: fontSize + 'pt',
})
const MyComp = ({fontSize}) => {
const { css } = useFela({ fontSize })
return <div className={css(rule)}>Hello World</div>
}
(Note: I haven't tested this code because I use Fela in a different way but the concept above worked for me)
from fela.
Related Issues (20)
- react-fela providers only accept single element children HOT 2
- Use fela with ReactDOM.createPortal on a different window HOT 1
- fela-plugin-responsive-value doesn’t handle nested objects
- Fela doesn’t hydrate CSS custom properties HOT 1
- fela-plugin-multiple-selectors doesn’t extend styles
- renderStatic doesn’t handle nested objects
- Document targetDocument
- renderToNodeList not exported in react-fela/index.d.ts HOT 1
- Typescript plugin doesn't extend style definition HOT 5
- Native ESM support HOT 5
- renderStatic not applying some plugins HOT 6
- Missing changelog for 11.5.x & 11.6.x HOT 2
- Rehydration of `&` selectors HOT 10
- Rules are mixing between components when we switch between pages. HOT 1
- Typescript interface for renderer configuration (IConfig) misses some options HOT 2
- Transform key as array ignored HOT 5
- Fail to set backgroundImage fallback value HOT 3
- Bug: no fela styles on saved page HOT 1
- react-native: no style export in useFela hook HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fela.