Fela is a small, high-performant and framework-agnostic toolbelt to handle state-driven styling in JavaScript.
It is dynamic by design and renders your styles depending on your application state.
It generates atomic CSS and supports all common CSS features such as media queries, pseudo classes, keyframes and font-faces. Fela ships with a powerful plugin API adding e.g. vendor prefixing or fallback value support.
Fela can be used with React or with any other view library. It even supports React Native.
Support Robin Frischmann's work on Fela and its ecosystem directly via Patreon.
yarn add fela
You may alternatively use npm i --save fela.
Fela's core principle is to consider style as a function of state.
The whole API and all plugins and bindings are built on that idea.
It is reactive and auto-updates once registered to the DOM.
The following example illustrates the key parts of Fela though it only shows the very basics.
import { createRenderer } from 'fela'
// a simple style rule is a pure function of state
// that returns an object of style declarations
const rule = state => ({
textAlign: 'center',
padding: '5px 10px',
// directly use the state to compute style values
fontSize: state.fontSize + 'pt',
borderRadius: 5,
// deeply nest media queries and pseudo classes
':hover': {
fontSize: state.fontSize + 2 + 'pt',
boxShadow: '0 0 2px rgb(70, 70, 70)'
}
})
const renderer = createRenderer()
// fela generates atomic CSS classes in order to achieve
// maximal style reuse and minimal CSS output
const className = renderer.renderRule(rule, {
fontSize: 14
}) // => a b c d e f
The generated CSS output would look like this:
.a { text-align: center }
.b { padding: 5px 10px }
.c { font-size: 14pt }
.d { border-radius: 5px }
.e:hover { font-size: 16pt }
.f:hover { box-shadow: 0 0 2px rgb(70, 70, 70) }
If you're using Fela, you're most likely also using React.
Using the React bindings, you get powerful APIs to create primitive components.
Read: Usage with React for a full guide.
import { FelaComponent, Provider } from 'react-fela'
import { render } from 'react-dom'
const rule = state => ({
textAlign: 'center',
padding: '5px 10px',
// directly use the state to compute style values
fontSize: state.fontSize + 'pt',
borderRadius: 5,
// deeply nest media queries and pseudo classes
':hover': {
fontSize: state.fontSize + 2 + 'pt',
boxShadow: '0 0 2px rgb(70, 70, 70)'
}
})
const Button = ({ fontSize = 14, children }) => (
<FelaComponent rule={rule} fontSize={fontSize}>
{children}
</FelaComponent>
)
render(
<Provider renderer={renderer}>
<>
<Button>Basic Button</Button>
<Button fontSize={18}>Big Button</Button>
</>
</Provider>,
document.body
)
If you are coming from CSS and want to learn JavaScript Styling with Fela, there is a full-feature fela-workshop which demonstrates typical Fela use cases. It teaches all important parts, step by step with simple examples. If you already know other CSS in JS solutions and are just switching to Fela, you might not need to do the whole workshop, but it still provides useful information to get started quickly.
There are tons of useful packages maintained within this repository including plugins, enhancers, bindings and tools that can be used together with Fela. Check the Ecosystem documentation for a quick overview.
Apart from all the packages managed within this repository, there are many community third-party projects that are worth mentioning:
connect with auto-bound stylesGot a question? Come and join us on Spectrum!
We'd love to help out. We also highly appreciate any feedback.
Don't want to miss any update? Follow us on Twitter.
Your company is using Fela, but is not listed yet? Add your company / organisation
This project exists thanks to all the people who contribute.
We highly appreciate any contribution.
For more information follow the contribution guide.
Also, please read our code of conduct.
Fela is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all the great contributors.
10.4.1
| Package | Changes |
| --- | --- |
| fela-plugin-embedded | Rule props are now always passed to the keyframe in order to read values from theme. |
| fela | Keyframes are now cached after being processed by plugins. |
| fela-dom<br>fela | Reverted the rendererId option that was introduced in (#667) as it caused a couple of issues and is no longer neccessary with above changes. |
FAQs
State-Driven Styling in JavaScript
The npm package fela receives a total of 0 weekly downloads. As such, fela popularity was classified as not popular.
We found that fela demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.