styled-components - npm Package Compare versions

Comparing version 1.4.3 to 1.4.4

CHANGELOG.md

@@ -13,2 +13,11 @@ # Changelog
 
+## [v1.4.4] — 2017-03-01
+
+### Changed
+
+- Improve theming support in TypeScript, thanks to [@patrick91](https://github.com/patrick91). (see [#460](https://github.com/styled-components/styled-components/pull/460))
+- Add TypeScript definitions for `withTheme`, thanks to [@patrick91](https://github.com/patrick91). (see [#521](https://github.com/styled-components/styled-components/pull/521))
+- Exclude test files from `npm`, thanks to [@Amwam](https://github.com/Amwam). (see [#464](https://github.com/styled-components/styled-components/pull/464))
+- Change the default `displayName` to `styled(Component)`, thanks to [@k15a](https://github.com/k15a). (see [#470](https://github.com/styled-components/styled-components/pull/470))
+
 ## [v1.4.3] - 2017-02-04
@@ -21,2 +30,3 @@
 - Fix defaultProps used instead of ThemeProvider on first render [@k15a](https://github.com/k15a). ([#450](https://github.com/styled-components/styled-components/pull/450))
+- displayName will now default to `Styled(Component)` [@k15a](https://github.com/k15a)
 
@@ -198,3 +208,4 @@ ## [v1.4.2] - 2017-01-28
 
-[Unreleased]: https://github.com/styled-components/styled-components/compare/v1.4.3...master
+[Unreleased]: https://github.com/styled-components/styled-components/compare/v1.4.4...master
+[v1.4.4]: https://github.com/styled-components/styled-components/compare/v1.4.3...v1.4.4
 [v1.4.3]: https://github.com/styled-components/styled-components/compare/v1.4.2...v1.4.3
@@ -201,0 +212,0 @@ [v1.4.2]: https://github.com/styled-components/styled-components/compare/v1.4.1...v1.4.2

docs/api.md

@@ -132,4 +132,2 @@ # API Reference
 
-const colorIfComplex = 'red';
-
 const StyledComp = styled.div`
@@ -140,3 +138,3 @@ ${(props) => {
 		return css`
-			color: ${colorIfComplex};
+			color: ${ props => props.whiteColor ? 'white': 'black' }
 		`;
@@ -151,3 +149,5 @@ } else {
 
+If you leave off the `css` your function will be `toString()`ed and you'll not get the results you expected.
 
+
 ### `StyledComponent`
@@ -154,0 +154,0 @@

docs/README.md

@@ -13,3 +13,4 @@ # Documentation
 - [Theming](./theming.md): How to work with themes
+- [React Native](./react-native.md): Details for React Native
 - [Typescript](./typescript-support.md): Typescript Support
 - [FAQ](./faq.md): Frequently Asked Questions

docs/tagged-template-literals.md

@@ -7,3 +7,3 @@ # ES6 Tagged Template Literals
 
-If you have no interpolations, they're the same. This:
+If you have no interpolations, they're very similar. This:
 
@@ -17,3 +17,3 @@ ```js
 ```js
-myFunction('some string here')
+myFunction(['some string here'])
 ```
@@ -20,0 +20,0 @@

docs/tips-and-tricks.md

@@ -112,2 +112,3 @@ # Tips and tricks
 // style-utils.js
+import { css } from 'styled-components'
 
@@ -145,2 +146,4 @@ export const media = {
 // these sizes are arbitrary and you can set them to whatever you wish
+import { css } from 'styled-components'
+
 const sizes = {
@@ -147,0 +150,0 @@ giant: 1170,

docs/typescript-support.md

@@ -16,2 +16,70 @@ # Typescript Support
 
+## Define a Theme Interface
+
+By default every styled component will have the theme prop set to `any`.
+When building complex apps it would be better to have autocomplete and 
+error checks everywhere.
+
+To have autocomplete and checks around the theme prop we should first define
+the theme interface we would like to use throught our app:
+
+```ts
+// theme.ts
+export default interface ThemeInterface {
+    primaryColor: string;
+    primaryColorInverted: string;
+}
+```
+
+then we can re-export the styled function with our custom theme interface:
+
+```ts
+// my-styled-components.ts
+import * as styledComponents from "styled-components";
+import { ThemedStyledComponentsModule } from "styled-components";
+
+import ThemeInterface from "./theme";
+
+const {
+    default: styled,
+    css,
+    injectGlobal,
+    keyframes,
+    ThemeProvider
+} = styledComponents as ThemedStyledComponentsModule<ThemeInterface>;
+
+export default styled;
+export { css, injectGlobal, keyframes, ThemeProvider };
+```
+
+Finally, instead of importing the styled functions from the `styled-components` module, 
+we import it from our custom module.
+
+```ts
+import * as React from "react";
+
+// same for css, etc
+import styled from "themed-components";
+
+
+const Link = styled.a`
+    font-family: 'Cabin';
+    font-weight: bold;
+    font-size: 1.2rem;
+    letter-spacing: 0.05em;
+    color: {props => props.theme.primaryColor};
+    display: block;
+    cursor: pointer;
+
+    transition: 0.3s background ease-out;
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.2);
+    }
+`;
+
+
+export default Link;
+```
+
 ## Caveats
@@ -18,0 +86,0 @@

lib/models/InlineStyle.js

@@ -54,23 +54,21 @@ 'use strict';
       if (!generated[hash]) {
-        (function () {
-          var root = (0, _parse2.default)(flatCSS);
-          var declPairs = [];
-          root.each(function (node) {
-            if (node.type === 'decl') {
-              declPairs.push([node.prop, node.value]);
-            } else {
-              /* eslint-disable no-console */
-              console.warn('Node of type ' + node.type + ' not supported as an inline style');
-            }
-          });
-          // RN currently does not support differing values for the corner radii of Image
-          // components (but does for View). It is almost impossible to tell whether we'll have
-          // support, so we'll just disable multiple values here.
-          // https://github.com/styled-components/css-to-react-native/issues/11
-          var styleObject = (0, _cssToReactNative2.default)(declPairs, ['borderRadius', 'borderWidth', 'borderColor', 'borderStyle']);
-          var styles = _reactNative.StyleSheet.create({
-            generated: styleObject
-          });
-          generated[hash] = styles.generated;
-        })();
+        var root = (0, _parse2.default)(flatCSS);
+        var declPairs = [];
+        root.each(function (node) {
+          if (node.type === 'decl') {
+            declPairs.push([node.prop, node.value]);
+          } else {
+            /* eslint-disable no-console */
+            console.warn('Node of type ' + node.type + ' not supported as an inline style');
+          }
+        });
+        // RN currently does not support differing values for the corner radii of Image
+        // components (but does for View). It is almost impossible to tell whether we'll have
+        // support, so we'll just disable multiple values here.
+        // https://github.com/styled-components/css-to-react-native/issues/11
+        var styleObject = (0, _cssToReactNative2.default)(declPairs, ['borderRadius', 'borderWidth', 'borderColor', 'borderStyle']);
+        var styles = _reactNative.StyleSheet.create({
+          generated: styleObject
+        });
+        generated[hash] = styles.generated;
       }
@@ -77,0 +75,0 @@ return generated[hash];

lib/models/StyledComponent.js

@@ -166,3 +166,3 @@ 'use strict';
 
-    StyledComponent.displayName = (0, _isTag2.default)(target) ? 'styled.' + target : 'Styled(' + (target.displayName || target.name) + ')';
+    StyledComponent.displayName = (0, _isTag2.default)(target) ? 'styled.' + target : 'Styled(' + (target.displayName || target.name || 'Component') + ')';
 
@@ -169,0 +169,0 @@ return StyledComponent;

lib/models/StyledNativeComponent.js

@@ -168,3 +168,4 @@ 'use strict';
         var propsForElement = _extends({}, this.props);
-        propsForElement.style = [generatedStyles, style];
+        /* Allow passed in style to be an array or an object */
+        propsForElement.style = [generatedStyles].concat(style);
 
@@ -171,0 +172,0 @@ propsForElement.ref = this.generateRef();

lib/test/basic.test.js

@@ -84,2 +84,37 @@ 'use strict';
 
+  it('Should have the correct styled(component) displayName', function () {
+    var CompWithoutName = function CompWithoutName() {
+      return function () {
+        return _react2.default.createElement('div', null);
+      };
+    };
+
+    var StyledTag = styled.div(_templateObject);
+    (0, _expect2.default)(StyledTag.displayName).toBe('styled.div');
+
+    var CompWithName = function CompWithName() {
+      return _react2.default.createElement('div', null);
+    };
+    CompWithName.displayName = null;
+    var StyledCompWithName = styled(CompWithName)(_templateObject);
+    (0, _expect2.default)(StyledCompWithName.displayName).toBe('Styled(CompWithName)');
+
+    var CompWithDisplayName = CompWithoutName();
+    CompWithDisplayName.displayName = 'displayName';
+    var StyledCompWithDisplayName = styled(CompWithDisplayName)(_templateObject);
+    (0, _expect2.default)(StyledCompWithDisplayName.displayName).toBe('Styled(displayName)');
+
+    var CompWithBoth = function CompWithBoth() {
+      return _react2.default.createElement('div', null);
+    };
+    CompWithBoth.displayName = 'displayName';
+    var StyledCompWithBoth = styled(CompWithBoth)(_templateObject);
+    (0, _expect2.default)(StyledCompWithBoth.displayName).toBe('Styled(displayName)');
+
+    var CompWithNothing = CompWithoutName();
+    CompWithNothing.displayName = null;
+    var StyledCompWithNothing = styled(CompWithNothing)(_templateObject);
+    (0, _expect2.default)(StyledCompWithNothing.displayName).toBe('Styled(Component)');
+  });
+
   describe('innerRef', function () {
@@ -86,0 +121,0 @@ (0, _mochaJsdom2.default)();

lib/vendor/glamor/sheet.js

@@ -145,4 +145,2 @@ 'use strict';
     value: function insert(rule) {
-      var _this2 = this;
-
       var insertedRule = void 0;
@@ -155,14 +153,12 @@
         } else {
-          (function () {
-            var textNode = document.createTextNode(rule);
-            last(_this2.tags).appendChild(textNode);
-            insertedRule = { textNode: textNode, appendRule: function appendRule(newCss) {
-                return textNode.appendData(newCss);
-              } };
+          var textNode = document.createTextNode(rule);
+          last(this.tags).appendChild(textNode);
+          insertedRule = { textNode: textNode, appendRule: function appendRule(newCss) {
+              return textNode.appendData(newCss);
+            } };
 
-            if (!_this2.isSpeedy) {
-              // sighhh
-              _this2.sheet = sheetForTag(last(_this2.tags));
-            }
-          })();
+          if (!this.isSpeedy) {
+            // sighhh
+            this.sheet = sheetForTag(last(this.tags));
+          }
         }
@@ -169,0 +165,0 @@ } else {

lib/vendor/postcss/lazy-result.js

@@ -205,19 +205,17 @@ 'use strict';
             try {
-                (function () {
-                    var plugin = _this.processor.plugins[_this.plugin];
-                    var promise = _this.run(plugin);
-                    _this.plugin += 1;
+                var plugin = this.processor.plugins[this.plugin];
+                var promise = this.run(plugin);
+                this.plugin += 1;
 
-                    if (isPromise(promise)) {
-                        promise.then(function () {
-                            _this.asyncTick(resolve, reject);
-                        }).catch(function (error) {
-                            _this.handleError(error, plugin);
-                            _this.processed = true;
-                            reject(error);
-                        });
-                    } else {
+                if (isPromise(promise)) {
+                    promise.then(function () {
                         _this.asyncTick(resolve, reject);
-                    }
-                })();
+                    }).catch(function (error) {
+                        _this.handleError(error, plugin);
+                        _this.processed = true;
+                        reject(error);
+                    });
+                } else {
+                    this.asyncTick(resolve, reject);
+                }
             } catch (error) {
@@ -224,0 +222,0 @@ this.processed = true;

native/index.d.ts

@@ -14,3 +14,4 @@ import * as ReactNative from "react-native";
   BaseStyledInterface,
-  css
+  css,
+  withTheme,
 } from "..";
@@ -17,0 +18,0 @@

package.json

 {
   "name": "styled-components",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "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

@@ -355,6 +355,6 @@ <a href="https://github.com/styled-components/styled-components">
 <GreenSection>
-  {/* Notice how there's no code changes for the button, it just
-      adapts to the theme passed from GreenSection! */}
-  <Button>Green Button!</Button>
   <div>
+    {/* Notice how there's no code changes for the button, it just
+        adapts to the theme passed from GreenSection! */}
+    <Button>Green Button!</Button>
     <div>
@@ -487,2 +487,9 @@ <div>
 - [colors-show](https://github.com/RafalFilipek/colors-show): Present your application colors with style. ([demo](https://colors-show.now.sh/))
+- [`styled-components-breakpoint`](https://github.com/jameslnewell/styled-components-breakpoint): Utility function for using breakpoints with `styled-components`.
+- [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid): Responsive grid components for `styled-components`.
+- [Scalable React Boilerplate](https://github.com/RyanCCollins/scalable-react-boilerplate)
+- [Scalable React TypeScript Boilerplate](https://github.com/RyanCCollins/scalable-react-ts-boilerplate)
+- [styled-theme](https://github.com/diegohaz/styled-theme): Extensible theming system for styled-components.
+- [styled-tools](https://github.com/diegohaz/styled-tools): Useful interpolated functions for styled-components.
+- [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing): Responsive margin and padding components for `styled-components`.
 
@@ -489,0 +496,0 @@ *Built something with `styled-components`? Submit a PR and add it to this list!*

src/models/StyledComponent.js

@@ -114,3 +114,3 @@ // @flow
 
-    StyledComponent.displayName = isTag(target) ? `styled.${target}` : `Styled(${(target.displayName || target.name)})`
+    StyledComponent.displayName = isTag(target) ? `styled.${target}` : `Styled(${(target.displayName || target.name || 'Component')})`
 
@@ -117,0 +117,0 @@ return StyledComponent

src/models/StyledNativeComponent.js

@@ -116,3 +116,4 @@ // @flow
       const propsForElement = { ...this.props }
-      propsForElement.style = [generatedStyles, style]
+      /* Allow passed in style to be an array or an object */
+      propsForElement.style = [generatedStyles].concat(style)
 
@@ -119,0 +120,0 @@ propsForElement.ref = this.generateRef()

typings/styled-components.d.ts

 import * as React from "react";
-import { StatelessComponent, ComponentClass } from "react";
+import { StatelessComponent, ComponentClass, PureComponent } from "react";
 
@@ -45,3 +45,3 @@ type Component<P> = ComponentClass<P> | StatelessComponent<P>;
 export type StyledInterface = ThemedStyledInterface<any>;
-export interface ThemedStyledInterface<T> extends BaseStyledInterface {
+export interface ThemedStyledInterface<T> extends ThemedBaseStyledInterface<T> {
   a: ThemedHtmlStyledFunction<HTMLAnchorElement, T>;
@@ -196,2 +196,3 @@ abbr: ThemedHtmlStyledFunction<HTMLElement, T>;
   injectGlobal(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): void;
+  withTheme<P extends { theme?: T; }, T>(component: Component<P>): ComponentClass<P>;
 
@@ -204,2 +205,4 @@ ThemeProvider: ThemeProviderComponent<T>;
 export const css: ThemedCssFunction<any>;
+export function withTheme<P extends { theme?: T; }, T>(component: Component<P>): ComponentClass<P>;
+
 export function keyframes(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): string;
@@ -206,0 +209,0 @@ export function injectGlobal(strings: TemplateStringsArray, ...interpolations: SimpleInterpolation[]): void;

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

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

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 lines in readme file

534

increased by1.33%

Worsened metrics

Total package byte prevSize

2075481

decreased by-2.65%

Number of package files

267

decreased by-4.98%

Number of low license alerts

2

increased byInfinity%

License quality

80

decreased by-20%

Lines of code

37952

decreased by-4.34%

No dependency changes