@navita/engine 0.0.12 → 0.0.13

package/helpers/normalizeCSSVarsValue.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const cssVarRegex = /(?<!var\()(\s*)(--[a-zA-Z0-9_-]+)/g;
+function normalizeCSSVarsValue(value) {
+    if (value.startsWith('--') || value.includes(' --') || value.includes(',--')) {
+        return value.replace(cssVarRegex, "$1var($2)");
+    }
+    return value;
+}
+
+exports.normalizeCSSVarsValue = normalizeCSSVarsValue;

package/helpers/normalizeCSSVarsValue.mjs

@@ -0,0 +1,9 @@
+const cssVarRegex = /(?<!var\()(\s*)(--[a-zA-Z0-9_-]+)/g;
+function normalizeCSSVarsValue(value) {
+    if (value.startsWith('--') || value.includes(' --') || value.includes(',--')) {
+        return value.replace(cssVarRegex, "$1var($2)");
+    }
+    return value;
+}
+
+export { normalizeCSSVarsValue };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navita/engine",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Navitas CSS-in-JS engine",
   "keywords": [
     "css-in-js",

package/processStyles.cjs

@@ -10,6 +10,7 @@ var helpers_normalizeCSSVarsProperty = require('./helpers/normalizeCSSVarsProper
 var helpers_normalizeNestedProperty = require('./helpers/normalizeNestedProperty.cjs');
 var helpers_pixelifyProperties = require('./helpers/pixelifyProperties.cjs');
 var helpers_transformContentProperty = require('./helpers/transformContentProperty.cjs');
+var helpers_normalizeCSSVarsValue = require('./helpers/normalizeCSSVarsValue.cjs');
 
 const transformValuePropertyMap = {
     content: helpers_transformContentProperty.transformContentProperty
@@ -57,10 +58,7 @@ function processStyles({ cache , type  }) {
                 let newValue = value;
                 if (typeof value === "string") {
                     newValue = value.trim().replace(/;[\n\s]*$/, "");
-                }
-                // Check if value starts with --, if so, wrap in var()
-                if (typeof newValue === "string" && newValue.startsWith("--")) {
-                    newValue = `var(${value})`;
+                    newValue = helpers_normalizeCSSVarsValue.normalizeCSSVarsValue(newValue);
                 }
                 if (typeof value === "number") {
                     newValue = helpers_pixelifyProperties.pixelifyProperties(newProperty, value);

package/processStyles.mjs

@@ -8,6 +8,7 @@ import { normalizeCSSVarsProperty } from './helpers/normalizeCSSVarsProperty.mjs
 import { normalizeNestedProperty } from './helpers/normalizeNestedProperty.mjs';
 import { pixelifyProperties } from './helpers/pixelifyProperties.mjs';
 import { transformContentProperty } from './helpers/transformContentProperty.mjs';
+import { normalizeCSSVarsValue } from './helpers/normalizeCSSVarsValue.mjs';
 
 const transformValuePropertyMap = {
     content: transformContentProperty
@@ -55,10 +56,7 @@ function processStyles({ cache , type  }) {
                 let newValue = value;
                 if (typeof value === "string") {
                     newValue = value.trim().replace(/;[\n\s]*$/, "");
-                }
-                // Check if value starts with --, if so, wrap in var()
-                if (typeof newValue === "string" && newValue.startsWith("--")) {
-                    newValue = `var(${value})`;
+                    newValue = normalizeCSSVarsValue(newValue);
                 }
                 if (typeof value === "number") {
                     newValue = pixelifyProperties(newProperty, value);