Skip to content
State-Driven Styling in JavaScript
JavaScript HTML Reason Other
Branch: master
Clone or download
robinweser Merge pull request #766 from msmith9393/patch-1
IE 11 Support Error "Object doesn't support property or method 'findI…
Latest commit b63ea25 Feb 17, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update push.yml Feb 14, 2020
benchmarks v11.1.2 Feb 14, 2020
docs Merge pull request #752 from danielstocks/feature-render-to-node-list Nov 27, 2019
examples v11.1.2 Feb 14, 2020
flowtypes implement custom sorting Nov 7, 2019
packages ran formater Feb 15, 2020
scripts fix changelog typo & update manual script Sep 3, 2018
.babelrc
.editorconfig update editor settings Aug 18, 2017
.eslintrc
.flowconfig chore(flow): ignore the "_book" dir Jan 25, 2019
.gitignore manually push changes Nov 19, 2019
.istanbul.yml
.prettierrc #450 initial progress Nov 16, 2017
CHANGELOG.md Update CHANGELOG.md Feb 14, 2020
CNAME introducing new docs shape Jun 8, 2016
LICENSE update licenses Jun 22, 2017
MIGRATION.md update licenses, links, etc Nov 15, 2019
README.md reduce readme badges Feb 14, 2020
SUMMARY.md ADded docs Nov 25, 2019
book.json update licenses, links, etc Nov 15, 2019
lerna.json v11.1.2 Feb 14, 2020
package.json remove codeclimate and travisx Feb 14, 2020
yarn.lock Update to preact X, drop preact-context Jan 26, 2020

README.md

Fela

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.

Bundlephobia npm downloads Spectrum

Support Us

Support Robin Weser's work on Fela and its ecosystem directly via Patreon.

Installation

yarn add fela

You may alternatively use npm i --save fela.

Benefits

  • Predictable Styling
  • Scoped Atomic CSS
  • Minimal Bundle Size
  • No Specificity Issues
  • No Naming Conflicts
  • Framework-Agnostic
  • Huge Ecosystem
  • i18n Support

The Gist

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

Primitive Components

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 React from 'react'
import { FelaProvider, useFela } from 'react-fela'
import { createRenderer } from '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 = ({ children, ...props }) => {
  const { css } = useFela(props)
  
  <button className={css(rule)}>
    {children}
  </button>
}

const renderer = createRenderer()

render(
  <Provider renderer={renderer}>
    <>
      <Button>Basic Button</Button>
      <Button fontSize={18}>Big Button</Button>
    </>
  </Provider>,
  document.body
)

Examples

Documentation

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.

Talks

Posts

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:

Support

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

Who's using Fela?

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

Contributing

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.

License

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

You can’t perform that action at this time.