Ecosystem

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(new tab).

Renderers

• fela(new tab) - Web (universal)
• fela-dom(new tab) - Web (DOM bindings)
• fela-native(new tab) - React Native

Bindings

• react-fela(new tab) - React & React Native
• preact-fela(new tab) - Preact
• preact-fela-simple(new tab) - Preact (alternative)
• inferno-fela(new tab) - Inferno
• reason-fela(new tab) - ReasonML
• bs-react-fela(new tab) - BuckleScript / ReasonReact
• hyper-fela(new tab) - HyperScript
• vashet(new tab) - ClojureScript
• cycle-fela(new tab) - Cycle
• fela-vue(new tab) - Vue
• vue-fela(new tab) - alternative for Vue

Integrations

• Gatsby(new tab)
• Next(new tab)

Plugins

• fela-plugin-bidi(new tab) - Enable direction-independent style authoring
• fela-plugin-custom-property(new tab) - Resolves custom properties
• fela-plugin-embedded(new tab) - Automatically resolves embedded font faces and keyframes within rules
• fela-plugin-expand-shorthand(new tab) - Expand shorthand properties and optionally merge them
• fela-plugin-extend(new tab) - Extend style objects based on conditions
• fela-plugin-fallback-value(new tab) - Resolves arrays of fallback values
• fela-plugin-friendly-pseudo-class(new tab) - Transforms javascript-friendly pseudo class into valid syntax
• fela-plugin-hover-media(new tab) - Wraps

  :hover

  styles in

  @media (hover: hover)

  queries
• fela-plugin-important(new tab) - Adds

  !important

  to every value
• fela-plugin-isolation(new tab) - Adds style isolation to every rule
• fela-plugin-kebab-case(new tab) - Converts properties written in kebab-case to camelCase in order to be consumed by Fela
• fela-plugin-logger*(new tab) - Logs processed style objects
• fela-plugin-multiple-selectors(new tab) - Resolves multiple comma-separated selectors to individual object keys
• fela-plugin-named-keys(new tab) - Replaces named keys with valid syntax
• fela-plugin-pseudo-prefixer(new tab) - Allows adding custom pseudo class prefixes
• fela-plugin-fullscreen-prefixer(new tab) - Adds all

  ::fullscreen

  prefixes
• fela-plugin-placeholder-prefixer(new tab) - Adds all

  ::placeholder

  prefixes
• fela-plugin-prefixer(new tab) - Adds all vendor prefixes to the styles
• fela-plugin-responsive-value(new tab) - Resolves responsive array values to media query rules
• fela-plugin-rtl(new tab) - Converts styles to their right-to-left counterpart
• fela-plugin-unit(new tab) - Automatically adds units to values if needed
• fela-plugin-validator*(new tab) - Validates, logs & optionally deletes invalid properties for keyframes and rules
• fela-plugin-typescript(new tab) - Allows to write type-safe style rules and provides some autocomplete
• fela-plugin-theme-value(new tab) - Resolves string-based theme values to actual style values

Plugin-Presets

• fela-preset-web(new tab) - Preset for cross-browser web applications
• fela-preset-dev(new tab) - Preset for development mode

Enhancers

• fela-beautifier*(new tab) - Beautifies the rendered CSS markup
• fela-enforce-longhands(new tab) - Prioritizes longhand over shorthand CSS properties in a deterministic way
• fela-identifier(new tab) - Allows to create rules for which the renderer will generate unique class names (useful for nested selectors)
• fela-layout-debugger*(new tab) - Adds colored outlines or backgroundColors to debug layouts
• fela-logger*(new tab) - Logs every rendered change output
• fela-monolithic(new tab) - Render component-based (monolithic) CSS classes (rather than atomic)
• fela-perf*(new tab) - Logs performance information (time elapsed while rendering)
• fela-sort-classnames(new tab) - Deterministically sort rendered class names to prevent browser incompatibilities
• fela-sort-media-query-mobile-first(new tab) - Implements a mobile-first sortMediaQuery function
• fela-statistics*(new tab) - Collects different metrics to analyze your styles

Components

• base-styling-components(new tab) - Abstract Box and Text Components
• cf-ui(new tab) - Cloudflare UI Framework
• counter-component-with-react-mobx-fela(new tab) - Counter Component using Fela
• htz-frontend(new tab) - Source for Haaretz frontend app(s)
• just-box(new tab) - Create universal layouts in React and React-Native
• kilvin(new tab) - Primitive React Layout Components
• olymp-fela(new tab) - Simple collection of Fela Components for olymp(new tab)
• refelaxbox(new tab) - reflexbox(new tab) fork using Fela
• selectless(new tab) - Select in React with Context
• superslider(new tab) - Slider Component using Fela
• veel(new tab) - Base React Styling Components using Fela with a Design System

Starter Kits

• catstack(new tab) - A modular mad science framework for teams working on production web apps
• dogstack(new tab) - A popular-choice grab-bag framework for teams working on production web apps
• olymp(new tab) - Create and build a next gen app using node, react, cssInJS and other cool stuff
• fullstack-pro(new tab) - Full Stack to create independent packages and to run on servers
• react-frontend-server-stack(new tab) - Most common react stack and pluggable packages to quickly start a universal react application
• reason-react-starter(new tab) - A starter for building universal web apps with ReactReason

Tools

• aesthetic(new tab) - React style and theme layer with Fela support
• alef(new tab) - Modified TypeScript port of Fela
• babel-plugin-css-to-js(new tab) - Transform your CSS to JavaScript at compile time
• bs-css-core(new tab) - BuckleScript statically typed DSL for CSS
• classnames(new tab) - Manage and combine multiple className values safely
• css-functions(new tab) - Functional API to create CSS functions including value validation
• css-spring(new tab) - Generate physics based css-keyframe animations for the css-in-js solution of your choice or plain css
• css-to-object(new tab) - Convert flat CSS rules to JavaScript style objects
• fela-components(new tab) - Styling library for React and Fela
• fela-react-helpers(new tab) - A set of useful helpers for Fela
• fela-react-prop(new tab) - Generate class names for fela style rule and apply them as property on a wrapped component
• fela-styles-connector(new tab) - Simplified react-fela

  connect

  with auto-bound styles
• fela-tools(new tab) - Useful tools for working with Fela
• frejya(new tab) - Pass styles as props to components
• gatsby-plugin-fela(new tab) - Integrates fela with Gatsby(new tab)
• jest-fela-react(new tab) - Nicer snapshots when using Jest and Fela
• objectify-css(new tab) - CLI for converting CSS rules to JavaScript style objects
• polished(new tab) - A lightweight toolset for writing styles in JavaScript
• react-animations(new tab) - CSS animations to be used with CSS in JS solutions
• react-styling(new tab) - Write your styles as CSS with ECMAScript 2015 template strings(new tab)
• stile(new tab) - Handle units and string values
• storybook-addon-props-fela(new tab) - Document the props of your Fela components in storybook.
• black-box(new tab) - combines behavior, presentation, structure in one place & creates all-in-one components using only JS syntax
• small-color(new tab) - A tiny (0.8kb gzipped) color manipulation package
• Truss(new tab) - TypeScript DSL for writing Tachyons/Tailwinds-style inline/utility CSS but in Fela

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