Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

convertLength does not work for fromUnit !== 'px'

See original GitHub issue

The file @material-ui/core/styles/cssUtils.js contains a method convertLength. It does not work if the provided length is not in px. This test …

it('should convert rem to px', () => {
  const convert = convertLength('16px');
  expect(convert('2rem', 'px')).to.equal('32px');
});

… will fail.

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

import { convertLength } from "@material-ui/core/styles/cssUtils";
convertLength('16px')('2rem', 'px') // ==> '2rem'

Expected Behavior 🤔

import { convertLength } from "@material-ui/core/styles/cssUtils";
convertLength('16px')('2rem', 'px') // ==> '32px'

Looks like the method was badly ported over from https://github.com/KyleAMathews/convert-css-length.

I think this would make a great ‘first issue’, but not sure I’ll take the time to handle it myself. ✌️

Issue Analytics

State:
Created 3 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

brorlarsnicklascommented, Sep 25, 2020

I’ll give the PR a try, if that is ok? 😃

0reactions

oliviertassinaricommented, Sep 24, 2020

I had a quick look, there is a return that has nothing to do here:

diff --git a/packages/material-ui/src/styles/cssUtils.js b/packages/material-ui/src/styles/cssUtils.js
index 69036c3198..7d81edfaba 100644
--- a/packages/material-ui/src/styles/cssUtils.js
+++ b/packages/material-ui/src/styles/cssUtils.js
@@ -33,7 +33,6 @@ export function convertLength(baseFontSize) {
         pxLength = toUnitless(length) * toUnitless(baseFontSize);
       } else if (fromUnit === 'rem') {
         pxLength = toUnitless(length) * toUnitless(baseFontSize);
-        return length;
       }
     }

diff --git a/packages/material-ui/src/styles/cssUtils.test.js b/packages/material-ui/src/styles/cssUtils.test.js
index f8f9f4510f..a013ff9b9f 100644
--- a/packages/material-ui/src/styles/cssUtils.test.js
+++ b/packages/material-ui/src/styles/cssUtils.test.js
@@ -41,6 +41,7 @@ describe('cssUtils', () => {
     it('should work as expected', () => {
       const convert = convertLength('16px');
       expect(convert('32px', 'rem')).to.equal('2rem');
+      expect(convert('2rem', 'px')).to.equal('32px');
     });
   });

@stefanpl If you want to work on a pull request, feel free too 😃