Simplify attrs

Author: sonaye

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.0.5
+
+- Simplify `attrs()` my making it just a thin wrapper that overwrites `defaultProps`..
+
 # 0.0.4
 
 - Support theming.

README.md

@@ -193,3 +193,5 @@ const Foo = styled.div({ background: '#eee' });
 
 <Foo />; // <div style={{ background: '#eee' }} />
 ```
+
+[![Edit shakl](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/52kw0jrn94?module=%2Fsrc%2FExample.js)

package.json

@@ -2,7 +2,7 @@
   "license": "MIT",
   "name": "shakl",
   "description": "A utility to create styled components in React Native.",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "main": "lib/index.js",
   "react-native": "lib/rn.js",
   "repository": {
@@ -13,9 +13,9 @@
     "react": ">=16.3.0"
   },
   "devDependencies": {
-    "@types/jest": "23.1.4",
+    "@types/jest": "23.1.5",
     "@types/react": "16.4.6",
-    "@types/react-native": "0.55.28",
+    "@types/react-native": "~0.55",
     "@types/react-test-renderer": "16.0.1",
     "babel-eslint": "8.2.5",
     "babel-plugin-external-helpers": "6.22.0",
@@ -24,13 +24,13 @@
     "babel-preset-stage-0": "6.24.1",
     "benchmark": "2.1.4",
     "emotion": "9.2.5",
-    "eslint": "5.0.1",
+    "eslint": "~4",
     "eslint-config-airbnb": "17.0.0",
     "eslint-plugin-import": "2.13.0",
     "eslint-plugin-jsx-a11y": "6.1.0",
     "eslint-plugin-react": "7.10.0",
     "glamorous-native": "1.4.0",
-    "jest": "23.3.0",
+    "jest": "23.4.0",
     "react": "16.3.1",
     "react-emotion": "9.2.5",
     "react-native": "0.55.4",

src/styled.js

@@ -40,7 +40,16 @@ const styled = (Comp, { name, multi, ...opts } = {}) => style => {
   Styled.displayName = name || `styled(${Comp.displayName || Comp.name})`;
 
   Styled.extend = more => styled(Styled, { name })(more);
-  Styled.attrs = attrs => styled(Styled, { name, attrs })();
+
+  Styled.attrs = attrs => {
+    Styled.defaultProps = {
+      ...Styled.defaultProps,
+      ...attrs
+    };
+
+    return Styled;
+  };
+
   Styled.withComponent = comp => styled(Styled, { comp })(style);
   Styled.withChild = child => styled(Styled, { name, child })();
   Styled.withTheme = () => withTheme(Styled);