styled-components - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

CHANGELOG.md

@@ -11,2 +11,16 @@ # Change Log
 
+### Changed
+
+## [v1.3.1] - 2017-01-18
+
+### Changed
+
+- Fix `<Styled(undefined)>` in React Developer Tools, thanks to [@iamssen](https://github.com/iamssen). (see [#383](https://github.com/styled-components/styled-components/pull/383))
+- Fix themes support in IE <= 10, thanks to [@saschagehlich](https://github.com/saschagehlich). (see [#379](https://github.com/styled-components/styled-components/pull/379))
+- Fixed Touchable not recognising styled components as ReactNative components, thanks to [@michalkvasnicak](https://github.com/michalkvasnicak). (see [#372](https://github.com/styled-components/styled-components/pull/372))
+
+## [v1.3.0]
+
+### Added
+
 - Added `styled.Button` alias for ReactNative, thanks to [@Ginhing](https://github.com/Ginhing). (see [#322](https://github.com/styled-components/styled-components/pull/322))
@@ -23,3 +37,2 @@
 
-
 ## [v1.2.1]
@@ -159,3 +172,5 @@
 
-[Unreleased]: https://github.com/styled-components/styled-components/compare/v1.2.1...master
+[Unreleased]: https://github.com/styled-components/styled-components/compare/v1.3.1...master
+[Unreleased]: https://github.com/styled-components/styled-components/compare/v1.3.0...v1.3.1
+[v1.3.0]: https://github.com/styled-components/styled-components/compare/v1.2.1...v1.3.0
 [v1.2.1]: https://github.com/styled-components/styled-components/compare/v1.2.0...v1.2.1
@@ -162,0 +177,0 @@ [v1.2.0]: https://github.com/styled-components/styled-components/compare/v1.1.3...v1.2.0

docs/faq.md

@@ -64,5 +64,5 @@ # FAQ
 
-While this isn't how you would normsally write CSS, it's not actually a big issue:
+While this isn't how you would normally write CSS, it's not actually a big issue:
 
 - On the server, you can gzip your CSS to take care of any duplication.
 - On the client, this only increases the amount of *generated* CSS (and not the size of the bundle sent by the server), which doesn't have any noticeable performance impact. 

docs/tagged-template-literals.md

 # ES6 Tagged Template Literals
 
+**For an alternate explanation see @mxstbr's blog post: [The magic behind :nail_care: styled-components](http://mxstbr.blog/2016/11/styled-components-magic-explained/)**
+
 Tagged Template Literals are a new feature in ES6 that lets you define _custom string interpolation_ rules, which is how we're able to create styled components.
@@ -4,0 +6,0 @@

lib/models/StyledComponent.js

@@ -154,6 +154,9 @@ 'use strict';
 
+    StyledComponent.contextTypes = ParentComponent.contextTypes;
+
+
     StyledComponent.target = target;
     StyledComponent.rules = rules;
 
-    StyledComponent.displayName = (0, _isTag2.default)(target) ? 'styled.' + target : 'Styled(' + target.displayName + ')';
+    StyledComponent.displayName = (0, _isTag2.default)(target) ? 'styled.' + target : 'Styled(' + (target.displayName || target.name) + ')';
 
@@ -160,0 +163,0 @@ return StyledComponent;

lib/models/StyledNativeComponent.js

@@ -9,2 +9,4 @@ 'use strict';
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
 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; }; }();
@@ -115,2 +117,31 @@
     }, {
+      key: 'setNativeProps',
+      value: function setNativeProps(nativeProps) {
+        var root = typeof this.root === 'string' ? this.refs[this.root] : this.root;
+
+        root.setNativeProps(nativeProps);
+      }
+    }, {
+      key: 'generateRef',
+      value: function generateRef() {
+        var _this4 = this;
+
+        var innerRef = this.props.innerRef;
+
+        var innerRefType = typeof innerRef === 'undefined' ? 'undefined' : _typeof(innerRef);
+
+        if (innerRefType === 'string') {
+          this.root = innerRef;
+          return innerRef;
+        }
+
+        return function (component) {
+          _this4.root = component;
+
+          if (innerRefType === 'function') {
+            innerRef(component);
+          }
+        };
+      }
+    }, {
       key: 'generateAndInjectStyles',
@@ -128,4 +159,3 @@ value: function generateAndInjectStyles(theme, props) {
             style = _props.style,
-            children = _props.children,
-            innerRef = _props.innerRef;
+            children = _props.children;
         var generatedStyles = this.state.generatedStyles;
@@ -136,7 +166,6 @@
         propsForElement.style = [generatedStyles, style];
-        if (innerRef) {
-          propsForElement.ref = innerRef;
-          if ((0, _isTag2.default)(target)) delete propsForElement.innerRef;
-        }
 
+        propsForElement.ref = this.generateRef();
+        if ((0, _isTag2.default)(target)) delete propsForElement.innerRef;
+
         return (0, _react.createElement)(target, propsForElement, children);
@@ -143,0 +172,0 @@ }

package.json

 {
   "name": "styled-components",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -479,2 +479,3 @@ <a href="https://github.com/styled-components/styled-components">
 - [`Dirtyredz.com`](https://github.com/dirtyredz/dirtyredz.com): David McClain | Dirtyredz - About me, Latest projects and Contact ([Website](http://dirtyredz.com))
+- [react-adminlte-dash](https://github.com/zksailor534/react-adminlte-dash): AdminLTE dashboard components in React ([demo](http://zksailor534.github.io/react-adminlte-dash))
 
@@ -481,0 +482,0 @@ *Built something with `styled-components`? Submit a PR and add it to this list!*

src/models/StyledComponent.js

@@ -29,2 +29,3 @@ // @flow
       static target: Target
+      static contextTypes = ParentComponent.contextTypes
 
@@ -109,3 +110,3 @@ constructor() {
 
-    StyledComponent.displayName = isTag(target) ? `styled.${target}` : `Styled(${target.displayName})`
+    StyledComponent.displayName = isTag(target) ? `styled.${target}` : `Styled(${(target.displayName || target.name)})`
 
@@ -112,0 +113,0 @@ return StyledComponent

src/models/StyledNativeComponent.js

@@ -27,2 +27,3 @@ // @flow
     static target: Target
+    root: any
 
@@ -77,2 +78,26 @@ constructor() {
 
+    setNativeProps(nativeProps: Object) {
+      const root = typeof this.root === 'string' ? this.refs[this.root] : this.root
+
+      root.setNativeProps(nativeProps)
+    }
+
+    generateRef() {
+      const { innerRef } = this.props
+      const innerRefType = typeof innerRef
+
+      if (innerRefType === 'string') {
+        this.root = innerRef
+        return innerRef
+      }
+
+      return (component: any) => {
+        this.root = component
+
+        if (innerRefType === 'function') {
+          innerRef(component)
+        }
+      }
+    }
+
     generateAndInjectStyles(theme: any, props: any) {
@@ -84,3 +109,3 @@ const executionContext = { ...props, theme }
     render() {
-      const { style, children, innerRef } = this.props
+      const { style, children } = this.props
       const { generatedStyles } = this.state
@@ -90,7 +115,6 @@
       propsForElement.style = [generatedStyles, style]
-      if (innerRef) {
-        propsForElement.ref = innerRef
-        if (isTag(target)) delete propsForElement.innerRef
-      }
 
+      propsForElement.ref = this.generateRef()
+      if (isTag(target)) delete propsForElement.innerRef
+
       return createElement(target, propsForElement, children)
@@ -97,0 +121,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

Total package byte prevSize

2077071

increased by0.21%

Lines of code

38685

increased by0.16%

Number of lines in readme file

521

increased by0.19%

No dependency changes