We decided to keep Fela as small and simple as possible. It only includes the renderer and two simple helpers. Yet it is designed to be highly extendable with both plugins and middleware. Plugins are used to process your styles, enhancers to enhance your renderer.
With this approach everyone is able to create a custom version of Fela fitting their particular needs.

Many plugins and enhancers are already included in the main repository.

Renderers

fela - Web (universal)

fela-dom - Web (DOM bindings)

fela-native - React Native

Bindings

react-fela - React & React Native

preact-fela - Preact

preact-fela-simple - Preact (alternative)

inferno-fela - Inferno

reason-fela - ReasonML

bs-react-fela - BuckleScript / ReasonReact

hyper-fela - HyperScript

vashet - ClojureScript

cycle-fela - Cycle

vue-fela - Vue

Integrations

Gatsby

Plugins

fela-plugin-bidi - Enable direction-independent style authoring

fela-plugin-custom-property - Resolves custom properties

fela-plugin-embedded - Automatically resolves embedded font faces and keyframes within rules

fela-plugin-expand-shorthand - Expand shorthand properties and optionally merge them

fela-plugin-extend - Extend style objects based on conditions

fela-plugin-fallback-value - Resolves arrays of fallback values

fela-plugin-friendly-pseudo-class - Transforms javascript-friendly pseudo class into valid syntax

fela-plugin-important - Adds
```
!important
```
to every value

fela-plugin-isolation - Adds style isolation to every rule

fela-plugin-logger* - Logs processed style objects

fela-plugin-named-keys - Replaces named keys with valid syntax

fela-plugin-pseudo-prefixer - Allows adding custom pseudo class prefixes

fela-plugin-fullscreen-prefixer - Adds all
```
::fullscreen
```
prefixes

fela-plugin-placeholder-prefixer - Adds all
```
::placeholder
```
prefixes

fela-plugin-prefixer - Adds all vendor prefixes to the styles

fela-plugin-responsive-value - Resolves responsive array values to media query rules

fela-plugin-rtl - Converts styles to their right-to-left counterpart

fela-plugin-unit - Automatically adds units to values if needed

fela-plugin-validator* - Validates, logs & optionally deletes invalid properties for keyframes and rules

fela-plugin-typescript - Allows to write type-safe style rules and provides some autocomplete

fela-plugin-theme-value - Resolves string-based theme values to actual style values

Plugin-Presets

fela-preset-web - Preset for cross-browser web applications

fela-preset-dev - Preset for development mode

Enhancers

fela-beautifier* - Beautifies the rendered CSS markup

fela-layout-debugger* - Adds colored outlines or backgroundColors to debug layouts

fela-logger* - Logs every rendered change output

fela-monolithic - Render component-based (monolithic) CSS classes (rather than atomic)

fela-identifier - Allows to create rules for which the renderer will generate unique class names (useful for nested selectors)

fela-perf* - Logs performance information (time elapsed while rendering)

fela-sort-classnames - Deterministically sort rendered class names to prevent browser incompatibilities

fela-sort-media-query-mobile-first - Implements a mobile-first sortMediaQuery function

fela-statistics* - Collects different metrics to analyze your styles

Components

base-styling-components - Abstract Box and Text Components

cf-ui - Cloudflare UI Framework

counter-component-with-react-mobx-fela - Counter Component using Fela

htz-frontend - Source for Haaretz frontend app(s)

just-box - Create universal layouts in React and React-Native

kilvin - Primitive React Layout Components

olymp-fela - Simple collection of Fela Components for olymp

refelaxbox - reflexbox fork using Fela

selectless - Select in React with Context

superslider - Slider Component using Fela

veel - Base React Styling Components using Fela with a Design System

Starter Kits

catstack - A modular mad science framework for teams working on production web apps

dogstack - A popular-choice grab-bag framework for teams working on production web apps

olymp - Create and build a next gen app using node, react, cssInJS and other cool stuff

fullstack-pro - Full Stack to create independent packages and to run on servers

react-frontend-server-stack - Most common react stack and pluggable packages to quickly start a universal react application

reason-react-starter - A starter for building universal web apps with ReactReason

Tools

aesthetic - React style and theme layer with Fela support

alef - Modified TypeScript port of Fela

babel-plugin-css-to-js - Transform your CSS to JavaScript at compile time

bs-css-core - BuckleScript statically typed DSL for CSS

classnames - Manage and combine multiple className values safely

css-functions - Functional API to create CSS functions including value validation

css-spring - Generate physics based css-keyframe animations for the css-in-js solution of your choice or plain css

css-to-object - Convert flat CSS rules to JavaScript style objects

fela-components - Styling library for React and Fela

fela-react-helpers - A set of useful helpers for 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

fela-tools - Useful tools for working with Fela

frejya - Pass styles as props to components

gatsby-plugin-fela - Integrates fela with Gatsby

jest-fela-react - Nicer snapshots when using Jest and Fela

objectify-css - CLI for converting CSS rules to JavaScript style objects

polished - A lightweight toolset for writing styles in JavaScript

react-animations - CSS animations to be used with CSS in JS solutions

react-styling - Write your styles as CSS with ECMAScript 2015 template strings

stile - Handle units and string values

storybook-addon-props-fela - Document the props of your Fela components in storybook.

black-box - combines behavior, presentation, structure in one place & creates all-in-one components using only JS syntax

small-color - A tiny (0.8kb gzipped) color manipulation package

* Packages are considered dev tools and should therefore not be used in production.

On This Page