@navita/engine 0.0.11 → 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/index.cjs

@@ -16,19 +16,6 @@ var printers_sortAtRules = require('./printers/sortAtRules.cjs');
 var processStyles = require('./processStyles.cjs');
 var wrappers_classList = require('./wrappers/classList.cjs');
 var wrappers_static = require('./wrappers/static.cjs');
-require('./helpers/declarationsToBlock.cjs');
-require('./helpers/hypenateProperty.cjs');
-require('source-map');
-require('./helpers/getPropertyPriority.cjs');
-require('sort-css-media-queries/lib/create-sort.js');
-require('./helpers/generateCombinedAtRules.cjs');
-require('./helpers/isMediaQuery.cjs');
-require('./helpers/isNestedSelector.cjs');
-require('./helpers/isSupportsQuery.cjs');
-require('./helpers/normalizeCSSVarsProperty.cjs');
-require('./helpers/normalizeNestedProperty.cjs');
-require('./helpers/pixelifyProperties.cjs');
-require('./helpers/transformContentProperty.cjs');
 
 const defaultOptions = {
     enableSourceMaps: false,

package/index.mjs

@@ -14,19 +14,6 @@ import { sortAtRules } from './printers/sortAtRules.mjs';
 import { processStyles } from './processStyles.mjs';
 import { ClassList } from './wrappers/classList.mjs';
 import { Static } from './wrappers/static.mjs';
-import './helpers/declarationsToBlock.mjs';
-import './helpers/hypenateProperty.mjs';
-import 'source-map';
-import './helpers/getPropertyPriority.mjs';
-import 'sort-css-media-queries/lib/create-sort.js';
-import './helpers/generateCombinedAtRules.mjs';
-import './helpers/isMediaQuery.mjs';
-import './helpers/isNestedSelector.mjs';
-import './helpers/isSupportsQuery.mjs';
-import './helpers/normalizeCSSVarsProperty.mjs';
-import './helpers/normalizeNestedProperty.mjs';
-import './helpers/pixelifyProperties.mjs';
-import './helpers/transformContentProperty.mjs';
 
 const defaultOptions = {
     enableSourceMaps: false,

package/package.json

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

package/printers/printFontFaces.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var helpers_declarationsToBlock = require('../helpers/declarationsToBlock.cjs');
-require('../helpers/hypenateProperty.cjs');
 
 function printFontFaces(blocks) {
     let fontFaces = '';

package/printers/printFontFaces.mjs

@@ -1,5 +1,4 @@
 import { declarationsToBlock } from '../helpers/declarationsToBlock.mjs';
-import '../helpers/hypenateProperty.mjs';
 
 function printFontFaces(blocks) {
     let fontFaces = '';

package/printers/printKeyFrames.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var helpers_declarationsToBlock = require('../helpers/declarationsToBlock.cjs');
-require('../helpers/hypenateProperty.cjs');
 
 // https://github.com/styletron/styletron/blob/master/packages/styletron-engine-atomic/src/css.ts#L48
 function keyframesToBlock(keyframes) {

package/printers/printKeyFrames.mjs

@@ -1,5 +1,4 @@
 import { declarationsToBlock } from '../helpers/declarationsToBlock.mjs';
-import '../helpers/hypenateProperty.mjs';
 
 // https://github.com/styletron/styletron/blob/master/packages/styletron-engine-atomic/src/css.ts#L48
 function keyframesToBlock(keyframes) {

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);