Gathering detailed insights and metrics for fela
Gathering detailed insights and metrics for fela
Installations
npm install felaDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
16.17.1
NPM Version
lerna/4.0.0/node@v16.17.1+arm64 (darwin)
Releases
12
Languages
5
JavaScript
MDX
HTML
Reason
CSS
JavaScript (71.17%)
MDX (15.06%)
HTML (13.58%)
Reason (0.16%)
CSS (0.03%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
2,283 Stars
2,249 Commits
183 Forks
20 Watchers
4 Branches
128 Contributors
Updated on Jul 16, 2025
Maintainers
2
Package Meta Information
Latest Version
12.2.1
Package Id
fela@12.2.1
Unpacked Size
93.60 kB
Size
21.55 kB
File Count
49
NPM Version
lerna/4.0.0/node@v16.17.1+arm64 (darwin)
Node Version
16.17.1
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
5
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.
Support Us
Support Robin Weser's work on Fela and its ecosystem directly via GitHub Sponsors.
Benefits
- Predictable Styling
- Scoped Atomic CSS
- Minimal Bundle Size
- No Specificity Issues
- No Naming Conflicts
- Framework-Agnostic
- Huge Ecosystem
- RTL 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.
1import { createRenderer } from 'fela' 2 3// a simple style rule is a pure function of state 4// that returns an object of style declarations 5const rule = (state) => ({ 6 textAlign: 'center', 7 padding: '5px 10px', 8 // directly use the state to compute style values 9 fontSize: state.fontSize + 'pt', 10 borderRadius: 5, 11 // deeply nest media queries and pseudo classes 12 ':hover': { 13 fontSize: state.fontSize + 2 + 'pt', 14 boxShadow: '0 0 2px rgb(70, 70, 70)', 15 }, 16}) 17 18const renderer = createRenderer() 19 20// fela generates atomic CSS classes in order to achieve 21// maximal style reuse and minimal CSS output 22const className = renderer.renderRule(rule, { 23 fontSize: 14, 24}) // => a b c d e f
The generated CSS output would look like this:
1.a { text-align: center } 2.b { padding: 5px 10px } 3.c { font-size: 14pt } 4.d { border-radius: 5px } 5.e:hover { font-size: 16pt } 6.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.
1import * as React from 'react' 2import { useFela } from 'react-fela' 3 4const rule = ({ fontSize }) => ({ 5 textAlign: 'center', 6 padding: '5px 10px', 7 // directly use the props to compute style values 8 fontSize: fontSize + 'pt', 9 borderRadius: 5, 10 ':hover': { 11 fontSize: fontSize + 2 + 'pt', 12 boxShadow: '0 0 2px rgb(70, 70, 70)', 13 }, 14}) 15 16function Button({ fontSize, children }) { 17 const { css } = useFela({ fontSize }) 18 19 return <button className={css(rule)}>{children}</button> 20}
Check this example on CodeSandbox
Examples
- Fela + React (source)
- Fela + Preact (source)
- Fela + Inferno (source)
- Fela + HyperScript
- Fela + Cycle
- Fela + Next.js
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
- Style as a Function of State
- by Robin Weser - CSS in JS: The Argument Refined
- by Daniel Steigerwald - What is Fela?
- by David Sinclair - Choosing a CSS in JS library
- by Thomas Roch - Introducing Fela 6.0
- by Robin Weser - A journey into CSS and then into CSS-in-JS
- by Prithvi Raju - CSS In JS — Future of styling components
- by Manjula Dube - Styling Components with React Fela
- by Josh Sherman - The Future of Fela
- by Robin Weser
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
- bs-react-fela - BuckleScript / ReasonReact bindings for Fela
- catstack - A modular mad science framework for teams working on production web apps
- css-in-js-playground - A simple playground for CSS in JS solutions
- cf-ui - Cloudflare UI Framework
- counter-component-with-react-mobx-fela - Counter Component using Fela
- cycle-fela - Cycle bindings for Fela
- dogstack - A popular-choice grab-bag framework for teams working on production web apps
- 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
connectwith auto-bound styles - frejya: Pass styles as props to components
- gatsby-plugin-fela - Integrates fela with Gatsby
- hyper-fela - HyperScript bindings for Fela
- htz-frontend - Source for Haaretz frontend app(s)
- kilvin - Primitive React Layout Components with Fela
- olymp - Create and build a next gen app using node, react, cssInJS and other cool stuff
- preact-fela-simple - Super simple Preact bindings for Fela
- reason-react-starter - A ReasonReact starter kit using Fela
- storybook-addon-props-fela: Document the props of your Fela components in storybook.
- superslider - Slider Component using Fela
- 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
- black-box - combines behavior, presentation, structure in one place & creates all-in-one components using only JS syntax
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
- abilis
- Bookmyshow
- BdP LV RPS
- Cloudflare
- dm-drogerie markt
- dmTECH
- Espressive
- Gazzer
- HelloFresh
- Indoqa
- Kilix
- Lusk
- MediaFire
- Medium
- Microsoft
- N26
- Net-A-Porter
- NinjaConcept
- Optisure
- Robin Weser
- Rocket Station
- Root Systems
- Space Between
- V2
- Volvo Cars
- Zendesk
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 Commons License.
Created with ♥ by @robinweser and all the great contributors.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
binaries present in source code
Details
- Warn: binary detected: examples/example-react-native/android/gradle/wrapper/gradle-wrapper.jar:1
Reason
Found 15/30 approved changesets -- score normalized to 5
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/push.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/robinweser/fela/push.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/robinweser/fela/push.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/push.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/robinweser/fela/push.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/push.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/robinweser/fela/push.yml/master?enable=pin
- Info: 0 out of 3 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 17 are checked with a SAST tool
Reason
115 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
- Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-j4mr-9xw3-c9jx
- Warn: Project is vulnerable to: GHSA-7p89-p6hx-q4fw
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-36jr-mh4h-2g58
- Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-3q56-9cc2-46j4
- Warn: Project is vulnerable to: GHSA-9qj9-36jm-prpv
- Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
- Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
- Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-wrvr-8mpx-r7pp
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
- Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
- Warn: Project is vulnerable to: GHSA-gwg9-rgvj-4h5j
- Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-7mc5-chhp-fmc3
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
- Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
- Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
- Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
- Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-3949-f494-cm99
- Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
- Warn: Project is vulnerable to: GHSA-gqgv-6jq5-jjj9
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-5v72-xg48-5rpm
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
- Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
- Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
3.2
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More