@styled-system/css - npm Package Compare versions

Comparing version 1.0.3 to 2.0.0-0

dist.js

@@ -6,16 +6,6 @@ "use strict";
 });
-exports.default = exports.css = exports.createCSS = void 0;
+exports.default = exports.css = exports.responsive = void 0;
 
-var _styledSystem = require("styled-system");
+var _lodash = _interopRequireDefault(require("lodash.get"));
 
-var _lodash = _interopRequireDefault(require("lodash.omit"));
-
-var _lodash2 = _interopRequireDefault(require("lodash.pick"));
-
-var _lodash3 = _interopRequireDefault(require("lodash.flatten"));
-
-var _lodash4 = _interopRequireDefault(require("lodash.merge"));
-
-var _lodash5 = _interopRequireDefault(require("lodash.pickby"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,51 +27,146 @@
 
-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));
-  }, [])), ['mx', 'my', 'px', 'py']);
+var defaultBreakpoints = [40, 52, 64].map(function (n) {
+  return n + 'em';
+});
+var defaultTheme = {
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72]
 };
+var aliases = {
+  bg: 'backgroundColor',
+  m: 'margin',
+  mt: 'marginTop',
+  mr: 'marginRight',
+  mb: 'marginBottom',
+  ml: 'marginLeft',
+  mx: ['marginLeft', 'marginRight'],
+  my: ['marginTop', 'marginBottom'],
+  marginX: ['marginLeft', 'marginRight'],
+  marginY: ['marginTop', 'marginBottom'],
+  p: 'padding',
+  pt: 'paddingTop',
+  pr: 'paddingRight',
+  pb: 'paddingBottom',
+  pl: 'paddingLeft',
+  px: ['paddingLeft', 'paddingRight'],
+  py: ['paddingTop', 'paddingBottom'],
+  paddingX: ['paddingLeft', 'paddingRight'],
+  paddingY: ['paddingTop', 'paddingBottom']
+};
+var scales = {
+  color: 'colors',
+  backgroundColor: 'colors',
+  borderColor: 'colors',
+  margin: 'space',
+  marginTop: 'space',
+  marginRight: 'space',
+  marginBottom: 'space',
+  marginLeft: 'space',
+  padding: 'space',
+  paddingTop: 'space',
+  paddingRight: 'space',
+  paddingBottom: 'space',
+  paddingLeft: 'space',
+  fontFamily: 'fonts',
+  fontSize: 'fontSizes',
+  fontWeight: 'fontWeights',
+  lineHeight: 'lineHeights',
+  letterSpacing: 'letterSpacings',
+  border: 'borders',
+  borderTop: 'borders',
+  borderRight: 'borders',
+  borderBottom: 'borders',
+  borderLeft: 'borders',
+  borderWidth: 'borderWidths',
+  borderStyle: 'borderStyles',
+  borderRadius: 'radii',
+  boxShadow: 'shadows',
+  zIndex: 'zIndices',
+  width: 'sizes',
+  minWidth: 'sizes',
+  maxWidth: 'sizes',
+  height: 'sizes',
+  minHeight: 'sizes',
+  maxHeight: 'sizes'
+};
 
-var createCSS = function createCSS(funcs) {
-  var systemProps = getSystemProps(funcs);
-  var systemRegExp = new RegExp("^(".concat(systemProps.join('|'), ")$"));
+var responsive = function responsive(styles) {
+  return function (theme) {
+    var next = {};
+    var breakpoints = (0, _lodash.default)(theme, 'breakpoints', ['40em', '52em', '64em']);
+    var mediaQueries = [null].concat(_toConsumableArray(breakpoints.map(function (n) {
+      return "@media screen and (min-width: ".concat(n, ")");
+    })));
 
-  var styles = function styles(props) {
-    return (0, _lodash5.default)((0, _lodash.default)(props, ['theme'].concat(_toConsumableArray(systemProps))), function (val) {
-      return _typeof(val) !== 'object';
-    });
+    for (var key in styles) {
+      var value = styles[key];
+
+      if (value && !Array.isArray(value) && _typeof(value) === 'object') {
+        next[key] = responsive(value)(theme);
+        continue;
+      }
+
+      if (!Array.isArray(value)) {
+        next[key] = value;
+        continue;
+      }
+
+      for (var i = 0; i < value.length; i++) {
+        var media = mediaQueries[i];
+
+        if (!media) {
+          next[key] = value[i];
+          continue;
+        }
+
+        next[media] = next[media] || {};
+        next[media][key] = value[i];
+      }
+    }
+
+    return next;
   };
+};
 
-  var system = _styledSystem.compose.apply(void 0, [styles].concat(_toConsumableArray(funcs)));
+exports.responsive = responsive;
 
-  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 = (0, _lodash3.default)(system(_objectSpread({
-        theme: theme
-      }, style, styleProps)));
+var css = function css(args) {
+  return function () {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-      for (var key in style) {
-        var value = style[key];
-        if (!value || _typeof(value) !== 'object' || Array.isArray(value)) continue;
-        if (systemRegExp.test(key)) continue;
-        styles.push(_defineProperty({}, key, css(value)({
-          theme: theme
-        })));
+    var theme = _objectSpread({}, defaultTheme, props.theme || props);
+
+    var result = {};
+    var obj = typeof args === 'function' ? args(theme) : args;
+    var styles = responsive(obj)(theme);
+
+    for (var key in styles) {
+      var prop = aliases[key] || key;
+      var scaleName = scales[prop] || scales[prop[0]];
+      var scale = (0, _lodash.default)(theme, scaleName, (0, _lodash.default)(theme, prop, {}));
+      var x = styles[key];
+      var val = typeof x === 'function' ? x(theme) : x;
+
+      if (val && _typeof(val) === 'object') {
+        result[prop] = css(val)(theme);
+        continue;
       }
 
-      return _lodash4.default.apply(void 0, _toConsumableArray((0, _lodash3.default)(styles.filter(Boolean))));
-    };
+      var value = (0, _lodash.default)(scale, val, val);
+
+      if (Array.isArray(prop)) {
+        for (var i = 0; i < prop.length; i++) {
+          result[prop[i]] = value;
+        }
+      } else {
+        result[prop] = value;
+      }
+    }
+
+    return result;
   };
-
-  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

@@ -1,71 +0,131 @@
-import {
-  compose,
-  space,
-  color,
-  fontFamily,
-  fontSize,
-  fontWeight,
-  lineHeight,
-} from 'styled-system'
-import omit from 'lodash.omit'
-import pick from 'lodash.pick'
-import flatten from 'lodash.flatten'
-import merge from 'lodash.merge'
-import pickBy from 'lodash.pickby'
+import get from 'lodash.get'
 
-const getSystemProps = funcs => [
-  ...funcs.map(fn => Object.keys(fn.propTypes))
-    .reduce((a, props) => [ ...a, ...props ], []),
-  'mx',
-  'my',
-  'px',
-  'py',
-]
+const defaultBreakpoints = [40, 52, 64].map(n => n + 'em')
 
-export const createCSS = (funcs) => {
-  const systemProps = getSystemProps(funcs)
+const defaultTheme = {
+  space: [
+    0, 4, 8, 16, 32, 64, 128, 256, 512
+  ],
+  fontSizes: [
+    12, 14, 16, 20, 24, 32, 48, 64, 72
+  ],
+}
 
-  const systemRegExp = new RegExp(
-    `^(${systemProps.join('|')})$`
-  )
+const aliases = {
+  bg: 'backgroundColor',
+  m: 'margin',
+  mt: 'marginTop',
+  mr: 'marginRight',
+  mb: 'marginBottom',
+  ml: 'marginLeft',
+  mx: [ 'marginLeft', 'marginRight' ],
+  my: [ 'marginTop', 'marginBottom' ],
+  marginX: [ 'marginLeft', 'marginRight' ],
+  marginY: [ 'marginTop', 'marginBottom' ],
+  p: 'padding',
+  pt: 'paddingTop',
+  pr: 'paddingRight',
+  pb: 'paddingBottom',
+  pl: 'paddingLeft',
+  px: [ 'paddingLeft', 'paddingRight' ],
+  py: [ 'paddingTop', 'paddingBottom' ],
+  paddingX: [ 'paddingLeft', 'paddingRight' ],
+  paddingY: [ 'paddingTop', 'paddingBottom' ],
+}
 
-  const styles = props => pickBy(
-    omit(props, [ 'theme', ...systemProps ]),
-    val => typeof val !== 'object'
-  )
+const scales = {
+  color: 'colors',
+  backgroundColor: 'colors',
+  borderColor: 'colors',
+  margin: 'space',
+  marginTop: 'space',
+  marginRight: 'space',
+  marginBottom: 'space',
+  marginLeft: 'space',
+  padding: 'space',
+  paddingTop: 'space',
+  paddingRight: 'space',
+  paddingBottom: 'space',
+  paddingLeft: 'space',
+  fontFamily: 'fonts',
+  fontSize: 'fontSizes',
+  fontWeight: 'fontWeights',
+  lineHeight: 'lineHeights',
+  letterSpacing: 'letterSpacings',
+  border: 'borders',
+  borderTop: 'borders',
+  borderRight: 'borders',
+  borderBottom: 'borders',
+  borderLeft: 'borders',
+  borderWidth: 'borderWidths',
+  borderStyle: 'borderStyles',
+  borderRadius: 'radii',
+  boxShadow: 'shadows',
+  zIndex: 'zIndices',
+  width: 'sizes',
+  minWidth: 'sizes',
+  maxWidth: 'sizes',
+  height: 'sizes',
+  minHeight: 'sizes',
+  maxHeight: 'sizes',
+}
 
-  const system = compose(
-    styles,
-    ...funcs
-  )
+export const responsive = styles => theme => {
+  const next = {}
+  const breakpoints = get(theme, 'breakpoints', [ '40em', '52em', '64em' ])
+  const mediaQueries = [ null, ...breakpoints.map(n => `@media screen and (min-width: ${n})`) ]
 
-  const css = style => (props = {}) => {
-    const theme = props.theme || props
-    const styleProps = pick(props, systemProps)
-    const styles = flatten(system({ theme, ...style, ...styleProps }))
+  for (const key in styles) {
+    const value = styles[key]
+    if (value && !Array.isArray(value) && typeof value === 'object') {
+      next[key] = responsive(value)(theme)
+      continue
+    }
+    if (!Array.isArray(value)) {
+      next[key] = value
+      continue
+    }
+    for (let i = 0; i < value.length; i++) {
+      const media = mediaQueries[i]
+      if (!media) {
+        next[key] = value[i]
+        continue
+      }
+      next[media] = next[media] || {}
+      next[media][key] = value[i]
+    }
+  }
 
-    for (const key in style) {
-      const value = style[key]
-      if (!value || typeof value !== 'object' || Array.isArray(value)) continue
-      if (systemRegExp.test(key)) continue
-      styles.push({
-        [key]: css(value)({ theme })
-      })
+  return next
+}
+
+export const css = args => (props = {}) => {
+  const theme = { ...defaultTheme, ...(props.theme || props) }
+  const result = {}
+  const obj = typeof args === 'function' ? args(theme) : args
+  const styles = responsive(obj)(theme)
+
+  for (const key in styles) {
+    const prop = aliases[key] || key
+    const scaleName = scales[prop] || scales[prop[0]]
+    const scale = get(theme, scaleName, get(theme, prop, {}))
+    const x = styles[key]
+    const val = typeof x === 'function' ? x(theme) : x
+    if (val && typeof val === 'object') {
+      result[prop] = css(val)(theme)
+      continue
     }
-    return merge(
-      ...flatten(styles.filter(Boolean))
-    )
+    const value = get(scale, val, val)
+    if (Array.isArray(prop)) {
+      for (let i = 0; i < prop.length; i++) {
+        result[prop[i]] = value
+      }
+    } else {
+      result[prop] = value
+    }
   }
-  return css
+
+  return result
 }
 
-export const css = createCSS([
-  space,
-  color,
-  fontFamily,
-  fontSize,
-  fontWeight,
-  lineHeight
-])
-
 export default css

package.json

 {
   "name": "@styled-system/css",
-  "version": "1.0.3",
+  "version": "2.0.0-0",
   "description": "",
@@ -14,9 +14,3 @@ "main": "dist.js",
   "dependencies": {
-    "lodash.flatten": "^4.4.0",
-    "lodash.isobject": "^3.0.2",
-    "lodash.merge": "^4.6.1",
-    "lodash.omit": "^4.5.0",
-    "lodash.pick": "^4.4.0",
-    "lodash.pickby": "^4.6.0",
-    "styled-system": "^4.1.0-0"
+    "lodash.get": "^4.4.2"
   },
@@ -23,0 +17,0 @@ "devDependencies": {

README.md

@@ -28,7 +28,7 @@
 ```js
-// usage with styled components
+// usage with a styled HOC
 import styled from '@emotion/styled'
 import css from '@styled-system/css'
 
-const Boop = styled(
+const Boop = styled('div')(
   css({
@@ -45,36 +45,55 @@ fontSize: [ 4, 5, 6 ],
 
-## Keys
+## Theme 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.
+The following keys in your style object will work the same as Styled System props, pulling values from your `theme` object.
 
-- `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`
+Property  | Theme Key
+---|---
+`fontFamily` | `fonts`
+`fontSize` | `fontSizes`
+`fontWeight` | `fontWeights`
+`lineHeight` | `lineHeights`
+`letterSpacing` | `letterSpacings`
+`color` | `colors`
+`backgroundColor`, `bg` | `colors`
+`margin`, `m` | `space`
+`marginTop`, `mt` | `space`
+`marginRight`, `mr` | `space`
+`marginBottom`, `mb` | `space`
+`marginLeft`, `ml` | `space`
+`marginX`, `mx` | `space`
+`marginY`, `my` | `space`
+`padding`, `p` | `space`
+`paddingTop`, `pt` | `space`
+`paddingRight`, `pr` | `space`
+`paddingBottom`, `pb` | `space`
+`paddingLeft`, `pl` | `space`
+`paddingX`, `px` | `space`
+`paddingY`, `py` | `space`
+`border` | `borders`
+`borderTop` | `borders`
+`borderRight` | `borders`
+`borderBottom` | `borders`
+`borderLeft` | `borders`
+`borderColor` | `colors`
+`borderWidth` | `borderWidths`
+`borderStyle` | `borderStyles`
+`borderRadius` | `radii`
+`boxShadow` | `shadows`
+`zIndex` | `zIndices`
+`width` | `sizes`
+`minWidth` | `sizes`
+`maxWidth` | `sizes`
+`height` | `sizes`
+`minHeight` | `sizes`
+`maxHeight` | `sizes`
 
-In this example, `fontSize` accepts an array, and `borderBottom` is passed through as plain CSS.
+## Responsive Arrays
 
+All CSS properties accept arrays as values for responsive styles.
+
 ```jsx
 <div
   css={css({
-    // Styled System key
-    fontSize: [ 3, 4, 5 ],
-    // CSS property
-    borderBottom: '2px solid tomato',
+    fontSize: [ 4, 5, 6 ],
   })}
@@ -84,15 +103,15 @@ />
 
-## Props
+In this example, `fontSize` accepts an array, picking up values from the `theme.fontSizes` scale, and `borderBottom` is passed through as plain CSS.
 
-When using `@styled-system/css` with styled components,
-Styled System props can be used on the resulting component.
-
 ```jsx
-<Beep
-  color='primary'
-  bg='black'
+<div
+  css={css({
+    // Styled System key
+    fontSize: [ 3, 4, 5 ],
+    // CSS property
+    borderBottom: '2px solid tomato',
+  })}
 />
 ```
 
-
 MIT License

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

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

11823

increased by47.62%

Dependency count

1

decreased by-85.71%

Lines of code

263

increased by110.4%

Number of lines in readme file

115

increased by19.79%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlodash.get@^4.4.2

• + Addedlodash.get@4.4.2(transitive)

• - Removedlodash.flatten@^4.4.0

• - Removedlodash.isobject@^3.0.2

• - Removedlodash.merge@^4.6.1

• - Removedlodash.omit@^4.5.0

• - Removedlodash.pick@^4.4.0

• - Removedlodash.pickby@^4.6.0

• - Removedstyled-system@^4.1.0-0

• - Removed@babel/runtime@7.25.6(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedlodash.flatten@4.4.0(transitive)

• - Removedlodash.isobject@3.0.2(transitive)

• - Removedlodash.merge@4.6.2(transitive)

• - Removedlodash.omit@4.5.0(transitive)

• - Removedlodash.pick@4.4.0(transitive)

• - Removedlodash.pickby@4.6.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedstyled-system@4.2.4(transitive)