12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- "use strict";
- exports.__esModule = true;
- exports["default"] = remToPx;
- var _getValueAndUnit = _interopRequireDefault(require("./getValueAndUnit"));
- var _errors = _interopRequireDefault(require("../internalHelpers/_errors"));
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
- var defaultFontSize = 16;
- function convertBase(base) {
- var deconstructedValue = (0, _getValueAndUnit["default"])(base);
- if (deconstructedValue[1] === 'px') {
- return parseFloat(base);
- }
- if (deconstructedValue[1] === '%') {
- return parseFloat(base) / 100 * defaultFontSize;
- }
- throw new _errors["default"](78, deconstructedValue[1]);
- }
- function getBaseFromDoc() {
- /* eslint-disable */
- /* istanbul ignore next */
- if (typeof document !== 'undefined' && document.documentElement !== null) {
- var rootFontSize = getComputedStyle(document.documentElement).fontSize;
- return rootFontSize ? convertBase(rootFontSize) : defaultFontSize;
- }
- /* eslint-enable */
- /* istanbul ignore next */
- return defaultFontSize;
- }
- /**
- * Convert rem values to px. By default, the base value is pulled from the font-size property on the root element (if it is set in % or px). It defaults to 16px if not found on the root. You can also override the base value by providing your own base in % or px.
- * @example
- * // Styles as object usage
- * const styles = {
- * 'height': remToPx('1.6rem')
- * 'height': remToPx('1.6rem', '10px')
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- * height: ${remToPx('1.6rem')}
- * height: ${remToPx('1.6rem', '10px')}
- * `
- *
- * // CSS in JS Output
- *
- * element {
- * 'height': '25.6px',
- * 'height': '16px',
- * }
- */
- function remToPx(value, base) {
- var deconstructedValue = (0, _getValueAndUnit["default"])(value);
- if (deconstructedValue[1] !== 'rem' && deconstructedValue[1] !== '') {
- throw new _errors["default"](77, deconstructedValue[1]);
- }
- var newBase = base ? convertBase(base) : getBaseFromDoc();
- return deconstructedValue[0] * newBase + "px";
- }
- module.exports = exports.default;
|