From 49e863fd0983402a5df9d5e7de127d3f8eb211e2 Mon Sep 17 00:00:00 2001 From: Brian Hough Date: Sun, 19 Apr 2020 00:19:24 -0400 Subject: [PATCH] fix(cssvar): trim space from cssVar fetched value getComputedStyle is returning values with a leading space. cssVar now properly trims that space in order to parse values properly. fix #493 --- docs/assets/polished.js | 39 ++++++++++++++++++++------------------- docs/docs/index.html | 6 +++--- package.json | 2 +- src/helpers/cssVar.js | 2 +- 4 files changed, 25 insertions(+), 24 deletions(-) diff --git a/docs/assets/polished.js b/docs/assets/polished.js index 5020e139..2757b2cc 100644 --- a/docs/assets/polished.js +++ b/docs/assets/polished.js @@ -657,7 +657,7 @@ if (variableValue) { - return variableValue; + return variableValue.trim(); } else { throw new PolishedError(74); } @@ -749,7 +749,7 @@ /** * Returns a given CSS value minus its unit of measure. * - * @deprecated - stripUnit's unitReturn functionality has been marked for deprecation in polished 4.0. It's functionality has been been moved to getUnitAndValue. + * @deprecated - stripUnit's unitReturn functionality has been marked for deprecation in polished 4.0. It's functionality has been been moved to getValueAndUnit. * * @example * // Styles as object usage @@ -774,7 +774,8 @@ var matchedValue = value.match(cssRegex); if (unitReturn) { - console.warn("stripUnit's unitReturn functionality has been marked for deprecation in polished 4.0. It's functionality has been been moved to getUnitAndValue."); + // eslint-disable-next-line no-console + console.warn("stripUnit's unitReturn functionality has been marked for deprecation in polished 4.0. It's functionality has been been moved to getValueAndUnit."); if (matchedValue) return [parseFloat(value), matchedValue[2]]; return [value, undefined]; } @@ -946,7 +947,7 @@ throw new PolishedError(43); } - var _ref = typeof base === 'string' ? stripUnit(base, true) : [base, ''], + var _ref = typeof base === 'string' ? getValueAndUnit(base) : [base, ''], realBase = _ref[0], unit = _ref[1]; @@ -956,7 +957,7 @@ throw new PolishedError(44, base); } - return "" + realBase * Math.pow(realRatio, steps) + unit; + return "" + realBase * Math.pow(realRatio, steps) + (unit || ''); } /** @@ -1018,21 +1019,21 @@ maxScreen = '1200px'; } - var _stripUnit = stripUnit(fromSize, true), - unitlessFromSize = _stripUnit[0], - fromSizeUnit = _stripUnit[1]; + var _getValueAndUnit = getValueAndUnit(fromSize), + unitlessFromSize = _getValueAndUnit[0], + fromSizeUnit = _getValueAndUnit[1]; - var _stripUnit2 = stripUnit(toSize, true), - unitlessToSize = _stripUnit2[0], - toSizeUnit = _stripUnit2[1]; + var _getValueAndUnit2 = getValueAndUnit(toSize), + unitlessToSize = _getValueAndUnit2[0], + toSizeUnit = _getValueAndUnit2[1]; - var _stripUnit3 = stripUnit(minScreen, true), - unitlessMinScreen = _stripUnit3[0], - minScreenUnit = _stripUnit3[1]; + var _getValueAndUnit3 = getValueAndUnit(minScreen), + unitlessMinScreen = _getValueAndUnit3[0], + minScreenUnit = _getValueAndUnit3[1]; - var _stripUnit4 = stripUnit(maxScreen, true), - unitlessMaxScreen = _stripUnit4[0], - maxScreenUnit = _stripUnit4[1]; + var _getValueAndUnit4 = getValueAndUnit(maxScreen), + unitlessMaxScreen = _getValueAndUnit4[0], + maxScreenUnit = _getValueAndUnit4[1]; if (typeof unitlessMinScreen !== 'number' || typeof unitlessMaxScreen !== 'number' || !minScreenUnit || !maxScreenUnit || minScreenUnit !== maxScreenUnit) { throw new PolishedError(47); @@ -1979,8 +1980,8 @@ foregroundColor = _ref.foregroundColor, _ref$backgroundColor = _ref.backgroundColor, backgroundColor = _ref$backgroundColor === void 0 ? 'transparent' : _ref$backgroundColor; - var widthAndUnit = stripUnit(width, true); - var heightAndUnit = stripUnit(height, true); + var widthAndUnit = getValueAndUnit(width); + var heightAndUnit = getValueAndUnit(height); if (isNaN(heightAndUnit[0]) || isNaN(widthAndUnit[0])) { throw new PolishedError(60); diff --git a/docs/docs/index.html b/docs/docs/index.html index 516c175f..daa83f27 100644 --- a/docs/docs/index.html +++ b/docs/docs/index.html @@ -8699,7 +8699,7 @@

Returns a given CSS value and its unit as elements of an array.

-
getValueAndUnit(value: string): [(number | string), (string | void)]
+
getValueAndUnit(value: (string | number)): any

@@ -8722,7 +8722,7 @@

- value (string) + value ((string | number))
@@ -8741,7 +8741,7 @@

Returns
- [(number | string), (string | void)] + any diff --git a/package.json b/package.json index e89bf9a2..f8335f6b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "polished", - "version": "3.5.1", + "version": "3.5.2", "description": "A lightweight toolset for writing styles in Javascript.", "license": "MIT", "author": "Brian Hough (https://polished.js.org)", diff --git a/src/helpers/cssVar.js b/src/helpers/cssVar.js index 3342732b..ba71ba92 100644 --- a/src/helpers/cssVar.js +++ b/src/helpers/cssVar.js @@ -46,7 +46,7 @@ export default function cssVar( /* eslint-enable */ if (variableValue) { - return variableValue + return variableValue.trim() } else { throw new PolishedError(74) }