px2rem.js 1.7 KB

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