px2rem.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  8. var _unitless = _interopRequireDefault(require("@emotion/unitless"));
  9. /**
  10. * respect https://github.com/cuth/postcss-pxtorem
  11. */
  12. const pxRegex = /url\([^)]+\)|var\([^)]+\)|(\d*\.?\d+)px/g;
  13. function toFixed(number, precision) {
  14. const multiplier = Math.pow(10, precision + 1),
  15. wholeNumber = Math.floor(number * multiplier);
  16. return Math.round(wholeNumber / 10) * 10 / multiplier;
  17. }
  18. const transform = function () {
  19. let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  20. const {
  21. rootValue = 16,
  22. precision = 5,
  23. mediaQuery = false
  24. } = options;
  25. const pxReplace = (m, $1) => {
  26. if (!$1) return m;
  27. const pixels = parseFloat($1);
  28. // covenant: pixels <= 1, not transform to rem @zombieJ
  29. if (pixels <= 1) return m;
  30. const fixedVal = toFixed(pixels / rootValue, precision);
  31. return `${fixedVal}rem`;
  32. };
  33. const visit = cssObj => {
  34. const clone = (0, _extends2.default)({}, cssObj);
  35. Object.entries(cssObj).forEach(_ref => {
  36. let [key, value] = _ref;
  37. if (typeof value === 'string' && value.includes('px')) {
  38. const newValue = value.replace(pxRegex, pxReplace);
  39. clone[key] = newValue;
  40. }
  41. // no unit
  42. if (!_unitless.default[key] && typeof value === 'number' && value !== 0) {
  43. clone[key] = `${value}px`.replace(pxRegex, pxReplace);
  44. }
  45. // Media queries
  46. const mergedKey = key.trim();
  47. if (mergedKey.startsWith('@') && mergedKey.includes('px') && mediaQuery) {
  48. const newKey = key.replace(pxRegex, pxReplace);
  49. clone[newKey] = clone[key];
  50. delete clone[key];
  51. }
  52. });
  53. return clone;
  54. };
  55. return {
  56. visit
  57. };
  58. };
  59. var _default = exports.default = transform;