@tonic-ui/styled-system - npm Package Compare versions

Comparing version 1.6.0 to 1.6.1

dist/index.cjs.js

@@ -380,4 +380,4 @@ 'use strict';
   var group = _ref.group,
-    properties = _ref.properties,
-    property = _ref.property,
+    propertiesProp = _ref.properties,
+    propertyProp = _ref.property,
     alias = _ref.alias,
@@ -388,11 +388,30 @@ scale = _ref.scale,
     transform = _ref$transform === void 0 ? getValue : _ref$transform;
-  properties = ensureArray(properties).concat(ensureArray(property));
-  var sx = function sx(value, scale, _props) {
-    var result = {};
-    var n = transform(value, scale, _props);
-    if (n !== null && n !== undefined) {
-      properties.forEach(function (prop) {
-        result[prop] = n;
-      });
+  var properties = [].concat(_toConsumableArray(ensureArray(propertiesProp)), _toConsumableArray(ensureArray(propertyProp)));
+
+  /**
+   * A utility function to transform style values based on a scale and apply them to a set of properties.
+   *
+   * @param {string|number} value - The style value to be transformed.
+   * @param {object} scale - The scale used to transform the value.
+   * @param {object} props - Additional props that may affect the transformation.
+   *
+   * @returns {object} An object containing the transformed style properties.
+   */
+  var sx = function sx(value, scale, props) {
+    var transformedValue = transform(value, scale, props);
+    if (transformedValue === null || transformedValue === undefined) {
+      return {};
     }
+    var result = properties.reduce(function (acc, property) {
+      if (_typeof(transformedValue) === 'object') {
+        var _transformedValue$pro;
+        // If the transformedValue is an object, it may contain multiple style properties that need to be applied individually.
+        // For example, `{ outline: 0 }` will be transformed into `{ outline: '2px solid transparent', outlineOffset: '2px' }`.
+        acc[property] = (_transformedValue$pro = transformedValue === null || transformedValue === void 0 ? void 0 : transformedValue[property]) !== null && _transformedValue$pro !== void 0 ? _transformedValue$pro : acc[property];
+      } else {
+        // If the transformedValue is a string or number, apply it to all the properties in the properties array.
+        acc[property] = transformedValue;
+      }
+      return acc;
+    }, {});
     return result;
@@ -424,2 +443,14 @@ };
 
+var outline$1 = function outline(value, scale, props) {
+  var isNoneOrZero = value === 'none' || value === '0' || value === 0;
+  if (isNoneOrZero) {
+    return {
+      outline: '2px solid transparent',
+      outlineOffset: '2px'
+    };
+  }
+  return {
+    outline: get(scale, value, value)
+  };
+};
 var positiveOrNegative = function positiveOrNegative(value, scale, props) {
@@ -1183,4 +1214,11 @@ /**
   outline: {
-    property: 'outline',
-    scale: 'outlines'
+    // If the "outline" property value is "0", "none", or 0, transform it to:
+    // {
+    //   outline: "2px solid transparent"
+    //   outlineOffset: "2px"
+    // }
+    // Otherwise, leave the "outline" property value as-is
+    properties: ['outline', 'outlineOffset'],
+    scale: 'outlines',
+    transform: outline$1
   },
@@ -1187,0 +1225,0 @@ outlineColor: {

dist/index.esm.js

@@ -378,4 +378,4 @@ function _iterableToArrayLimit(arr, i) {
   var group = _ref.group,
-    properties = _ref.properties,
-    property = _ref.property,
+    propertiesProp = _ref.properties,
+    propertyProp = _ref.property,
     alias = _ref.alias,
@@ -386,11 +386,30 @@ scale = _ref.scale,
     transform = _ref$transform === void 0 ? getValue : _ref$transform;
-  properties = ensureArray(properties).concat(ensureArray(property));
-  var sx = function sx(value, scale, _props) {
-    var result = {};
-    var n = transform(value, scale, _props);
-    if (n !== null && n !== undefined) {
-      properties.forEach(function (prop) {
-        result[prop] = n;
-      });
+  var properties = [].concat(_toConsumableArray(ensureArray(propertiesProp)), _toConsumableArray(ensureArray(propertyProp)));
+
+  /**
+   * A utility function to transform style values based on a scale and apply them to a set of properties.
+   *
+   * @param {string|number} value - The style value to be transformed.
+   * @param {object} scale - The scale used to transform the value.
+   * @param {object} props - Additional props that may affect the transformation.
+   *
+   * @returns {object} An object containing the transformed style properties.
+   */
+  var sx = function sx(value, scale, props) {
+    var transformedValue = transform(value, scale, props);
+    if (transformedValue === null || transformedValue === undefined) {
+      return {};
     }
+    var result = properties.reduce(function (acc, property) {
+      if (_typeof(transformedValue) === 'object') {
+        var _transformedValue$pro;
+        // If the transformedValue is an object, it may contain multiple style properties that need to be applied individually.
+        // For example, `{ outline: 0 }` will be transformed into `{ outline: '2px solid transparent', outlineOffset: '2px' }`.
+        acc[property] = (_transformedValue$pro = transformedValue === null || transformedValue === void 0 ? void 0 : transformedValue[property]) !== null && _transformedValue$pro !== void 0 ? _transformedValue$pro : acc[property];
+      } else {
+        // If the transformedValue is a string or number, apply it to all the properties in the properties array.
+        acc[property] = transformedValue;
+      }
+      return acc;
+    }, {});
     return result;
@@ -422,2 +441,14 @@ };
 
+var outline$1 = function outline(value, scale, props) {
+  var isNoneOrZero = value === 'none' || value === '0' || value === 0;
+  if (isNoneOrZero) {
+    return {
+      outline: '2px solid transparent',
+      outlineOffset: '2px'
+    };
+  }
+  return {
+    outline: get(scale, value, value)
+  };
+};
 var positiveOrNegative = function positiveOrNegative(value, scale, props) {
@@ -1181,4 +1212,11 @@ /**
   outline: {
-    property: 'outline',
-    scale: 'outlines'
+    // If the "outline" property value is "0", "none", or 0, transform it to:
+    // {
+    //   outline: "2px solid transparent"
+    //   outlineOffset: "2px"
+    // }
+    // Otherwise, leave the "outline" property value as-is
+    properties: ['outline', 'outlineOffset'],
+    scale: 'outlines',
+    transform: outline$1
   },
@@ -1185,0 +1223,0 @@ outlineColor: {

package.json

 {
   "name": "@tonic-ui/styled-system",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "The framework agnostic styling engine for Tonic UI.",
@@ -81,3 +81,3 @@ "main": "dist/index.cjs.js",
   ],
-  "gitHead": "da00cb4b249dadeb5ff1aa9af712a286ca420a39"
+  "gitHead": "d363f81f3570ea35640e63082727a544c9a676bf"
 }

No alert changes

Improved metrics

Total package byte prevSize

91012

increased by4.28%

Lines of code

3216

increased by2.36%

No dependency changes