px2rem.js 2.2 KB

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