\r\n\r\nFela is a small, high-performant and framework-agnostic toolbelt to handle state-driven styling in JavaScript. \r\nIt is dynamic by design and renders your styles depending on your application state.\r\n\r\nIt 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](packages/fela-plugin-prefixer) or [fallback value](packages/fela-plugin-fallback-value) support.\r\n\r\nFela can be used with [React](https://github.com/robinweser/fela/tree/master/packages/react-fela) or with any other view library. It even supports [React Native](http://fela.js.org/docs/guides/UsageWithReactNative.html).\r\n\r\n\r\n\r\n## Support Us\r\nSupport Robin Weser's work on Fela and its ecosystem directly via [**Patreon**](https://www.patreon.com/robinweser).\r\n\r\n## Installation\r\n```sh\r\nyarn add fela\r\n```\r\nYou may alternatively use `npm i --save fela`.\r\n\r\n## Benefits\r\n* Predictable Styling\r\n* Scoped Atomic CSS\r\n* Minimal Bundle Size\r\n* No Specificity Issues\r\n* No Naming Conflicts\r\n* Framework-Agnostic\r\n* Huge Ecosystem\r\n* RTL Support\r\n\r\n## The Gist\r\nFela's core principle is to consider [style as a function of state](http://fela.js.org/docs/introduction/Principles.html). \r\nThe whole API and all plugins and bindings are built on that idea. \r\nIt is reactive and auto-updates once registered to the DOM. \r\n\r\nThe following example illustrates the key parts of Fela though it only shows the very basics.\r\n\r\n```javascript\r\nimport { createRenderer } from 'fela'\r\n\r\n// a simple style rule is a pure function of state\r\n// that returns an object of style declarations\r\nconst rule = state => ({\r\n textAlign: 'center',\r\n padding: '5px 10px',\r\n // directly use the state to compute style values\r\n fontSize: state.fontSize + 'pt',\r\n borderRadius: 5,\r\n // deeply nest media queries and pseudo classes\r\n ':hover': {\r\n fontSize: state.fontSize + 2 + 'pt',\r\n boxShadow: '0 0 2px rgb(70, 70, 70)'\r\n }\r\n})\r\n\r\n\r\nconst renderer = createRenderer()\r\n\r\n// fela generates atomic CSS classes in order to achieve\r\n// maximal style reuse and minimal CSS output\r\nconst className = renderer.renderRule(rule, {\r\n fontSize: 14\r\n}) // => a b c d e f\r\n```\r\n\r\nThe generated CSS output would look like this:\r\n```CSS\r\n.a { text-align: center }\r\n.b { padding: 5px 10px }\r\n.c { font-size: 14pt }\r\n.d { border-radius: 5px }\r\n.e:hover { font-size: 16pt }\r\n.f:hover { box-shadow: 0 0 2px rgb(70, 70, 70) }\r\n```\r\n\r\n### Primitive Components\r\nIf you're using Fela, you're most likely also using React. \r\nUsing the [React bindings](packages/react-fela), you get powerful APIs to create primitive components. \r\n\r\n> **Read**: [Usage with React](http://fela.js.org/docs/guides/UsageWithReact.html) for a full guide.\r\n\r\n```javascript\r\nimport React from 'react'\r\nimport { RendererProvider, useFela } from 'react-fela'\r\nimport { createRenderer } from 'fela';\r\nimport { render } from 'react-dom'\r\n\r\nconst rule = state => ({\r\n textAlign: 'center',\r\n padding: '5px 10px',\r\n // directly use the state to compute style values\r\n fontSize: state.fontSize + 'pt',\r\n borderRadius: 5,\r\n // deeply nest media queries and pseudo classes\r\n ':hover': {\r\n fontSize: state.fontSize + 2 + 'pt',\r\n boxShadow: '0 0 2px rgb(70, 70, 70)'\r\n }\r\n})\r\n\r\nconst Button = ({ children, ...props }) => {\r\n const { css } = useFela(props)\r\n \r\n return ;\r\n}\r\n\r\nconst renderer = createRenderer()\r\n\r\nrender(\r\n \r\n <>\r\n \r\n \r\n \r\n ,\r\n document.body\r\n)\r\n```\r\n\r\n> Check this example on [CodeSandbox](https://codesandbox.io/s/fela-demo-7tsj5)\r\n\r\n## Examples\r\n* [Fela + React](http://fela.js.org/docs/introduction/Examples.html#react) ([source](examples/example-react))\r\n * [React Styleguidist](http://fela.js.org/docs/introduction/Examples.html#styleguidist) ([source](examples/example-with-styleguidist))\r\n * [React Native](http://fela.js.org/docs/introduction/Examples.html#react-native) ([source](examples/example-react-native))\r\n * [ReasonReact](https://github.com/astrada/bs-react-fela-examples)\r\n * [Next](https://github.com/zeit/next.js/tree/master/examples/with-fela)\r\n* [Fela + Preact](http://fela.js.org/docs/introduction/Examples.html#preact) ([source](examples/example-preact))\r\n* [Fela + Inferno](http://fela.js.org/docs/introduction/Examples.html#inferno) ([source](examples/example-inferno))\r\n* [Fela + Angular 2](http://fela.js.org/docs/introduction/Examples.html#angular-2) ([source](examples/example-angular2))\r\n * [TypeScript](http://fela.js.org/docs/introduction/Examples.html#typescript) ([source](examples/example-angular2-typescript))\r\n* [Fela + HyperScript](https://github.com/ahdinosaur/hyper-fela#example)\r\n* [Fela + Cycle](https://github.com/wcastand/cycle-fela-example)\r\n* [Fela + Next.js](https://github.com/vercel/next.js/tree/master/examples/with-fela)\r\n\r\n## Documentation\r\n* [Introduction](http://fela.js.org/docs/Introduction.html)\r\n* [Basics](http://fela.js.org/docs/Basics.html)\r\n* [Advanced](http://fela.js.org/docs/Advanced.html)\r\n* [Usage Guides](http://fela.js.org/docs/UsageGuides.html)\r\n* [Recipes](http://fela.js.org/docs/Recipes.html)\r\n* [API Reference](http://fela.js.org/docs/API.html)\r\n* [Migration Guide](http://fela.js.org/docs/MigrationGuide.html)\r\n* [Changelog](http://fela.js.org/docs/Changelog.html)\r\n* [FAQ](http://fela.js.org/docs/FAQ.html)\r\n* [Feedback](http://fela.js.org/docs/Feedback.html)\r\n* [Thanks](http://fela.js.org/docs/Thanks.html)\r\n\r\n## Workshop\r\nIf you are coming from CSS and want to learn JavaScript Styling with Fela, there is a full-feature [fela-workshop](https://github.com/tajo/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.\r\n\r\n## Talks\r\n* [**CSS in JS: The Good & Bad Parts**](https://www.youtube.com/watch?v=95M-2YzyTno) ([Slides](https://speakerdeck.com/robinweser/css-in-js-the-good-and-bad-parts)) - *by [Robin Weser](https://twitter.com/robinweser)*\r\n* [**CSS in JS: Patterns**](https://www.webexpo.net/prague2018/talk?id=css-in-js-patterns) - *by [Vojtech Miksu](https://twitter.com/vmiksu)*\r\n\r\n## Posts\r\n* [**Style as a Function of State**](https://medium.com/@robinweser/styles-as-functions-of-state-1885627a63f7#.6k6i4kdch) - *by [Robin Weser](https://twitter.com/robinweser)*\r\n* [**CSS in JS: The Argument Refined**](https://medium.com/@steida/css-in-js-the-argument-refined-471c7eb83955#.3otvkubq4) - *by [Daniel Steigerwald](https://twitter.com/steida)*\r\n* [**What is Fela?**](https://davidsinclair.io/thoughts/what-is-fela) - *by [David Sinclair](https://davidsinclair.io)*\r\n* [**Choosing a CSS in JS library**](https://gist.github.com/troch/c27c6a8cc47b76755d848c6d1204fdaf#file-choosing-a-css-in-js-library-md) - *by [Thomas Roch](https://twitter.com/tcroch)*\r\n* [**Introducing Fela 6.0**](https://medium.com/felajs/the-future-of-fela-d4dad2efad00) - *by [Robin Weser](https://twitter.com/robinweser)*\r\n* [**A journey into CSS and then into CSS-in-JS**](https://www.zeolearn.com/magazine/a-journey-into-css-and-then-into-css-in-js) - *by [Prithvi Raju](https://twitter.com/aga5tya)*\r\n* [**CSS In JS — Future of styling components**](https://we-are.bookmyshow.com/css-in-js-future-of-styling-components-ad315eb5448b) - *by [Manjula Dube](https://twitter.com/manjula_dube)*\r\n* [**Styling Components with React Fela**](https://alligator.io/react/styling-with-react-fela/) - *by [Josh Sherman](https://twitter.com/joshtronic)*\r\n* [**The Future of Fela**](https://medium.com/@robinweser/introducing-fela-6-0-289c84b52dd5) - *by [Robin Weser](https://twitter.com/robinweser)*\r\n\r\n## Ecosystem\r\nThere 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](http://fela.js.org/docs/introduction/Ecosystem.html) documentation for a quick overview.\r\n\r\n\r\n## Community\r\nApart from all the packages managed within this repository, there are many community third-party projects that are worth mentioning:\r\n\r\n* [aesthetic](https://github.com/milesj/aesthetic) - React style and theme layer with Fela support\r\n* [base-styling-components](https://github.com/pitr12/base-styling-components) - Abstract Box and Text Components\r\n* [bs-react-fela](https://github.com/astrada/bs-react-fela) - BuckleScript / ReasonReact bindings for Fela\r\n* [catstack](https://github.com/root-systems/catstack) - A modular mad science framework for teams working on production web apps\r\n* [css-in-js-playground](https://github.com/DSchau/css-in-js-playground) - A simple playground for CSS in JS solutions\r\n* [cf-ui](https://github.com/cloudflare/cf-ui) - Cloudflare UI Framework\r\n* [counter-component-with-react-mobx-fela](https://github.com/Mercateo/counter-component-with-react-mobx-fela) - Counter Component using Fela\r\n* [cycle-fela](https://github.com/wcastand/cycle-fela) - Cycle bindings for Fela\r\n* [dogstack](https://github.com/root-systems/dogstack) - A popular-choice grab-bag framework for teams working on production web apps\r\n* [fela-components](https://github.com/arturmuller/fela-components) - Styling library for React and Fela\r\n* [fela-react-helpers](https://github.com/vlad-zhukov/fela-react-helpers) - A set of useful helpers for Fela\r\n* [fela-react-prop](https://github.com/codepunkt/fela-react-prop) - Generate class names for fela style rule and apply them as property on a wrapped component\r\n* [fela-styles-connector](https://github.com/dustin-H/fela-styles-connector) - Simplified react-fela `connect` with auto-bound styles\r\n* [frejya](https://github.com/benoneal/freyja): Pass styles as props to components\r\n* [gatsby-plugin-fela](https://github.com/mmintel/gatsby-plugin-fela) - Integrates fela with [Gatsby](http://gatsbyjs.org)\r\n* [hyper-fela](https://github.com/ahdinosaur/hyper-fela) - HyperScript bindings for Fela\r\n* [htz-frontend](https://github.com/Haaretz/htz-frontend) - Source for Haaretz frontend app(s)\r\n* [kilvin](https://github.com/robinweser/kilvin) - Primitive React Layout Components with Fela\r\n* [olymp](https://github.com/olymp/olymp) - Create and build a next gen app using node, react, cssInJS and other cool stuff\r\n* [preact-fela-simple](https://github.com/pshev/preact-fela-simple) - Super simple Preact bindings for Fela\r\n* [reason-react-starter](https://github.com/drejohnson/reason-react-starter) - A ReasonReact starter kit using Fela\r\n* [storybook-addon-props-fela](https://github.com/Kilix/storybook-addon-props-fela): Document the props of your Fela components in storybook.\r\n* [superslider](https://github.com/adamgiacomelli/superslider) - Slider Component using Fela\r\n* [telaviv](https://github.com/dustin-H/telaviv) - React Universal Rendering\r\n* [vashet](https://github.com/derHowie/vashet) - ClojureScript wrapper for Fela\r\n* [veel](https://github.com/queckezz/veel) - Base react styling components using fela with a design system\r\n* [vue-fela](https://github.com/dustin-H/vue-fela) - Vue bindings for Fela\r\n* [black-box](https://github.com/rocketstation/black-box) - combines behavior, presentation, structure in one place & creates all-in-one components using only JS syntax\r\n\r\n## Support\r\nGot a question? Come and join us on [Spectrum](https://spectrum.chat/fela)! \r\nWe'd love to help out. We also highly appreciate any feedback. \r\nDon't want to miss any update? Follow us on [Twitter](https://twitter.com/felajs).\r\n\r\n## Who's using Fela?\r\n\r\n> Your company is using Fela, but is not listed yet? [Add your company / organisation](https://github.com/robinweser/fela/edit/master/README.md#L121)\r\n\r\n- [abilis](https://www.abilis.de)\r\n- [Bookmyshow](https://in.bookmyshow.com/events)\r\n- [BdP LV RPS](http://www.bdp-rps.de)\r\n- [Cloudflare](https://www.cloudflare.com)\r\n- [dm-drogerie markt](https://www.dm.de)\r\n- [dmTECH](https://www.dmtech.de)\r\n- [Espressive](https://www.espressive.com)\r\n- [Gazzer](https://www.gazzer.io)\r\n- [HelloFresh](https://www.hellofresh.de)\r\n- [Indoqa](https://www.indoqa.com)\r\n- [Kilix](http://kilix.fr)\r\n- [Lusk](https://lusk.io)\r\n- [MediaFire](https://m.mediafire.com)\r\n- [Medium](https://medium.com)\r\n- [Microsoft](https://microsoft.com)\r\n- [N26](https://n26.com)\r\n- [Net-A-Porter](https://www.net-a-porter.com/gb/en/porter)\r\n- [NinjaConcept](https://www.ninjaconcept.com)\r\n- [Optisure](https://www.optisure.de)\r\n- [Robin Weser](http://weser.io)\r\n- [Rocket Station](http://rstation.io)\r\n- [Root Systems](https://www.rootsystems.nz)\r\n- [Space Between](https://www.spacebetween.co.uk/)\r\n- [V2](https://www.v2.com)\r\n- [Volvo Cars](https://www.volvocars.com)\r\n- [Zendesk](https://www.zendesk.com)\r\n\r\n## Contributing\r\n\r\nThis project exists thanks to all the people who contribute.\r\n\r\nWe highly appreciate any contribution. \r\nFor more information follow the [contribution guide](.github/CONTRIBUTING.md). \r\nAlso, please read our [code of conduct](.github/CODE_OF_CONDUCT.md).\r\n\r\n## License\r\nFela is licensed under the [MIT License](http://opensource.org/licenses/MIT). \r\nDocumentation is licensed under [Creative Commons License](http://creativecommons.org/licenses/by/4.0/). \r\nCreated with ♥ by [@robinweser](http://weser.io) and all the great contributors.\r\n","gitHead":"6d457d39e69e1471bddaea8591c50745f95070d9","license":"MIT","scripts":{"build:umd":"webpack --config webpack.config.js"},"typings":"index.d.ts","_npmUser":{"name":"rofrischmann","email":"robin@weser.io"},"homepage":"https://github.com/robinweser/fela#readme","keywords":["fela","dynamic styling","stylesheet","css","styling","functional styling","functional css","atomic css","state-driven","atomic design","state-driven styling","cssinjs"],"repository":{"url":"git+https://github.com/robinweser/fela.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.18.3+x64 (darwin)","description":"State-Driven Styling in JavaScript","directories":{},"jsnext:main":"es/index.js","maintainers":[{"name":"rofrischmann","email":"robin@weser.io"},{"name":"txhawks","email":"tofu.hawks@gmail.com"}],"sideEffects":false,"_nodeVersion":"12.18.3","dependencies":{"csstype":"^2.5.5","isobject":"^3.0.1","fast-loops":"^1.0.0","fela-utils":"^11.5.0-rc.0","css-in-js-utils":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/fela_11.5.0-rc.0_1607423148231_0.8701490316396576","host":"s3://npm-registry-packages"},"_id":"fela@11.5.0-rc.0","version":"11.5.0-rc.0"}
![\"Fela\"](\"docs/res/logo.png\"){kind=logo}
![\"Bundlephobia\"](\"https://img.shields.io/bundlephobia/minzip/fela.svg\")
![\"npm](\"https://img.shields.io/npm/dm/fela.svg\")
![\"Spectrum\"](\"https://img.shields.io/badge/support-spectrum-brightgreen.svg\"){kind=icon}
\r\n\r\n## Support Us\r\nSupport Robin Weser's work on Fela and its ecosystem directly via [**Patreon**](https://www.patreon.com/robinweser).\r\n\r\n## Installation\r\n```sh\r\nyarn add fela\r\n```\r\nYou may alternatively use `npm i --save fela`.\r\n\r\n## Benefits\r\n* Predictable Styling\r\n* Scoped Atomic CSS\r\n* Minimal Bundle Size\r\n* No Specificity Issues\r\n* No Naming Conflicts\r\n* Framework-Agnostic\r\n* Huge Ecosystem\r\n* RTL Support\r\n\r\n## The Gist\r\nFela's core principle is to consider [style as a function of state](http://fela.js.org/docs/introduction/Principles.html).