Fela is a small, performant and framework-agnostic toolbelt to handle styling in JavaScript.
It is dynamic by design and renders your styles depending on your application state.

It generates minimal, optimized CSS and therefore supports all common CSS features such as media queries, pseudo classes, keyframes and font-faces. It supports universal rendering and 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.

Installation

yarn add fela

You may alternatively use npm i --save fela.

Features

• Dynamic styling
• Universal rendering
• Dead code elimination
• High performance
• Minimal CSS output
• Framework-agnostic
• Pseudo classes & Media queries
• Child & Attribute selectors
• Vendor prefixing
• Component theming
• Many useful plugins
• Local namespace

The Gist

Fela is all about rendering styles, especially so called rules. A universal renderer will help us to render styles of all kind. Once rendered into a DOM node, a change listener will subscribe to changes and automatically add new rules.
The following example illustrates the key parts of Fela though it only shows the very basics.

import { createRenderer } from 'fela'
import { render } from 'fela-dom'

// rules are just plain functions of props
// returning a valid object of style declarations
const rule = props => ({
  fontSize: props.fontSize + 'px',
  marginTop: props.margin ? '15px' : 0,
  color: 'red',
  lineHeight: 1.4,
  ':hover': {
    color: 'blue',
    fontSize: props.fontSize + 2 + 'px'
  },
  // nest media queries and pseudo classes
  // inside the style object
  '@media (min-height: 300px)': {
    backgroundColor: 'gray',
    ':hover': {
      color: 'black'
    }
  }
})

// creates a new renderer to render styles
const renderer = createRenderer()

// rendering the rule returns a className reference
// which can be attached to any element
const className = renderer.renderRule(rule, { fontSize: 12 })

// it uses atomic css design to reuse styles
// on declaration base and to keep the markup minimal
console.log(className) // => a b c d e f h

// renders all styles into the DOM
render(renderer)

Examples

• Fela + React (source)
  • React Styleguidist (source)
• Fela + React Native (source)
• Fela + Preact (source)
• Fela + Inferno (source)
• Fela + Angular 2 (source)
  • TypeScript (source)
• Fela + Next
• Fela + HyperScript
• Fela + Cycle

Documentation

• Introduction
• Basics
• Advanced
• Usage Guides
• Recipes
• API Reference
• Troubleshooting
• FAQ
• Feedback
• Thanks

Workshop

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.

Posts & Talks

• Style as a Function of State
  - by Robin Frischmann
• CSS in JS: The Argument Refined
  - by Daniel Steigerwald
• What is Fela?
  - by David Sinclair
• Choosing a CSS in JS library
  - by Thomas Roch

Ecosystem

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.

Community

Apart from all the packages managed within this repository, there are many community third-party projects that are worth mentioning:

• aesthetic - React style and theme layer with Fela support
• base-styling-components: Abstract Box and Text Components
• cf-ui - Cloudflare UI Framework
• cycle-fela - Cycle bindings for Fela
• este - Starter kit for universal full–fledged React apps build with Fela
• fela-components: Styling library for React and Fela
• fela-react-prop: Generate class names for fela style rule and apply them as property on a wrapped component
• fela-styles-connector: Simplified react-fela connect with auto-bound styles
• frejya: Pass styles as props to components
• hyper-fela - HyperScript bindings for Fela
• kilvin - Primitive React Layout Components with Fela
• storybook-addon-props-fela: Document the props of your Fela components in storybook.
• telaviv - React Universal Rendering
• vashet - ClojureScript wrapper for Fela
• veel - Base react styling components using fela with a design system
• vue-fela - Vue bindings for Fela

Contributing

We highly appreciate any contribution.
For more information follow the contribution guide.
Also, please read our code of conduct.

Support

Got a question? Come and join us on Gitter!
We'd love to help out. We also highly appreciate any feedback.

Who's using Fela?

Your company is using Fela, but is not listed yet? Add your company / organisation

• abilis
• BdP LV RPS
• Cloudflare
• dm-drogerie markt
• HelloFresh
• Kilix
• Lusk
• MediaFire
• N26
• NinjaConcept
• Optisure
• V2

License

Fela is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all the great contributors.