You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
2.2 KiB
69 lines
2.2 KiB
3 years ago
|
"use strict";
|
||
|
|
|
||
|
|
exports.__esModule = true;
|
||
|
|
exports["default"] = retinaImage;
|
||
|
|
|
||
|
|
var _hiDPI = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("./hiDPI"));
|
||
|
|
|
||
|
|
var _errors = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("../internalHelpers/_errors"));
|
||
|
|
|
||
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||
|
|
|
||
|
|
function _extends() { _extends = Object.assign || 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;
|