59 lines
2.2 KiB
JavaScript
59 lines
2.2 KiB
JavaScript
"use strict";
|
|
|
|
exports.__esModule = true;
|
|
exports["default"] = retinaImage;
|
|
var _hiDPI = _interopRequireDefault(require("./hiDPI"));
|
|
var _errors = _interopRequireDefault(require("../internalHelpers/_errors"));
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
/**
|
|
* A helper to generate a retina background image and non-retina
|
|
* background image. The retina background image will output to a HiDPI media query. The mixin uses
|
|
* a _2x.png filename suffix by default.
|
|
*
|
|
* @example
|
|
* // Styles as object usage
|
|
* const styles = {
|
|
* ...retinaImage('my-img')
|
|
* }
|
|
*
|
|
* // styled-components usage
|
|
* const div = styled.div`
|
|
* ${retinaImage('my-img')}
|
|
* `
|
|
*
|
|
* // CSS as JS Output
|
|
* div {
|
|
* backgroundImage: 'url(my-img.png)',
|
|
* '@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
|
|
* only screen and (min--moz-device-pixel-ratio: 1.3),
|
|
* only screen and (-o-min-device-pixel-ratio: 1.3/1),
|
|
* only screen and (min-resolution: 144dpi),
|
|
* only screen and (min-resolution: 1.5dppx)': {
|
|
* backgroundImage: 'url(my-img_2x.png)',
|
|
* }
|
|
* }
|
|
*/
|
|
function retinaImage(filename, backgroundSize, extension, retinaFilename, retinaSuffix) {
|
|
var _ref;
|
|
if (extension === void 0) {
|
|
extension = 'png';
|
|
}
|
|
if (retinaSuffix === void 0) {
|
|
retinaSuffix = '_2x';
|
|
}
|
|
if (!filename) {
|
|
throw new _errors["default"](58);
|
|
}
|
|
// Replace the dot at the beginning of the passed extension if one exists
|
|
var ext = extension.replace(/^\./, '');
|
|
var rFilename = retinaFilename ? retinaFilename + "." + ext : "" + filename + retinaSuffix + "." + ext;
|
|
return _ref = {
|
|
backgroundImage: "url(" + filename + "." + ext + ")"
|
|
}, _ref[(0, _hiDPI["default"])()] = _extends({
|
|
backgroundImage: "url(" + rFilename + ")"
|
|
}, backgroundSize ? {
|
|
backgroundSize: backgroundSize
|
|
} : {}), _ref;
|
|
}
|
|
module.exports = exports.default; |