fela - npm Package Compare versions

Comparing version 6.0.5 to 6.1.0

es/combineRules.js

@@ -1,2 +0,2 @@
-import { arrayReduce } from 'fela-utils';
+import reduce from 'lodash/reduce';
 import assignStyle from 'css-in-js-utils/lib/assignStyle';
@@ -12,3 +12,3 @@
 
-    return arrayReduce(rules, function (style, rule) {
+    return reduce(rules, function (style, rule) {
       return merge(style, rule(props, renderer));
@@ -15,0 +15,0 @@ }, {});

es/createRenderer.js

@@ -7,5 +7,18 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 import assignStyle from 'css-in-js-utils/lib/assignStyle';
+import isPlainObject from 'lodash/isPlainObject';
+import forEach from 'lodash/forEach';
 
-import { cssifyFontFace, cssifyKeyframe, cssifyStaticStyle, generateAnimationName, generateClassName, generateCombinedMediaQuery, generateCSSRule, generateCSSSelector, generateStaticReference, isMediaQuery, isNestedSelector, isUndefinedValue, isObject, isSafeClassName, isSupport, normalizeNestedProperty, processStyleWithPlugins, toCSSString, checkFontFormat, checkFontUrl, arrayEach, STATIC_TYPE, RULE_TYPE, KEYFRAME_TYPE, FONT_TYPE, CLEAR_TYPE } from 'fela-utils';
+import { generateCombinedMediaQuery, generateCSSRule, generateCSSSelector, isMediaQuery, isNestedSelector, isUndefinedValue, isSupport, normalizeNestedProperty, processStyleWithPlugins, STATIC_TYPE, RULE_TYPE, KEYFRAME_TYPE, FONT_TYPE, CLEAR_TYPE } from 'fela-utils';
 
+import cssifyFontFace from './cssifyFontFace';
+import cssifyKeyframe from './cssifyKeyframe';
+import cssifyStaticStyle from './cssifyStaticStyle';
+import generateAnimationName from './generateAnimationName';
+import generateClassName from './generateClassName';
+import generateStaticReference from './generateStaticReference';
+import getFontFormat from './getFontFormat';
+import getFontUrl from './getFontUrl';
+import isSafeClassName from './isSafeClassName';
+import toCSSString from './toCSSString';
+
 export default function createRenderer() {
@@ -19,2 +32,3 @@ var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     mediaQueryOrder: config.mediaQueryOrder || [],
+    supportQueryOrder: config.supportQueryOrder || [],
     selectorPrefix: config.selectorPrefix || '',
@@ -82,5 +96,5 @@
           src: '' + fontLocals.reduce(function (agg, local) {
-            return agg += ' local(' + checkFontUrl(local) + '), ';
+            return agg += ' local(' + getFontUrl(local) + '), ';
           }, '') + files.map(function (src) {
-            return 'url(' + checkFontUrl(src) + ') format(\'' + checkFontFormat(src) + '\')';
+            return 'url(' + getFontUrl(src) + ') format(\'' + getFontFormat(src) + '\')';
           }).join(','),
@@ -156,3 +170,3 @@ fontFamily: fontFamily
         // TODO: this whole part could be trimmed
-        if (isObject(value)) {
+        if (isPlainObject(value)) {
           if (isNestedSelector(property)) {
@@ -213,3 +227,3 @@ classNames += renderer._renderStyleToClassNames(value, pseudo + normalizeNestedProperty(property), media, support);
     _emitChange: function _emitChange(change) {
-      arrayEach(renderer.listeners, function (listener) {
+      forEach(renderer.listeners, function (listener) {
         return listener(change);
@@ -224,3 +238,3 @@ });
   if (config.enhancers) {
-    arrayEach(config.enhancers, function (enhancer) {
+    forEach(config.enhancers, function (enhancer) {
       renderer = enhancer(renderer);
@@ -227,0 +241,0 @@ });

es/enhance.js

@@ -1,2 +0,2 @@
-import { arrayReduce } from 'fela-utils';
+import reduce from 'lodash/reduce';
 
@@ -10,3 +10,3 @@ export default function enhance() {
     return function (config) {
-      return arrayReduce(enhancers, function (enhancedRenderer, enhancer) {
+      return reduce(enhancers, function (enhancedRenderer, enhancer) {
         enhancedRenderer = enhancer(enhancedRenderer);
@@ -13,0 +13,0 @@ return enhancedRenderer;

lib/combineRules.js

@@ -8,4 +8,6 @@ 'use strict';
 
-var _felaUtils = require('fela-utils');
+var _reduce = require('lodash/reduce');
 
+var _reduce2 = _interopRequireDefault(_reduce);
+
 var _assignStyle = require('css-in-js-utils/lib/assignStyle');
@@ -25,3 +27,3 @@
 
-    return (0, _felaUtils.arrayReduce)(rules, function (style, rule) {
+    return (0, _reduce2.default)(rules, function (style, rule) {
       return merge(style, rule(props, renderer));
@@ -28,0 +30,0 @@ }, {});

lib/createRenderer.js

@@ -19,4 +19,52 @@ 'use strict';
 
+var _isPlainObject = require('lodash/isPlainObject');
+
+var _isPlainObject2 = _interopRequireDefault(_isPlainObject);
+
+var _forEach = require('lodash/forEach');
+
+var _forEach2 = _interopRequireDefault(_forEach);
+
 var _felaUtils = require('fela-utils');
 
+var _cssifyFontFace = require('./cssifyFontFace');
+
+var _cssifyFontFace2 = _interopRequireDefault(_cssifyFontFace);
+
+var _cssifyKeyframe = require('./cssifyKeyframe');
+
+var _cssifyKeyframe2 = _interopRequireDefault(_cssifyKeyframe);
+
+var _cssifyStaticStyle = require('./cssifyStaticStyle');
+
+var _cssifyStaticStyle2 = _interopRequireDefault(_cssifyStaticStyle);
+
+var _generateAnimationName = require('./generateAnimationName');
+
+var _generateAnimationName2 = _interopRequireDefault(_generateAnimationName);
+
+var _generateClassName = require('./generateClassName');
+
+var _generateClassName2 = _interopRequireDefault(_generateClassName);
+
+var _generateStaticReference = require('./generateStaticReference');
+
+var _generateStaticReference2 = _interopRequireDefault(_generateStaticReference);
+
+var _getFontFormat = require('./getFontFormat');
+
+var _getFontFormat2 = _interopRequireDefault(_getFontFormat);
+
+var _getFontUrl = require('./getFontUrl');
+
+var _getFontUrl2 = _interopRequireDefault(_getFontUrl);
+
+var _isSafeClassName = require('./isSafeClassName');
+
+var _isSafeClassName2 = _interopRequireDefault(_isSafeClassName);
+
+var _toCSSString = require('./toCSSString');
+
+var _toCSSString2 = _interopRequireDefault(_toCSSString);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -34,5 +82,6 @@
     mediaQueryOrder: config.mediaQueryOrder || [],
+    supportQueryOrder: config.supportQueryOrder || [],
     selectorPrefix: config.selectorPrefix || '',
 
-    filterClassName: config.filterClassName || _felaUtils.isSafeClassName,
+    filterClassName: config.filterClassName || _isSafeClassName2.default,
 
@@ -64,7 +113,7 @@ uniqueRuleIdentifier: 0,
         // use another unique identifier to ensure minimal css markup
-        var animationName = (0, _felaUtils.generateAnimationName)(++renderer.uniqueKeyframeIdentifier);
+        var animationName = (0, _generateAnimationName2.default)(++renderer.uniqueKeyframeIdentifier);
 
         var processedKeyframe = (0, _felaUtils.processStyleWithPlugins)(renderer, resolvedKeyframe, _felaUtils.KEYFRAME_TYPE, props);
 
-        var cssKeyframe = (0, _felaUtils.cssifyKeyframe)(processedKeyframe, animationName, renderer.keyframePrefixes);
+        var cssKeyframe = (0, _cssifyKeyframe2.default)(processedKeyframe, animationName, renderer.keyframePrefixes);
 
@@ -90,3 +139,3 @@ var change = {
       if (!renderer.cache.hasOwnProperty(fontReference)) {
-        var fontFamily = (0, _felaUtils.toCSSString)(family);
+        var fontFamily = (0, _toCSSString2.default)(family);
 
@@ -99,5 +148,5 @@ // remove the localAlias since we extraced the needed info
           src: '' + fontLocals.reduce(function (agg, local) {
-            return agg += ' local(' + (0, _felaUtils.checkFontUrl)(local) + '), ';
+            return agg += ' local(' + (0, _getFontUrl2.default)(local) + '), ';
           }, '') + files.map(function (src) {
-            return 'url(' + (0, _felaUtils.checkFontUrl)(src) + ') format(\'' + (0, _felaUtils.checkFontFormat)(src) + '\')';
+            return 'url(' + (0, _getFontUrl2.default)(src) + ') format(\'' + (0, _getFontFormat2.default)(src) + '\')';
           }).join(','),
@@ -107,3 +156,3 @@ fontFamily: fontFamily
 
-        var cssFontFace = (0, _felaUtils.cssifyFontFace)(fontFace);
+        var cssFontFace = (0, _cssifyFontFace2.default)(fontFace);
 
@@ -123,6 +172,6 @@ var change = {
     renderStatic: function renderStatic(staticStyle, selector) {
-      var staticReference = (0, _felaUtils.generateStaticReference)(staticStyle, selector);
+      var staticReference = (0, _generateStaticReference2.default)(staticStyle, selector);
 
       if (!renderer.cache.hasOwnProperty(staticReference)) {
-        var cssDeclarations = (0, _felaUtils.cssifyStaticStyle)(staticStyle, renderer);
+        var cssDeclarations = (0, _cssifyStaticStyle2.default)(staticStyle, renderer);
 
@@ -175,3 +224,3 @@ var change = {
         // TODO: this whole part could be trimmed
-        if ((0, _felaUtils.isObject)(value)) {
+        if ((0, _isPlainObject2.default)(value)) {
           if ((0, _felaUtils.isNestedSelector)(property)) {
@@ -202,3 +251,3 @@ classNames += renderer._renderStyleToClassNames(value, pseudo + (0, _felaUtils.normalizeNestedProperty)(property), media, support);
 
-            var className = renderer.selectorPrefix + (0, _felaUtils.generateClassName)(renderer.getNextRuleIdentifier, renderer.filterClassName);
+            var className = renderer.selectorPrefix + (0, _generateClassName2.default)(renderer.getNextRuleIdentifier, renderer.filterClassName);
 
@@ -233,3 +282,3 @@ var declaration = (0, _cssifyDeclaration2.default)(property, value);
     _emitChange: function _emitChange(change) {
-      (0, _felaUtils.arrayEach)(renderer.listeners, function (listener) {
+      (0, _forEach2.default)(renderer.listeners, function (listener) {
         return listener(change);
@@ -244,3 +293,3 @@ });
   if (config.enhancers) {
-    (0, _felaUtils.arrayEach)(config.enhancers, function (enhancer) {
+    (0, _forEach2.default)(config.enhancers, function (enhancer) {
       renderer = enhancer(renderer);
@@ -247,0 +296,0 @@ });

lib/enhance.js

@@ -8,4 +8,8 @@ 'use strict';
 
-var _felaUtils = require('fela-utils');
+var _reduce = require('lodash/reduce');
 
+var _reduce2 = _interopRequireDefault(_reduce);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function enhance() {
@@ -18,3 +22,3 @@ for (var _len = arguments.length, enhancers = Array(_len), _key = 0; _key < _len; _key++) {
     return function (config) {
-      return (0, _felaUtils.arrayReduce)(enhancers, function (enhancedRenderer, enhancer) {
+      return (0, _reduce2.default)(enhancers, function (enhancedRenderer, enhancer) {
         enhancedRenderer = enhancer(enhancedRenderer);
@@ -21,0 +25,0 @@ return enhancedRenderer;

package.json

 {
   "name": "fela",
-  "version": "6.0.5",
-  "description": "Style as a Function of State",
+  "version": "6.1.0",
+  "description": "State-Driven Styling in JavaScript",
   "typings": "index.d.ts",
@@ -26,3 +26,5 @@ "main": "lib/index.js",
     "atomic css",
+    "state-driven",
     "atomic design",
+    "state-driven styling",
     "cssinjs"
@@ -34,7 +36,8 @@ ],
     "css-in-js-utils": "2.0.0",
-    "fela-utils": "^7.0.5"
+    "fela-utils": "^8.0.0",
+    "lodash": "^4.17.4"
   },
   "devDependencies": {
-    "fela-tools": "^5.0.13"
+    "fela-tools": "^5.0.14"
   }
 }

README.md

@@ -49,5 +49,5 @@ <h1><img alt="Fela" src="docs/res/logo.png" width="203"/></h1>
 ## The Gist
-Fela's core principle is to consider **style as a function of state**.<br>
+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>
 The whole API and all plugins and bindings are built on that idea.<br>
-It is reactive and auto-updates onces registered to the DOM.<br>
+It is reactive and auto-updates once registered to the DOM.<br>
 
@@ -58,38 +58,72 @@ The following example illustrates the key parts of Fela though it only shows the very basics.
 import { createRenderer } from 'fela'
-import { render } from 'fela-dom'
 
-// rules are just plain functions of props
-// returning a valid object of style declarations
-const rule = props => ({
-  fontSize: props.fontSize + 'px',
-  marginTop: props.margin ? '15px' : 0,
-  color: 'red',
-  lineHeight: 1.4,
+// a simple style rule is a pure function of state
+// that returns an object of style declarations
+const rule = state => ({
+  textAlign: 'center',
+  padding: '5px 10px',
+  // directly use the state to compute style values
+  background: state.primary ? 'green' : 'blue',
+  fontSize: '18pt',
+  borderRadius: 5,
+  // deeply nest media queries and pseudo classes
   ':hover': {
-    color: 'blue',
-    fontSize: props.fontSize + 2 + 'px'
-  },
-  // nest media queries and pseudo classes
-  // inside the style object
-  '@media (min-height: 300px)': {
-    backgroundColor: 'gray',
-    ':hover': {
-      color: 'black'
-    }
+    background: state.primary ? 'chartreuse' : 'dodgerblue',
+    boxShadow: '0 0 2px rgb(70, 70, 70)'
   }
 })
 
-// creates a new renderer to render styles
+
 const renderer = createRenderer()
 
-// rendering the rule returns a className reference
-// which can be attached to any element
-const className = renderer.renderRule(rule, { fontSize: 12 })
+// fela generates atomic CSS classes in order to achieve
+// maximal style reuse and minimal CSS output
+const className = renderer.renderRule(rule, { 
+  primary: true
+}) // =>  a b c d e f g
+```
 
-// it generates atomic css classes to reuse styles
-// on declaration base and to keep the markup minimal
-console.log(className) // => a b c d e f h
+The generated CSS output would look like this:
+```CSS
+.a { text-align: center }
+.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) }
+```
 
-// renders all styles into the DOM
-render(renderer)
+### Primitive Components
+If you're using Fela, you're most likely also using React.<br>
+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.
+
+> **Read**: [Usage with React](http://fela.js.org/docs/guides/UsageWithReact.html) for a full guide.
+
+```javascript
+import { createComponent, Provider } from 'react-fela'
+import { render } from 'react-dom'
+
+const rule = state => ({
+  textAlign: 'center',
+  padding: '5px 10px',
+  background: state.primary ? 'green' : 'blue',
+  fontSize: '18pt',
+  borderRadius: 5,
+  ':hover': {
+    background: state.primary ? 'chartreuse' : 'dodgerblue',
+    boxShadow: '0 0 2px rgb(70, 70, 70)'
+  }
+})
+
+const Button = createComponent(rule, 'button')
+
+render(
+  <Provider renderer={renderer}>
+    <Button primary>Primary</Button>
+    <Button>Default</Button>
+  </Provider>,
+  document.body
+)
 ```
@@ -116,2 +150,3 @@
 * [API Reference](http://fela.js.org/docs/API.html)
+* [Migration Guide](http://fela.js.org/docs/MigrationGuide.html)
 * [Troubleshooting](http://fela.js.org/docs/Troubleshooting.html)
@@ -126,3 +161,3 @@ * [FAQ](http://fela.js.org/docs/FAQ.html)
 ## Posts & Talks
-* [**CSS in JS: The Good & Bad Parts**](https://youtu.be/X9iqnovPGyY?t=1h41m47s) ([Slides](https://speakerdeck.com/rofrischmann/css-in-js-the-good-and-bad-parts))<br> - *by [Robin Frischmann](https://twitter.com/rofrischmann)*
+* [**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)*
 * [**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)*
@@ -129,0 +164,0 @@ * [**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)*

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

Total package byte prevSize

126467

increased by13.5%

Number of package files

36

increased by200%

Lines of code

1475

increased by34.09%

Number of lines in readme file

228

increased by18.13%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedlodash@^4.17.4

• + Addedcss-in-js-utils@3.1.0(transitive)

• + Addedfast-loops@1.1.4(transitive)

• + Addedfela-utils@8.1.3(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedstring-hash@1.1.3(transitive)

• - Removedfela-utils@7.0.5(transitive)

• Updatedfela-utils@^8.0.0