@styled-system/css - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = exports.css = exports.system = void 0;
+exports.default = exports.css = exports.createCSS = void 0;
 
@@ -35,37 +35,50 @@ var _styledSystem = require("styled-system");
 
-var systemProps = [].concat(_toConsumableArray(Object.keys(_objectSpread({}, _styledSystem.space.propTypes, _styledSystem.color.propTypes, _styledSystem.fontFamily.propTypes, _styledSystem.fontSize.propTypes, _styledSystem.fontWeight.propTypes, _styledSystem.lineHeight.propTypes))), ['theme', 'mx', 'my', 'px', 'py', 'color']);
-var systemRegExp = new RegExp("^(".concat(systemProps.join('|'), ")$"));
-
-var styles = function styles(props) {
-  return (0, _lodash.default)(props, systemProps);
+var getSystemProps = function getSystemProps(funcs) {
+  return [].concat(_toConsumableArray(funcs.map(function (fn) {
+    return Object.keys(fn.propTypes);
+  }).reduce(function (a, props) {
+    return [].concat(_toConsumableArray(a), _toConsumableArray(props));
+  }, [])), ['theme', 'mx', 'my', 'px', 'py']);
 };
 
-var system = (0, _styledSystem.compose)(styles, _styledSystem.space, _styledSystem.color, _styledSystem.fontFamily, _styledSystem.fontSize, _styledSystem.fontWeight, _styledSystem.lineHeight);
-exports.system = system;
+var createCSS = function createCSS(funcs) {
+  var systemProps = getSystemProps(funcs);
+  var systemRegExp = new RegExp("^(".concat(systemProps.join('|'), ")$"));
 
-var css = function css(style) {
-  return function () {
-    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var theme = props.theme || props;
-    var styleProps = (0, _lodash2.default)(props, systemProps);
+  var styles = function styles(props) {
+    return (0, _lodash.default)(props, systemProps);
+  };
 
-    var styles = _toConsumableArray(system(_objectSpread({
-      theme: theme
-    }, style, styleProps)));
+  var system = _styledSystem.compose.apply(void 0, [styles].concat(_toConsumableArray(funcs)));
 
-    for (var key in style) {
-      var value = style[key];
-      if (!value || _typeof(value) !== 'object') continue;
-      if (systemRegExp.test(key)) continue;
-      styles.push(_defineProperty({}, key, css(value)({
+  var css = function css(style) {
+    return function () {
+      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var theme = props.theme || props;
+      var styleProps = (0, _lodash2.default)(props, systemProps);
+
+      var styles = _toConsumableArray(system(_objectSpread({
         theme: theme
-      })));
-    }
+      }, style, styleProps)));
 
-    return _lodash4.default.apply(void 0, _toConsumableArray((0, _lodash3.default)(styles.filter(Boolean))));
+      for (var key in style) {
+        var value = style[key];
+        if (!value || _typeof(value) !== 'object') continue;
+        if (systemRegExp.test(key)) continue;
+        styles.push(_defineProperty({}, key, css(value)({
+          theme: theme
+        })));
+      }
+
+      return _lodash4.default.apply(void 0, _toConsumableArray((0, _lodash3.default)(styles.filter(Boolean))));
+    };
   };
+
+  return css;
 };
 
+exports.createCSS = createCSS;
+var css = createCSS([_styledSystem.space, _styledSystem.color, _styledSystem.fontFamily, _styledSystem.fontSize, _styledSystem.fontWeight, _styledSystem.lineHeight]);
 exports.css = css;
 var _default = css;
 exports.default = _default;

index.js

@@ -15,11 +15,5 @@ import {
 
-const systemProps = [
-  ...Object.keys({
-    ...space.propTypes,
-    ...color.propTypes,
-    ...fontFamily.propTypes,
-    ...fontSize.propTypes,
-    ...fontWeight.propTypes,
-    ...lineHeight.propTypes,
-  }),
+const getSystemProps = funcs => [
+  ...funcs.map(fn => Object.keys(fn.propTypes))
+    .reduce((a, props) => [ ...a, ...props ], []),
   'theme',
@@ -30,13 +24,40 @@ 'mx',
   'py',
-  'color',
 ]
 
-const systemRegExp = new RegExp(
-  `^(${systemProps.join('|')})$`
-)
+export const createCSS = (funcs) => {
+  const systemProps = getSystemProps(funcs)
 
-const styles = props => omit(props, systemProps)
+  const systemRegExp = new RegExp(
+    `^(${systemProps.join('|')})$`
+  )
 
-export const system = compose(
-  styles,
+  const styles = props => omit(props, systemProps)
+
+  const system = compose(
+    styles,
+    ...funcs
+  )
+
+  const css = style => (props = {}) => {
+    const theme = props.theme || props
+    const styleProps = pick(props, systemProps)
+    const styles = [
+      ...system({ theme, ...style, ...styleProps })
+    ]
+    for (const key in style) {
+      const value = style[key]
+      if (!value || typeof value !== 'object') continue
+      if (systemRegExp.test(key)) continue
+      styles.push({
+        [key]: css(value)({ theme })
+      })
+    }
+    return merge(
+      ...flatten(styles.filter(Boolean))
+    )
+  }
+  return css
+}
+
+export const css = createCSS([
   space,
@@ -48,24 +69,4 @@ color,
   lineHeight
-)
+])
 
-
-export const css = style => (props = {}) => {
-  const theme = props.theme || props
-  const styleProps = pick(props, systemProps)
-  const styles = [
-    ...system({ theme, ...style, ...styleProps })
-  ]
-  for (const key in style) {
-    const value = style[key]
-    if (!value || typeof value !== 'object') continue
-    if (systemRegExp.test(key)) continue
-    styles.push({
-      [key]: css(value)({ theme })
-    })
-  }
-  return merge(
-    ...flatten(styles.filter(Boolean))
-  )
-}
-
 export default css

package.json

 {
   "name": "@styled-system/css",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist.js",

README.md

 
 # @styled-system/css
 
-Overload style objects with theme-aware Styled System props
+Styled System for your `css` prop
 
@@ -10,7 +10,25 @@ ```sh
 
+Styled System CSS lets you write style objects with responsive, theme-aware Styled System shortcuts.
+
+```jsx
+// usage with the css prop
+import React from 'react'
+import css from '@styled-system/css'
+
+const Beep = props =>
+  <div
+    {...props}
+    css={css({
+      fontSize: [4, 5, 6],
+      color: 'primary',
+    })}
+  />
+```
+
 ```js
+// usage with styled components
 import styled from '@emotion/styled'
 import css from '@styled-system/css'
 
-const Beep = styled(
+const Boop = styled(
   css({
@@ -27,15 +45,38 @@ fontSize: [ 4, 5, 6 ],
 
+## Keys
+
+The following keys in your style object will work the same as Styled System props, pulling values from your `theme` object and converting arrays to responsive styles.
+
+- `fontFamily`
+- `fontSize`
+- `fontWeight`
+- `lineHeight`
+- `color`
+- `bg`, `backgroundColor`
+- `m`, `margin`
+- `mt`, `marginTop`
+- `mr`, `marginRight`
+- `mb`, `marginBottom`
+- `ml`, `marginLeft`
+- `mx`
+- `my`
+- `p`, `padding`
+- `pt`, paddingTop`
+- `pr`, paddingRight`
+- `pb`, paddingBottom`
+- `pl`, paddingLeft`
+- `px`
+- `py`
+
+In this example, `fontSize` accepts an array, and `borderBottom` is passed through as plain CSS.
+
 ```jsx
-// usage with the css prop
-import React from 'react'
-import css from '@styled-system/css'
-
-const Boop = props =>
-  <div
-    {...props}
-    css={css({
-      fontSize: [4, 5, 6],
-      color: 'primary',
-    })}
-  />
+<div
+  css={css({
+    // Styled System key
+    fontSize: [ 3, 4, 5 ],
+    // CSS property
+    borderBottom: '2px solid tomato',
+  })}
+/>
 ```
@@ -55,25 +96,3 @@
 
-The following style props will be available on the component:
 
-- `fontFamily`
-- `fontSize`
-- `fontWeight`
-- `lineHeight`
-- `color`
-- `bg`
-- `m`
-- `mt`
-- `mr`
-- `mb`
-- `ml`
-- `mx`
-- `my`
-- `p`
-- `pt`
-- `pr`
-- `pb`
-- `pl`
-- `px`
-- `py`
-
 MIT License

No alert changes

Improved metrics

Total package byte prevSize

7624

increased by13.96%

Lines of code

121

increased by9.01%

Number of lines in readme file

96

increased by24.68%

No dependency changes