fela - npm Package Compare versions

Comparing version 6.2.2 to 6.2.3

package.json

 {
   "name": "fela",
-  "version": "6.2.2",
+  "version": "6.2.3",
   "description": "State-Driven Styling in JavaScript",
@@ -37,8 +37,8 @@ "typings": "index.d.ts",
     "fast-loops": "^1.0.0",
-    "fela-utils": "^8.1.2",
+    "fela-utils": "^8.1.3",
     "isobject": "^3.0.1"
   },
   "devDependencies": {
-    "fela-tools": "^5.2.2"
+    "fela-tools": "^5.2.3"
   }
 }

README.md

@@ -10,3 +10,3 @@ <h1><img alt="Fela" src="docs/res/logo.png" width="203"/></h1>
 
-<img alt="TravisCI" src="https://travis-ci.org/rofrischmann/fela.svg?branch=master"> <a href="https://codeclimate.com/github/rofrischmann/fela/coverage"><img alt="Test Coverage" src="https://codeclimate.com/github/rofrischmann/fela/badges/coverage.svg"></a> <img alt="npm downloads" src="https://img.shields.io/npm/dm/fela.svg"> <img alt="gzipped size" src="https://img.shields.io/badge/gzipped-~3kb-brightgreen.svg"> <a href="https://gitter.im/rofrischmann/fela"><img alt="Gitter" src="https://img.shields.io/gitter/room/rofrischmann/fela.svg"></a> <a href="#backers"><img alt="Backers on Open Collective" src="https://opencollective.com/fela/backers/badge.svg"></a> <a href="#sponsors"><img alt="Sponsors on Open Collective" src="https://opencollective.com/fela/sponsors/badge.svg"></a>
+<img alt="TravisCI" src="https://travis-ci.org/rofrischmann/fela.svg?branch=master"> <a href="https://codeclimate.com/github/rofrischmann/fela/coverage"><img alt="Test Coverage" src="https://codeclimate.com/github/rofrischmann/fela/badges/coverage.svg"></a> <a href="https://bundlephobia.com/result?p=fela@latest"><img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/fela.svg"></a> <img alt="npm downloads" src="https://img.shields.io/npm/dm/fela.svg"> <a href="https://gitter.im/rofrischmann/fela"><img alt="Gitter" src="https://img.shields.io/gitter/room/rofrischmann/fela.svg"></a>
 
@@ -16,16 +16,2 @@ ## Support Us
 
-Or support us on [**Open Collective**](https://opencollective.com/fela) to fund community work.<br>
-Thank you to all our backers!
-
-<a href="https://opencollective.com/fela/backer/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/0/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/1/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/2/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/3/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/4/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/5/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/6/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/7/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/8/avatar.svg?requireActive=false"></a>
-<a href="https://opencollective.com/fela/backer/9/website?requireActive=false" target="_blank"><img src="https://opencollective.com/fela/backer/9/avatar.svg?requireActive=false"></a>
-
 ## Installation
@@ -38,14 +24,11 @@ ```sh
 ## Benefits
-* High Predictablity
-* Dynamic Styling
+* Predictable Styling
 * Scoped Atomic CSS
-* Dead-Code Elimination
+* No Specificity Issues
+* No Naming Conflicts
 * Framework-Agnostic
 * Huge Ecosystem
-* Component-Based Styling
-* Universal Rendering
-* Many CSS Features
 
 ## The Gist
-Fela's core principle is to consider [style as a function of state](https://medium.com/@rofrischmann/styles-as-functions-of-state-1885627a63f7#.6k6i4kdch).<br>
+Fela's core principle is to consider [style as a function of state](http://fela.js.org/docs/introduction/Principles.html).<br>
 The whole API and all plugins and bindings are built on that idea.<br>
@@ -65,8 +48,7 @@ It is reactive and auto-updates once registered to the DOM.<br>
   // directly use the state to compute style values
-  background: state.primary ? 'green' : 'blue',
-  fontSize: '18pt',
+  fontSize: state.fontSize + 'pt',
   borderRadius: 5,
   // deeply nest media queries and pseudo classes
   ':hover': {
-    background: state.primary ? 'chartreuse' : 'dodgerblue',
+    fontSize: state.fontSize + 2 + 'pt',
     boxShadow: '0 0 2px rgb(70, 70, 70)'
@@ -81,5 +63,5 @@ }
 // maximal style reuse and minimal CSS output
-const className = renderer.renderRule(rule, { 
-  primary: true
-}) // =>  a b c d e f g
+const className = renderer.renderRule(rule, {
+  fontSize: 14
+}) // =>  a b c d e f
 ```
@@ -91,7 +73,6 @@
 .b { padding: 5px 10px }
-.c { background: green }
-.d { font-size: 18pt }
-.e { border-radius: 5px }
-.f:hover { background-color: chartreuse }
-.g:hover { box-shadow: 0 0 2px rgb(70, 70, 70) }
+.c { font-size: 14pt }
+.d { border-radius: 5px }
+.e:hover { font-size: 16pt }
+.f:hover { box-shadow: 0 0 2px rgb(70, 70, 70) }
 ```
@@ -102,3 +83,2 @@
 Using the [React bindings](packages/react-fela), you get powerful APIs to create primitive components.<br>
-If you ever used [styled-components](https://www.styled-components.com), this will look very familiar.
 
@@ -108,14 +88,14 @@ > **Read**: [Usage with React](http://fela.js.org/docs/guides/UsageWithReact.html) for a full guide.
 ```javascript
-import { Fragment } from 'react';
-import { createComponent, Provider } from 'react-fela'
+import { FelaComponent, Provider } from 'react-fela'
 import { render } from 'react-dom'
 
-const rule = props => ({
+const rule = state => ({
   textAlign: 'center',
   padding: '5px 10px',
-  background: props.primary ? 'green' : 'blue',
-  fontSize: '18pt',
+  // directly use the state to compute style values
+  fontSize: state.fontSize + 'pt',
   borderRadius: 5,
+  // deeply nest media queries and pseudo classes
   ':hover': {
-    background: props.primary ? 'chartreuse' : 'dodgerblue',
+    fontSize: state.fontSize + 2 + 'pt',
     boxShadow: '0 0 2px rgb(70, 70, 70)'
@@ -125,10 +105,14 @@ }
 
-const Button = createComponent(rule, 'button')
+const Button = ({ fontSize = 14, children }) => (
+  <FelaComponent rule={rule} fontSize={fontSize}>
+    {children}
+  </FelaComponent>
+)
 
 render(
   <Provider renderer={renderer}>
-    <Fragment>
-      <Button primary>Primary</Button>
-      <Button>Default</Button>
-    </Fragment>
+    <>
+      <Button>Basic Button</Button>
+      <Button fontSize={18}>Big Button</Button>
+    </>
   </Provider>,
@@ -160,2 +144,3 @@ document.body
 * [Migration Guide](http://fela.js.org/docs/MigrationGuide.html)
+* [Changelog](http://fela.js.org/docs/Changelog.html)
 * [FAQ](http://fela.js.org/docs/FAQ.html)
@@ -168,4 +153,7 @@ * [Feedback](http://fela.js.org/docs/Feedback.html)
 
-## Posts & Talks
+## Talks
 * [**CSS in JS: The Good & Bad Parts**](https://www.youtube.com/watch?v=95M-2YzyTno) ([Slides](https://speakerdeck.com/rofrischmann/css-in-js-the-good-and-bad-parts))<br> - *by [Robin Frischmann](https://twitter.com/rofrischmann)*
+* [**CSS in JS: Patterns**](https://www.webexpo.net/prague2018/talk?id=css-in-js-patterns)<br> - *by [Vojtech Miksu](https://twitter.com/vmiksu)*
+
+## Posts
 * [**Style as a Function of State**](https://medium.com/@rofrischmann/styles-as-functions-of-state-1885627a63f7#.6k6i4kdch)<br> - *by [Robin Frischmann](https://twitter.com/rofrischmann)*
@@ -175,3 +163,4 @@ * [**CSS in JS: The Argument Refined**](https://medium.com/@steida/css-in-js-the-argument-refined-471c7eb83955#.3otvkubq4)<br> - *by [Daniel Steigerwald](https://twitter.com/steida)*
 * [**Choosing a CSS in JS library**](https://gist.github.com/troch/c27c6a8cc47b76755d848c6d1204fdaf#file-choosing-a-css-in-js-library-md)<br> - *by [Thomas Roch](https://twitter.com/tcroch)*
-* [**Introducing Fela 6.0**](https://medium.com/@rofrischmann/introducing-fela-6-0-289c84b52dd5)<br> - *by [Robin Frischmann](https://twitter.com/rofrischmann)*
+* [**Introducing Fela 6.0**](https://medium.com/felajs/the-future-of-fela-d4dad2efad00)<br> - *by [Robin Frischmann](https://twitter.com/rofrischmann)*
+* [**The Future of Fela**](https://medium.com/@rofrischmann/introducing-fela-6-0-289c84b52dd5)<br> - *by [Robin Frischmann](https://twitter.com/rofrischmann)*
 
@@ -194,3 +183,2 @@ ## Ecosystem
 * [dogstack](https://github.com/root-systems/dogstack) - A popular-choice grab-bag framework for teams working on production web apps
-* [este](https://github.com/este/este) - Starter kit for universal full–fledged React apps build with Fela
 * [fela-components](https://github.com/arturmuller/fela-components) - Styling library for React and Fela
@@ -218,3 +206,4 @@ * [fela-react-helpers](https://github.com/vlad-zhukov/fela-react-helpers) - A set of useful helpers for Fela
 Got a question? Come and join us on [Gitter](https://gitter.im/rofrischmann/fela)! <br>
-We'd love to help out. We also highly appreciate any feedback.
+We'd love to help out. We also highly appreciate any feedback.<br>
+Don't want to miss any update? Follow us on [Twitter](https://twitter.com/felajs).
 
@@ -244,2 +233,3 @@ ## Who's using Fela?
 - [V2](https://www.v2.com)
+- [Volvo Cars](https://www.volvocars.com)
 - [Zendesk](https://www.zendesk.com)
@@ -246,0 +236,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of downloads

53989

increased by1.94%

Worsened metrics

Total package byte prevSize

63023

decreased by-53.26%

Lines of code

1119

decreased by-30.67%

Number of lines in readme file

235

decreased by-4.08%

Dependency changes

• Updatedfela-utils@^8.1.3