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

Comparing version 2.0.2 to 2.0.3

dist/cjs/utils/transforms.js

 'use strict';
 
 var get = require('./get.js');
-var toCSSVariable = require('./toCSSVariable.js');
+var cssVars = require('./css-vars.js');
 
@@ -15,9 +15,8 @@ // Check if a value is a simple CSS variable
 var toNegativeValue = function toNegativeValue(scale, absoluteValue, options) {
-  var _options$props, _theme$config;
+  var _options$props;
   var theme = options === null || options === void 0 ? void 0 : (_options$props = options.props) === null || _options$props === void 0 ? void 0 : _options$props.theme;
-  var useCSSVariables = !!(theme !== null && theme !== void 0 && (_theme$config = theme.config) !== null && _theme$config !== void 0 && _theme$config.useCSSVariables); // defaults to false
   var n = getter(scale, absoluteValue, options);
 
   // Handle CSS variables for negative values
-  if (useCSSVariables && isSimpleCSSVariable(n)) {
+  if (!!(theme !== null && theme !== void 0 && theme.cssVariables) && isSimpleCSSVariable(n)) {
     // https://stackoverflow.com/questions/49469344/using-negative-css-custom-properties
@@ -34,11 +33,16 @@ return "calc(0px - ".concat(n, ")");
 var getter = function getter(scale, value, options) {
-  var _options$props2, _theme$config2, _theme$config3;
+  var _options$props2, _theme$cssVariables;
+  var result = get(scale, value);
+  if (result === undefined) {
+    return value; // fallback to value if result is undefined
+  }
   var theme = options === null || options === void 0 ? void 0 : (_options$props2 = options.props) === null || _options$props2 === void 0 ? void 0 : _options$props2.theme;
-  var prefix = theme === null || theme === void 0 ? void 0 : (_theme$config2 = theme.config) === null || _theme$config2 === void 0 ? void 0 : _theme$config2.prefix; // defaults to 'tonic'
-  var useCSSVariables = !!(theme !== null && theme !== void 0 && (_theme$config3 = theme.config) !== null && _theme$config3 !== void 0 && _theme$config3.useCSSVariables); // defaults to false
-  var result = get(scale, value);
-  if (result !== undefined && useCSSVariables) {
-    var _options$context, _theme$__cssVariableM;
+  // FIXME: `theme.config.prefix` and `theme.__cssVariableMap` are deprecated and will be removed in the next major release
+  var hasCSSVariables = !!((_theme$cssVariables = theme === null || theme === void 0 ? void 0 : theme.cssVariables) !== null && _theme$cssVariables !== void 0 ? _theme$cssVariables : theme === null || theme === void 0 ? void 0 : theme.__cssVariableMap);
+  if (hasCSSVariables) {
+    var _theme$cssVariablePre, _theme$config, _theme$cssVariables2, _options$context;
+    var cssVariablePrefix = (_theme$cssVariablePre = theme === null || theme === void 0 ? void 0 : theme.cssVariablePrefix) !== null && _theme$cssVariablePre !== void 0 ? _theme$cssVariablePre : theme === null || theme === void 0 ? void 0 : (_theme$config = theme.config) === null || _theme$config === void 0 ? void 0 : _theme$config.prefix;
+    var cssVariables = (_theme$cssVariables2 = theme === null || theme === void 0 ? void 0 : theme.cssVariables) !== null && _theme$cssVariables2 !== void 0 ? _theme$cssVariables2 : theme === null || theme === void 0 ? void 0 : theme.__cssVariableMap;
     var contextScale = options === null || options === void 0 ? void 0 : (_options$context = options.context) === null || _options$context === void 0 ? void 0 : _options$context.scale;
-    var cssVariable = toCSSVariable(
+    var cssVariable = cssVars.toCSSVariable(
     // | contextScale | value     |
@@ -51,6 +55,6 @@ // | ------------ | --------- |
     {
-      prefix: prefix,
+      prefix: cssVariablePrefix,
       delimiter: '-'
     }); // => '--tonic-colors-blue-50'
-    var cssVariableValue = theme === null || theme === void 0 ? void 0 : (_theme$__cssVariableM = theme.__cssVariableMap) === null || _theme$__cssVariableM === void 0 ? void 0 : _theme$__cssVariableM[cssVariable]; // => '#578aef'
+    var cssVariableValue = cssVariables === null || cssVariables === void 0 ? void 0 : cssVariables[cssVariable]; // => '#578aef'
     if (cssVariableValue !== undefined) {
@@ -60,5 +64,5 @@ // => Replace '#578aef' with 'var(--tonic-colors-blue-50)'
     }
-    // fallback to the original value
+    // fallback to the original result
   }
-  return result !== null && result !== void 0 ? result : value; // fallback to value if result is null or undefined
+  return result;
 };
@@ -65,0 +69,0 @@ var positiveOrNegative = function positiveOrNegative(scale, value, options) {

dist/esm/utils/transforms.js

 import get from './get.js';
-import toCSSVariable from './toCSSVariable.js';
+import { toCSSVariable } from './css-vars.js';
 
@@ -13,9 +13,8 @@ // Check if a value is a simple CSS variable
 var toNegativeValue = function toNegativeValue(scale, absoluteValue, options) {
-  var _options$props, _theme$config;
+  var _options$props;
   var theme = options === null || options === void 0 ? void 0 : (_options$props = options.props) === null || _options$props === void 0 ? void 0 : _options$props.theme;
-  var useCSSVariables = !!(theme !== null && theme !== void 0 && (_theme$config = theme.config) !== null && _theme$config !== void 0 && _theme$config.useCSSVariables); // defaults to false
   var n = getter(scale, absoluteValue, options);
 
   // Handle CSS variables for negative values
-  if (useCSSVariables && isSimpleCSSVariable(n)) {
+  if (!!(theme !== null && theme !== void 0 && theme.cssVariables) && isSimpleCSSVariable(n)) {
     // https://stackoverflow.com/questions/49469344/using-negative-css-custom-properties
@@ -32,9 +31,14 @@ return "calc(0px - ".concat(n, ")");
 var getter = function getter(scale, value, options) {
-  var _options$props2, _theme$config2, _theme$config3;
+  var _options$props2, _theme$cssVariables;
+  var result = get(scale, value);
+  if (result === undefined) {
+    return value; // fallback to value if result is undefined
+  }
   var theme = options === null || options === void 0 ? void 0 : (_options$props2 = options.props) === null || _options$props2 === void 0 ? void 0 : _options$props2.theme;
-  var prefix = theme === null || theme === void 0 ? void 0 : (_theme$config2 = theme.config) === null || _theme$config2 === void 0 ? void 0 : _theme$config2.prefix; // defaults to 'tonic'
-  var useCSSVariables = !!(theme !== null && theme !== void 0 && (_theme$config3 = theme.config) !== null && _theme$config3 !== void 0 && _theme$config3.useCSSVariables); // defaults to false
-  var result = get(scale, value);
-  if (result !== undefined && useCSSVariables) {
-    var _options$context, _theme$__cssVariableM;
+  // FIXME: `theme.config.prefix` and `theme.__cssVariableMap` are deprecated and will be removed in the next major release
+  var hasCSSVariables = !!((_theme$cssVariables = theme === null || theme === void 0 ? void 0 : theme.cssVariables) !== null && _theme$cssVariables !== void 0 ? _theme$cssVariables : theme === null || theme === void 0 ? void 0 : theme.__cssVariableMap);
+  if (hasCSSVariables) {
+    var _theme$cssVariablePre, _theme$config, _theme$cssVariables2, _options$context;
+    var cssVariablePrefix = (_theme$cssVariablePre = theme === null || theme === void 0 ? void 0 : theme.cssVariablePrefix) !== null && _theme$cssVariablePre !== void 0 ? _theme$cssVariablePre : theme === null || theme === void 0 ? void 0 : (_theme$config = theme.config) === null || _theme$config === void 0 ? void 0 : _theme$config.prefix;
+    var cssVariables = (_theme$cssVariables2 = theme === null || theme === void 0 ? void 0 : theme.cssVariables) !== null && _theme$cssVariables2 !== void 0 ? _theme$cssVariables2 : theme === null || theme === void 0 ? void 0 : theme.__cssVariableMap;
     var contextScale = options === null || options === void 0 ? void 0 : (_options$context = options.context) === null || _options$context === void 0 ? void 0 : _options$context.scale;
@@ -49,6 +53,6 @@ var cssVariable = toCSSVariable(
     {
-      prefix: prefix,
+      prefix: cssVariablePrefix,
       delimiter: '-'
     }); // => '--tonic-colors-blue-50'
-    var cssVariableValue = theme === null || theme === void 0 ? void 0 : (_theme$__cssVariableM = theme.__cssVariableMap) === null || _theme$__cssVariableM === void 0 ? void 0 : _theme$__cssVariableM[cssVariable]; // => '#578aef'
+    var cssVariableValue = cssVariables === null || cssVariables === void 0 ? void 0 : cssVariables[cssVariable]; // => '#578aef'
     if (cssVariableValue !== undefined) {
@@ -58,5 +62,5 @@ // => Replace '#578aef' with 'var(--tonic-colors-blue-50)'
     }
-    // fallback to the original value
+    // fallback to the original result
   }
-  return result !== null && result !== void 0 ? result : value; // fallback to value if result is null or undefined
+  return result;
 };
@@ -63,0 +67,0 @@ var positiveOrNegative = function positiveOrNegative(scale, value, options) {

package.json

 {
   "name": "@tonic-ui/styled-system",
-  "version": "2.0.2",
-  "description": "The framework agnostic styling engine for Tonic UI.",
+  "version": "2.0.3",
+  "description": "A framework-independent styling engine for Tonic UI.",
   "main": "dist/cjs/index.js",
@@ -81,3 +81,3 @@ "module": "dist/esm/index.js",
   ],
-  "gitHead": "f021669ef2bf6539938d24e94fd15c2cd6b3152c"
+  "gitHead": "ba8cb0f014738fa64c957476f37600c94d151e57"
 }

README.md

 # @tonic-ui/styled-system
 
-The framework agnostic styling engine for Tonic UI.
+A framework-independent styling engine for Tonic UI.
 
@@ -5,0 +5,0 @@ ## Installation

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

125008

increased by0.49%

Lines of code

3946

increased by0.2%

No dependency changes