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.
- react-fela - React & React Native
- preact-fela - Preact
- inferno-fela - Inferno
- hyper-fela - HyperScript
- cycle-fela - Cycle
- vue-fela - Vue
- fela-plugin-custom-property - Resolves custom properties
- fela-plugin-embedded - Automatically resolves embedded font faces and keyframes within rules
- fela-plugin-extend - Extend style objects based on conditions
- fela-plugin-fallback-value - Resolves arrays of fallback values
- fela-plugin-important - Adds
!importantto every value
- fela-plugin-isolation - Adds style isolation to every rule
- fela-plugin-logger* - Logs processed style objects
- fela-plugin-lvha - Sorts pseudo classes according to LVH(F)A
- fela-plugin-named-media-query - Transforms named media query keys into valid syntax
- fela-plugin-placeholder-prefixer - Adds all
- fela-plugin-prefixer - Adds all vendor prefixes to the styles
- fela-plugin-dynamic-prefixer - Adds minimum set of vendor prefixes to the styles by evaluating the userAgent
- fela-plugin-remove-undefined - Removes
undefinedvalues and string values containing
- fela-plugin-unit - Automatically adds units to values if needed
- fela-plugin-validator* - Validates, logs & optionally deletes invalid properties for keyframes and rules
- fela-preset-web - Preset for cross-browser web applications
- fela-preset-dev - Preset for development mode
- fela-beautifier* - Beautifies the rendered CSS markup
renderFontcalls to a separate Renderer instance to prevent refetching
@font-facefiles every time.
- 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-perf* - Logs performance information (time elapsed while rendering)
- fela-statistics* - Collects different metrics to analyze your styles
- cf-ui: Cloudflare UI Framework
- just-box: Create universal layouts in React and React-Native
- kilvin: Primitive React Layout Components
- veel - Base react styling components using fela with a design system
- fela-react-prop: Helps to pass classNames to specific props
- fela-tools: Useful tools for working with Fela
- fela-styles-connector: Simplified react-fela
connectwith auto-bound styles
- aesthetic - React style and theme layer with Fela support
- 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
- 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
- frejya: Pass styles as props to components
- 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.
* Packages are considered dev tools and should therefore not be used in production.