aesthetic - npm Package Compare versions

Comparing version 0.3.0 to 0.5.0

Adapter.js

@@ -7,2 +7,4 @@ 'use strict';
 
+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; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -14,3 +16,11 @@
   function Adapter() {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
     _classCallCheck(this, Adapter);
+
+    this.bypassNativeStyleSheet = false;
+    this.native = false;
+    this.options = {};
+
+    this.options = _extends({}, options);
   }
@@ -17,0 +27,0 @@

Aesthetic.js

@@ -7,2 +7,4 @@ 'use strict';
 
+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; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -26,9 +28,19 @@
   function Aesthetic(adapter) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
     _classCallCheck(this, Aesthetic);
 
+    this.cache = {};
+    this.native = false;
+    this.options = {
+      stylesPropName: 'classNames',
+      themePropName: 'theme',
+      extendable: false
+    };
     this.parents = {};
     this.styles = {};
     this.themes = {};
-    this.classNames = {};
 
+    this.options = _extends({}, this.options, options);
+
     this.setAdapter(adapter);
@@ -104,2 +116,3 @@ }
       if (adapter instanceof _Adapter2.default) {
+        adapter.native = this.native;
         this.adapter = adapter;
@@ -150,4 +163,4 @@ } else if (process.env.NODE_ENV === 'development') {
 
-      if (this.classNames[cacheKey]) {
-        return this.classNames[cacheKey];
+      if (this.cache[cacheKey]) {
+        return this.cache[cacheKey];
       }
@@ -157,3 +170,3 @@
       var toTransform = {};
-      var classNames = {};
+      var output = {};
       var setCount = 0;
@@ -163,3 +176,3 @@
         if (typeof declarations[setName] === 'string') {
-          classNames[setName] = declarations[setName];
+          output[setName] = _this.native ? {} : declarations[setName];
         } else {
@@ -173,10 +186,6 @@ toTransform[setName] = declarations[setName];
         (function () {
-          var transformedClassNames = _this.adapter.transform(styleName, toTransform);
+          var transformedOutput = _this.adapter.transform(styleName, toTransform);
 
-          Object.keys(transformedClassNames).forEach(function (setName) {
-            if (typeof transformedClassNames[setName] === 'string') {
-              classNames[setName] = transformedClassNames[setName];
-            } else if (process.env.NODE_ENV === 'development') {
-              throw new TypeError('`' + _this.adapter.constructor.name + '` must return a mapping of CSS class names. ' + ('"' + styleName + '@' + setName + '" is not a valid string.'));
-            }
+          Object.keys(transformedOutput).forEach(function (setName) {
+            output[setName] = _this.validateTransform(styleName, setName, transformedOutput[setName]);
           });
@@ -186,6 +195,17 @@ })();
 
-      this.classNames[cacheKey] = classNames;
+      this.cache[cacheKey] = output;
 
-      return classNames;
+      return output;
     }
+  }, {
+    key: 'validateTransform',
+    value: function validateTransform(styleName, setName, value) {
+      if (process.env.NODE_ENV === 'development') {
+        if (typeof value !== 'string') {
+          throw new TypeError('`' + this.adapter.constructor.name + '` must return a mapping of CSS class names. ' + ('"' + styleName + '@' + setName + '" is not a valid string.'));
+        }
+      }
+
+      return value;
+    }
   }]);
@@ -192,0 +212,0 @@

index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.ThemeProvider = exports.ClassNameAdapter = exports.Adapter = exports.classes = exports.createStyler = exports.ClassNamesPropType = undefined;
+exports.ThemeProvider = exports.ClassNameAdapter = exports.Adapter = exports.classes = exports.createStyler = exports.StylesPropType = exports.ClassNamesPropType = undefined;
 
@@ -38,2 +38,3 @@ var _react = require('react');
 var ClassNamesPropType = exports.ClassNamesPropType = _react.PropTypes.objectOf(_react.PropTypes.string);
+var StylesPropType = exports.StylesPropType = _react.PropTypes.objectOf(_react.PropTypes.object);
 
@@ -40,0 +41,0 @@ exports.createStyler = _createStyler2.default;

package.json

 {
   "name": "aesthetic",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Abstract library to support a range of styling options for React components.",
@@ -17,3 +17,3 @@ "keywords": [
   "dependencies": {
-    "aesthetic-utils": "^0.3.0",
+    "aesthetic-utils": "^0.4.0",
     "hoist-non-react-statics": "^1.2.0",
@@ -20,0 +20,0 @@ "lodash.merge": "^4.6.0"

README.md

@@ -1,2 +0,2 @@
-# Aesthetic v0.3.0
+# Aesthetic v0.4.0
 [![Build Status](https://travis-ci.org/milesj/aesthetic.svg?branch=master)](https://travis-ci.org/milesj/aesthetic)
@@ -127,2 +127,3 @@
   * [Adapters](#adapters)
+* [React Native Support](#react-native-support)
 
@@ -163,10 +164,11 @@ ### Initial Setup
 
-| Adapter | Unified Syntax | Pseudos | Fallbacks | Fonts | Animations | Media Queries |
-| :--- | :---: | :---: | :---: | :---: | :---: | :---: |
-| [CSS class names](#external-classes) | | ✓ | ✓ | ✓ | ✓ | ✓ |
-| [CSS modules][css-modules] | | ✓ | ✓ | ✓ | ✓ | ✓ |
-| [Aphrodite][aphrodite] | ✓ | ✓ | | ✓ | ✓ | ✓ |
-| [Fela][fela] | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
-| [Glamor][glamor] | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
-| [JSS][jss] | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| Adapter | Unified Syntax | Pseudos | Fallbacks | Fonts | Animations | Media Queries | React Native |
+| :--- | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
+| [CSS class names](#external-classes) | | ✓ | ✓ | ✓ | ✓ | ✓ | |
+| [CSS modules][css-modules] | | ✓ | ✓ | ✓ | ✓ | ✓ | |
+| [Aphrodite][aphrodite] | ✓ | ✓ | | ✓ | ✓ | ✓ | |
+| [Fela][fela] | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| [Glamor][glamor] | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
+| [JSS][jss] | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
+| [React Native][react-native] | | | | ✓ | ✓ | | ✓ |
 
@@ -209,3 +211,3 @@ The following libraries are currently not supported.
   creating a new component in the process. Defaults to `false`.
-* `classNamesPropName` (string) - Name of the prop in which the compiled class names
+* `stylesPropName` (string) - Name of the prop in which the compiled class names or styles
   object is passed to. Defaults to `classNames`.
@@ -221,3 +223,3 @@ * `themePropName` (string) - Name of the prop in which the theme name is passed to.
   extendable: true,
-  classNamesPropName: 'classes',
+  stylesPropName: 'classes',
   themePropName: 'appTheme',
@@ -227,2 +229,13 @@ })(Button);
 
+If you get tired of passing `stylesPropName`, `themePropName`, and `extendable` to every
+component, you can pass these as default options to the `Aesthetic` instance.
+
+```javascript
+new Aesthetic(adapter, {
+  extendable: true,
+  stylesPropName: 'classes',
+  themePropName: 'appTheme',
+})
+```
+
 ### Defining Components
@@ -688,4 +701,9 @@
 | [JSS][jss] | ✓ | ✓ | | |
-| [React Native][react-native] | | ✓ | | ||
+| [React Native][react-native] | ✓ | ✓ | | ||
 
+### React Native Support
+
+Please refer to the [aesthetic-native][react-native] package for more information on how
+to integrate React Native with Aesthetic.
+
 [css-modules]: https://github.com/milesj/aesthetic/tree/master/packages/aesthetic-adapter-css-modules
@@ -697,4 +715,4 @@ [aphrodite]: https://github.com/milesj/aesthetic/tree/master/packages/aesthetic-adapter-aphrodite
 [radium]: https://github.com/FormidableLabs/radium
-[react-native]: https://github.com/facebook/react-native
+[react-native]: https://github.com/milesj/aesthetic/tree/master/packages/aesthetic-native
 [react-with-styles]: https://github.com/airbnb/react-with-styles
 [styled-components]: https://github.com/styled-components/styled-components

style.js

@@ -41,11 +41,3 @@ 'use strict';
     var styleName = options.styleName || Component.displayName || Component.name;
-    var _options$classNamesPr = options.classNamesPropName,
-        classNamesPropName = _options$classNamesPr === undefined ? 'classNames' : _options$classNamesPr,
-        _options$themePropNam = options.themePropName,
-        themePropName = _options$themePropNam === undefined ? 'theme' : _options$themePropNam,
-        _options$extendable = options.extendable,
-        extendable = _options$extendable === undefined ? false : _options$extendable,
-        extendFrom = options.extendFrom;
 
-
     if (process.env.NODE_ENV === 'development') {
@@ -61,2 +53,10 @@ if (!(aesthetic instanceof _Aesthetic2.default)) {
 
+    var _options$stylesPropNa = options.stylesPropName,
+        stylesPropName = _options$stylesPropNa === undefined ? aesthetic.options.stylesPropName : _options$stylesPropNa,
+        _options$themePropNam = options.themePropName,
+        themePropName = _options$themePropNam === undefined ? aesthetic.options.themePropName : _options$themePropNam,
+        _options$extendable = options.extendable,
+        extendable = _options$extendable === undefined ? aesthetic.options.extendable : _options$extendable,
+        extendFrom = options.extendFrom;
+
     aesthetic.setStyles(styleName, styles, extendFrom);
@@ -97,5 +97,3 @@
 
-          var classNames = aesthetic.transformStyles(styleName, theme);
-
-          this.setState((_setState = {}, _defineProperty(_setState, themePropName, theme), _defineProperty(_setState, classNamesPropName, classNames), _setState));
+          this.setState((_setState = {}, _defineProperty(_setState, themePropName, theme), _defineProperty(_setState, stylesPropName, aesthetic.transformStyles(styleName, theme)), _setState));
         }
@@ -112,4 +110,6 @@ }, {
 
-          if (process.env.NODE_ENV === 'development' && !extendable) {
-            throw new Error(styleName + ' is not extendable.');
+          if (process.env.NODE_ENV === 'development') {
+            if (!extendable) {
+              throw new Error(styleName + ' is not extendable.');
+            }
           }
@@ -116,0 +116,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54279

increased by3.78%

Lines of code

651

increased by3.83%

Number of lines in readme file

712

increased by2.59%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Addedaesthetic-utils@0.4.3(transitive)

• - Removedaesthetic-utils@0.3.0(transitive)

• Updatedaesthetic-utils@^0.4.0