@styled-system/css
Advanced tools
Comparing version 2.0.2 to 2.0.3
83
dist.js
@@ -6,8 +6,4 @@ "use strict"; | ||
}); | ||
exports.default = exports.css = exports.responsive = void 0; | ||
exports["default"] = exports.css = exports.responsive = void 0; | ||
var _lodash = _interopRequireDefault(require("lodash.get")); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
@@ -27,2 +23,17 @@ | ||
// based on https://github.com/developit/dlv | ||
var get = function get(obj) { | ||
var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; | ||
var def = arguments.length > 2 ? arguments[2] : undefined; | ||
var p = arguments.length > 3 ? arguments[3] : undefined; | ||
var undef = arguments.length > 4 ? arguments[4] : undefined; | ||
key = key.split ? key.split('.') : [key]; | ||
for (p = 0; p < key.length; p++) { | ||
obj = obj ? obj[key[p]] : undef; | ||
} | ||
return obj === undef ? def : obj; | ||
}; | ||
var defaultBreakpoints = [40, 52, 64].map(function (n) { | ||
@@ -42,6 +53,4 @@ return n + 'em'; | ||
ml: 'marginLeft', | ||
mx: ['marginLeft', 'marginRight'], | ||
my: ['marginTop', 'marginBottom'], | ||
marginX: ['marginLeft', 'marginRight'], | ||
marginY: ['marginTop', 'marginBottom'], | ||
mx: 'marginX', | ||
my: 'marginY', | ||
p: 'padding', | ||
@@ -52,4 +61,8 @@ pt: 'paddingTop', | ||
pl: 'paddingLeft', | ||
px: ['paddingLeft', 'paddingRight'], | ||
py: ['paddingTop', 'paddingBottom'], | ||
px: 'paddingX', | ||
py: 'paddingY' | ||
}; | ||
var directions = { | ||
marginX: ['marginLeft', 'marginRight'], | ||
marginY: ['marginTop', 'marginBottom'], | ||
paddingX: ['paddingLeft', 'paddingRight'], | ||
@@ -67,2 +80,4 @@ paddingY: ['paddingTop', 'paddingBottom'] | ||
marginLeft: 'space', | ||
marginX: 'space', | ||
marginY: 'space', | ||
padding: 'space', | ||
@@ -73,2 +88,4 @@ paddingTop: 'space', | ||
paddingLeft: 'space', | ||
paddingX: 'space', | ||
paddingY: 'space', | ||
fontFamily: 'fonts', | ||
@@ -101,6 +118,27 @@ fontSize: 'fontSizes', | ||
var getMargin = function getMargin(scale, value) { | ||
if (typeof value !== 'number' || value >= 0) { | ||
return get(scale, value, value); | ||
} | ||
var absolute = Math.abs(value); | ||
var n = get(scale, absolute, absolute); | ||
if (typeof n === 'string') return '-' + n; | ||
return n * -1; | ||
}; | ||
var transforms = { | ||
margin: getMargin, | ||
marginTop: getMargin, | ||
marginRight: getMargin, | ||
marginBottom: getMargin, | ||
marginLeft: getMargin, | ||
marginX: getMargin, | ||
marginY: getMargin | ||
}; | ||
var responsive = function responsive(styles) { | ||
return function (theme) { | ||
var next = {}; | ||
var breakpoints = (0, _lodash.default)(theme, 'breakpoints', ['40em', '52em', '64em']); | ||
var breakpoints = get(theme, 'breakpoints', ['40em', '52em', '64em']); | ||
var mediaQueries = [null].concat(_toConsumableArray(breakpoints.map(function (n) { | ||
@@ -148,5 +186,5 @@ return "@media screen and (min-width: ".concat(n, ")"); | ||
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 prop = get(aliases, key, key); | ||
var scaleName = get(scales, prop); | ||
var scale = get(theme, scaleName, get(theme, prop, {})); | ||
var x = styles[key]; | ||
@@ -156,3 +194,3 @@ var val = typeof x === 'function' ? x(theme) : x; | ||
if (key === 'variant') { | ||
var variant = css((0, _lodash.default)(theme, val))(theme); | ||
var variant = css(get(theme, val))(theme); | ||
result = _objectSpread({}, result, variant); | ||
@@ -167,7 +205,10 @@ continue; | ||
var value = (0, _lodash.default)(scale, val, val); | ||
var transform = get(transforms, prop, get); | ||
var value = transform(scale, val, val); | ||
if (Array.isArray(prop)) { | ||
for (var i = 0; i < prop.length; i++) { | ||
result[prop[i]] = value; | ||
if (directions[prop]) { | ||
var dirs = directions[prop]; | ||
for (var i = 0; i < dirs.length; i++) { | ||
result[dirs[i]] = value; | ||
} | ||
@@ -185,2 +226,2 @@ } else { | ||
var _default = css; | ||
exports.default = _default; | ||
exports["default"] = _default; |
62
index.js
@@ -1,2 +0,9 @@ | ||
import get from 'lodash.get' | ||
// based on https://github.com/developit/dlv | ||
const get = (obj, key = '', def, p, undef) => { | ||
key = key.split ? key.split('.') : [key] | ||
for (p = 0; p < key.length; p++) { | ||
obj = obj ? obj[key[p]] : undef | ||
} | ||
return obj === undef ? def : obj | ||
} | ||
@@ -21,6 +28,4 @@ const defaultBreakpoints = [40, 52, 64].map(n => n + 'em') | ||
ml: 'marginLeft', | ||
mx: [ 'marginLeft', 'marginRight' ], | ||
my: [ 'marginTop', 'marginBottom' ], | ||
marginX: [ 'marginLeft', 'marginRight' ], | ||
marginY: [ 'marginTop', 'marginBottom' ], | ||
mx: 'marginX', | ||
my: 'marginY', | ||
p: 'padding', | ||
@@ -31,4 +36,9 @@ pt: 'paddingTop', | ||
pl: 'paddingLeft', | ||
px: [ 'paddingLeft', 'paddingRight' ], | ||
py: [ 'paddingTop', 'paddingBottom' ], | ||
px: 'paddingX', | ||
py: 'paddingY', | ||
} | ||
const directions = { | ||
marginX: [ 'marginLeft', 'marginRight' ], | ||
marginY: [ 'marginTop', 'marginBottom' ], | ||
paddingX: [ 'paddingLeft', 'paddingRight' ], | ||
@@ -47,2 +57,4 @@ paddingY: [ 'paddingTop', 'paddingBottom' ], | ||
marginLeft: 'space', | ||
marginX: 'space', | ||
marginY: 'space', | ||
padding: 'space', | ||
@@ -53,2 +65,4 @@ paddingTop: 'space', | ||
paddingLeft: 'space', | ||
paddingX: 'space', | ||
paddingY: 'space', | ||
fontFamily: 'fonts', | ||
@@ -81,2 +95,22 @@ fontSize: 'fontSizes', | ||
const getMargin = (scale, value) => { | ||
if (typeof value !== 'number' || value >= 0) { | ||
return get(scale, value, value) | ||
} | ||
const absolute = Math.abs(value) | ||
const n = get(scale, absolute, absolute) | ||
if (typeof n === 'string') return '-' + n | ||
return n * -1 | ||
} | ||
const transforms = { | ||
margin: getMargin, | ||
marginTop: getMargin, | ||
marginRight: getMargin, | ||
marginBottom: getMargin, | ||
marginLeft: getMargin, | ||
marginX: getMargin, | ||
marginY: getMargin, | ||
} | ||
export const responsive = styles => theme => { | ||
@@ -114,4 +148,4 @@ const next = {} | ||
for (const key in styles) { | ||
const prop = aliases[key] || key | ||
const scaleName = scales[prop] || scales[prop[0]] | ||
const prop = get(aliases, key, key) | ||
const scaleName = get(scales, prop) | ||
const scale = get(theme, scaleName, get(theme, prop, {})) | ||
@@ -129,6 +163,8 @@ const x = styles[key] | ||
} | ||
const value = get(scale, val, val) | ||
if (Array.isArray(prop)) { | ||
for (let i = 0; i < prop.length; i++) { | ||
result[prop[i]] = value | ||
const transform = get(transforms, prop, get) | ||
const value = transform(scale, val, val) | ||
if (directions[prop]) { | ||
const dirs = directions[prop] | ||
for (let i = 0; i < dirs.length; i++) { | ||
result[dirs[i]] = value | ||
} | ||
@@ -135,0 +171,0 @@ } else { |
{ | ||
"name": "@styled-system/css", | ||
"version": "2.0.2", | ||
"version": "2.0.3", | ||
"description": "", | ||
@@ -13,12 +13,10 @@ "main": "dist.js", | ||
"license": "MIT", | ||
"dependencies": { | ||
"lodash.get": "^4.4.2" | ||
}, | ||
"dependencies": {}, | ||
"devDependencies": { | ||
"@babel/cli": "^7.2.3", | ||
"@babel/core": "^7.4.0", | ||
"@babel/preset-env": "^7.4.2", | ||
"@babel/register": "^7.4.0", | ||
"@babel/cli": "^7.4.4", | ||
"@babel/core": "^7.4.5", | ||
"@babel/preset-env": "^7.4.5", | ||
"@babel/register": "^7.4.4", | ||
"ava": "^1.4.1", | ||
"nyc": "^13.3.0" | ||
"nyc": "^14.1.1" | ||
}, | ||
@@ -25,0 +23,0 @@ "ava": { |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
13713
0
342
- Removedlodash.get@^4.4.2
- Removedlodash.get@4.4.2(transitive)