[theme] Built-in convertLength method

docs/src/pages/customization/typography/ResponsiveFontSizesChart.js

@@ -1,5 +1,6 @@
+/* eslint-disable material-ui/restricted-path-imports */
 import React from 'react';
-import convertLength from 'convert-css-length';
+import { convertLength } from '@material-ui/core/styles/cssUtils';
 import { makeStyles, createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
 import {
  Legend,

packages/material-ui/package.json

@@ -54,7 +54,6 @@
  "@material-ui/utils": "^4.7.1",
  "@types/react-transition-group": "^4.2.0",
  "clsx": "^1.0.2",
- "convert-css-length": "^2.0.1",
  "hoist-non-react-statics": "^3.3.2",
  "popper.js": "^1.14.1",
  "prop-types": "^15.7.2",

packages/material-ui/src/styles/cssUtils.js

@@ -1,3 +1,63 @@
+export function isUnitless(value) {
+ return String(parseFloat(value)).length === String(value).length;
+}
+
+// Ported from Compass
+// https://github.com/Compass/compass/blob/master/core/stylesheets/compass/typography/_units.scss
+// Emulate the sass function "unit"
+export function getUnit(input) {
+ return String(input).match(/[\d.\-+]*\s*(.*)/)[1] || '';
+}
+
+// Emulate the sass function "unitless"
+export function toUnitless(length) {
+ return parseFloat(length);
+}
+
+// Convert any CSS <length> or <percentage> value to any another.
+// From https://github.com/KyleAMathews/convert-css-length
+export function convertLength(baseFontSize) {
+ return (length, toUnit) => {
+ const fromUnit = getUnit(length);
+
+ // Optimize for cases where `from` and `to` units are accidentally the same.
+ if (fromUnit === toUnit) {
+ return length;
+ }
+
+ // Convert input length to pixels.
+ let pxLength = toUnitless(length);
+
+ if (fromUnit !== 'px') {
+ if (fromUnit === 'em') {
+ pxLength = toUnitless(length) * toUnitless(baseFontSize);
+ } else if (fromUnit === 'rem') {
+ pxLength = toUnitless(length) * toUnitless(baseFontSize);
+ } else if (fromUnit === 'ex') {
+ pxLength = toUnitless(length) * toUnitless(baseFontSize) * 2;
+ } else {
+ return length;
+ }
+ }
+
+ // Convert length in pixels to the output unit
+ let outputLength = pxLength;
+ if (toUnit !== 'px') {
+ if (toUnit === 'em') {
+ outputLength = pxLength / toUnitless(baseFontSize);
+ } else if (toUnit === 'rem') {
+ outputLength = pxLength / toUnitless(baseFontSize);
+ } else if (toUnit === 'ex') {
+ outputLength = pxLength / toUnitless(baseFontSize) / 2;
+ } else {
+ return length;
+ }
+ }
+
+ return parseFloat(outputLength.toFixed(5)) + toUnit;
+ };
+}
+
 export function alignProperty({ size, grid }) {
  const sizeBelow = size - (size % grid);
  const sizeAbove = sizeBelow + grid;

packages/material-ui/src/styles/cssUtils.test.js

@@ -1,7 +1,49 @@
-import { assert } from 'chai';
-import { alignProperty, fontGrid, responsiveProperty } from './cssUtils';
+import { expect } from 'chai';
+import {
+ isUnitless,
+ getUnit,
+ toUnitless,
+ convertLength,
+ alignProperty,
+ fontGrid,
+ responsiveProperty,
+} from './cssUtils';
 
 describe('cssUtils', () => {
+ describe('isUnitless', () => {
+ it('should work as expected', () => {
+ expect(isUnitless('20px')).to.equal(false);
+ expect(isUnitless('2.5 px')).to.equal(false);
+ expect(isUnitless('2.5 %')).to.equal(false);
+ expect(isUnitless('-2.5')).to.equal(true);
+ });
+ });
+
+ describe('getUnit', () => {
+ it('should work as expected', () => {
+ expect(getUnit('20px')).to.equal('px');
+ expect(getUnit('2.5 px')).to.equal('px');
+ expect(getUnit('2.5 %')).to.equal('%');
+ expect(getUnit('-2.5')).to.equal('');
+ });
+ });
+
+ describe('toUnitless', () => {
+ it('should work as expected', () => {
+ expect(toUnitless('20px')).to.equal(20);
+ expect(toUnitless('2.5 px')).to.equal(2.5);
+ expect(toUnitless('2.5 %')).to.equal(2.5);
+ expect(toUnitless('-2.5')).to.equal(-2.5);
+ });
+ });
+
+ describe('convertLength', () => {
+ it('should work as expected', () => {
+ const convert = convertLength('16px');
+ expect(convert('32px', 'rem')).to.equal('2rem');
+ });
+ });
+
  describe('alignProperty', () => {
  const tests = [
  { args: { size: 8, grid: 4 }, expected: 8 },
@@ -19,7 +61,7 @@ describe('cssUtils', () => {
 
  it(`aligns ${size} on grid ${grid} to ${expected}`, () => {
  const sizeAligned = alignProperty({ size, grid });
- assert.strictEqual(sizeAligned, expected);
+ expect(sizeAligned).to.equal(expected);
  });
  });
  });
@@ -40,7 +82,7 @@ describe('cssUtils', () => {
 
  it(`should return a font grid such that the relative lineHeight is aligned`, () => {
  const absoluteLineHeight = grid * lineHeight * htmlFontSize;
- assert.strictEqual(Math.round((absoluteLineHeight % pixels) * 100000) / 100000, 0);
+ expect(Math.round((absoluteLineHeight % pixels) * 100000) / 100000).to.equal(0);
  });
  });
 
@@ -49,7 +91,7 @@ describe('cssUtils', () => {
  there is no smaller font aligning the lineHeight`, () => {
  const grid = fontGrid({ lineHeight, pixels, htmlFontSize });
  const absoluteLineHeight = grid * lineHeight * htmlFontSize;
- assert.strictEqual(Math.floor(absoluteLineHeight / pixels), 1);
+ expect(Math.floor(absoluteLineHeight / pixels)).to.equal(1);
  });
  });
  });
@@ -65,7 +107,7 @@ describe('cssUtils', () => {
  breakpoints: [300, 600],
  });
 
- assert.deepEqual(result, {
+ expect(result).to.deep.equal({
  fontSize: '15px',
  '@media (min-width:300px)': {
  fontSize: '17.5px',
@@ -87,7 +129,7 @@ describe('cssUtils', () => {
  breakpoints: [500],
  });
 
- assert.deepEqual(result, {
+ expect(result).to.deep.equal({
  fontSize: '0.875rem',
  '@media (min-width:500px)': {
  fontSize: '1rem',

packages/material-ui/src/styles/responsiveFontSizes.js

@@ -1,9 +1,4 @@
-import convertLength from 'convert-css-length';
-import { responsiveProperty, alignProperty, fontGrid } from './cssUtils';
-
-function isUnitless(value) {
- return String(parseFloat(value)).length === String(value).length;
-}
+import { isUnitless, convertLength, responsiveProperty, alignProperty, fontGrid } from './cssUtils';
 
 export default function responsiveFontSizes(themeInput, options = {}) {
  const {

yarn.lock

@@ -4845,11 +4845,6 @@ conventional-recommended-bump@^5.0.0:
  meow "^4.0.0"
  q "^1.5.1"
 
-convert-css-length@^2.0.1:
- version "2.0.1"
- resolved "https://registry.yarnpkg.com/convert-css-length/-/convert-css-length-2.0.1.tgz#90a76bde5bfd24d72881a5b45d02249b2c1d257c"
- integrity sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg==
-
 convert-source-map@1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"