inline-style-expand-shorthand - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

es/expandProperty.js

@@ -11,9 +11,37 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var WHITESPACE_NO_CALC = /\s+(?=[^)]*?(?:\(|$))/g;
-var LENGTH_UNIT = /(calc\(|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|q|in|pt|pc|px|dpi|dpcm|dppx|%|auto)$/i;
+var LENGTH_UNIT = /(em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|q|in|pt|pc|px|dpi|dpcm|dppx|%|auto)$/i;
+var CALC = /^(calc\()/i;
+var VAR = /^(var\()/i;
 var BORDER_STYLE = /^(dashed|dotted|double|groove|hidden|inset|none|outset|ridge|solid)$/i;
 var BORDER_WIDTH = /^(thick|medium|think)$/i;
 
+function splitShorthand(value) {
+  var values = [''];
+  var openParensCount = 0;
+  var trimmedValue = value.trim();
+
+  for (var index = 0; index < trimmedValue.length; index += 1) {
+    if (trimmedValue.charAt(index) === ' ' && openParensCount === 0) {
+      // Add new value
+      values.push('');
+    } else {
+      // Add the current character to the current value
+      values[values.length - 1] = values[values.length - 1] + trimmedValue.charAt(index);
+    } // Keep track of the number of parentheses that are yet to be closed.
+    // This is done to avoid splitting at whitespaces within CSS functions.
+    // E.g.: `calc(1px + 1em)`
+
+
+    if (trimmedValue.charAt(index) === '(') {
+      openParensCount++;
+    } else if (trimmedValue.charAt(index) === ')') {
+      openParensCount--;
+    }
+  }
+
+  return values;
+}
+
 function parseBorder(value, resolve) {
-  var values = value.split(WHITESPACE_NO_CALC);
+  var values = splitShorthand(value);
   var longhands = {};
@@ -23,3 +51,3 @@ values.forEach(function (val) {
       longhands[resolve('Style')] = val;
-    } else if (val.match(BORDER_WIDTH) !== null || val.match(LENGTH_UNIT) !== null || val === '0') {
+    } else if (val.match(BORDER_WIDTH) !== null || val.match(LENGTH_UNIT) !== null || val.match(CALC) !== null || val === '0') {
       longhands[resolve('Width')] = val;
@@ -36,11 +64,11 @@ } else {
 
-  var _value$split = value.split(WHITESPACE_NO_CALC),
-      _value$split2 = _slicedToArray(_value$split, 4),
-      Top = _value$split2[0],
-      _value$split2$ = _value$split2[1],
-      Right = _value$split2$ === void 0 ? Top : _value$split2$,
-      _value$split2$2 = _value$split2[2],
-      Bottom = _value$split2$2 === void 0 ? Top : _value$split2$2,
-      _value$split2$3 = _value$split2[3],
-      Left = _value$split2$3 === void 0 ? Right : _value$split2$3;
+  var _splitShorthand = splitShorthand(value),
+      _splitShorthand2 = _slicedToArray(_splitShorthand, 4),
+      Top = _splitShorthand2[0],
+      _splitShorthand2$ = _splitShorthand2[1],
+      Right = _splitShorthand2$ === void 0 ? Top : _splitShorthand2$,
+      _splitShorthand2$2 = _splitShorthand2[2],
+      Bottom = _splitShorthand2$2 === void 0 ? Top : _splitShorthand2$2,
+      _splitShorthand2$3 = _splitShorthand2[3],
+      Left = _splitShorthand2$3 === void 0 ? Right : _splitShorthand2$3;
 
@@ -86,6 +114,6 @@ return _ref = {}, _defineProperty(_ref, resolve('Top'), Top), _defineProperty(_ref, resolve('Right'), Right), _defineProperty(_ref, resolve('Bottom'), Bottom), _defineProperty(_ref, resolve('Left'), Left), _ref;
 function parseFlex(value) {
-  var values = value.split(WHITESPACE_NO_CALC);
+  var values = splitShorthand(value);
   var longhands = {};
   values.forEach(function (val) {
-    if (val.match(LENGTH_UNIT) !== null) {
+    if (val.match(LENGTH_UNIT) !== null || val.match(CALC) !== null || val.match(VAR) !== null) {
       longhands.flexBasis = val;
@@ -92,0 +120,0 @@ } else {

lib/expandProperty.js

@@ -18,9 +18,37 @@ "use strict";
 
-var WHITESPACE_NO_CALC = /\s+(?=[^)]*?(?:\(|$))/g;
-var LENGTH_UNIT = /(calc\(|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|q|in|pt|pc|px|dpi|dpcm|dppx|%|auto)$/i;
+var LENGTH_UNIT = /(em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|q|in|pt|pc|px|dpi|dpcm|dppx|%|auto)$/i;
+var CALC = /^(calc\()/i;
+var VAR = /^(var\()/i;
 var BORDER_STYLE = /^(dashed|dotted|double|groove|hidden|inset|none|outset|ridge|solid)$/i;
 var BORDER_WIDTH = /^(thick|medium|think)$/i;
 
+function splitShorthand(value) {
+  var values = [''];
+  var openParensCount = 0;
+  var trimmedValue = value.trim();
+
+  for (var index = 0; index < trimmedValue.length; index += 1) {
+    if (trimmedValue.charAt(index) === ' ' && openParensCount === 0) {
+      // Add new value
+      values.push('');
+    } else {
+      // Add the current character to the current value
+      values[values.length - 1] = values[values.length - 1] + trimmedValue.charAt(index);
+    } // Keep track of the number of parentheses that are yet to be closed.
+    // This is done to avoid splitting at whitespaces within CSS functions.
+    // E.g.: `calc(1px + 1em)`
+
+
+    if (trimmedValue.charAt(index) === '(') {
+      openParensCount++;
+    } else if (trimmedValue.charAt(index) === ')') {
+      openParensCount--;
+    }
+  }
+
+  return values;
+}
+
 function parseBorder(value, resolve) {
-  var values = value.split(WHITESPACE_NO_CALC);
+  var values = splitShorthand(value);
   var longhands = {};
@@ -30,3 +58,3 @@ values.forEach(function (val) {
       longhands[resolve('Style')] = val;
-    } else if (val.match(BORDER_WIDTH) !== null || val.match(LENGTH_UNIT) !== null || val === '0') {
+    } else if (val.match(BORDER_WIDTH) !== null || val.match(LENGTH_UNIT) !== null || val.match(CALC) !== null || val === '0') {
       longhands[resolve('Width')] = val;
@@ -43,11 +71,11 @@ } else {
 
-  var _value$split = value.split(WHITESPACE_NO_CALC),
-      _value$split2 = _slicedToArray(_value$split, 4),
-      Top = _value$split2[0],
-      _value$split2$ = _value$split2[1],
-      Right = _value$split2$ === void 0 ? Top : _value$split2$,
-      _value$split2$2 = _value$split2[2],
-      Bottom = _value$split2$2 === void 0 ? Top : _value$split2$2,
-      _value$split2$3 = _value$split2[3],
-      Left = _value$split2$3 === void 0 ? Right : _value$split2$3;
+  var _splitShorthand = splitShorthand(value),
+      _splitShorthand2 = _slicedToArray(_splitShorthand, 4),
+      Top = _splitShorthand2[0],
+      _splitShorthand2$ = _splitShorthand2[1],
+      Right = _splitShorthand2$ === void 0 ? Top : _splitShorthand2$,
+      _splitShorthand2$2 = _splitShorthand2[2],
+      Bottom = _splitShorthand2$2 === void 0 ? Top : _splitShorthand2$2,
+      _splitShorthand2$3 = _splitShorthand2[3],
+      Left = _splitShorthand2$3 === void 0 ? Right : _splitShorthand2$3;
 
@@ -93,6 +121,6 @@ return _ref = {}, _defineProperty(_ref, resolve('Top'), Top), _defineProperty(_ref, resolve('Right'), Right), _defineProperty(_ref, resolve('Bottom'), Bottom), _defineProperty(_ref, resolve('Left'), Left), _ref;
 function parseFlex(value) {
-  var values = value.split(WHITESPACE_NO_CALC);
+  var values = splitShorthand(value);
   var longhands = {};
   values.forEach(function (val) {
-    if (val.match(LENGTH_UNIT) !== null) {
+    if (val.match(LENGTH_UNIT) !== null || val.match(CALC) !== null || val.match(VAR) !== null) {
       longhands.flexBasis = val;
@@ -99,0 +127,0 @@ } else {

package.json

 {
   "name": "inline-style-expand-shorthand",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "repository": "https://github.com/rofrischmann/inline-style-expand-shorthand.git",
@@ -5,0 +5,0 @@ "author": "rofrischmann <[e-mail]>",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24636

increased by8.01%

Lines of code

441

increased by11.65%

No dependency changes