@navita/css 0.0.8 → 0.0.10

package/index.d.ts

@@ -19,7 +19,7 @@ declare function createTheme<ThemeTokens extends Tokens>(tokens: ThemeTokens, de
 declare function createTheme<ThemeContract extends Contract>(themeContract: ThemeContract, tokens: MapLeafNodes<ThemeContract, string>): string;
 
 declare function createVar(name: string): string;
-declare function fallbackVar(...values: [string, ...Array<string>]): CSSVarFunction;
+declare function fallbackVar(...values: [string, ...Array<string>]): string;
 declare function assignVars<VarContract extends Contract>(varContract: VarContract, tokens: MapLeafNodes<VarContract, string>): Record<CSSVarFunction, string>;
 
 declare class ClassList extends String {

package/index.js

@@ -98,16 +98,16 @@ function renderDiff(orig, diff, nesting = 0) {
 }
 
 function createVar(name) {
-    if (!name) {
-        return `var(--${adapter.generateIdentifier(undefined)})`;
-    }
-    return `var(--${cssesc(name, {
+    return `--${cssesc(!name ? adapter.generateIdentifier(undefined) : name, {
         isIdentifier: true
-    })})`;
+    })}`;
 }
 function fallbackVar(...values) {
     let finalValue = '';
-    values.reverse().forEach((value)=>{
+    for (let value of values.reverse()){
+        if (/^--/.test(value)) {
+            value = `var(${value})`;
+        }
         if (finalValue === '') {
             finalValue = String(value);
         } else {
@@ -116,7 +116,7 @@ function fallbackVar(...values) {
             }
             finalValue = value.replace(/\)$/, `, ${finalValue})`);
         }
-    });
+    }
     return finalValue;
 }
 function assignVars(varContract, tokens) {
@@ -136,13 +136,13 @@ function assignVars(varContract, tokens) {
 
 function createThemeContract(tokens) {
     return walkObject(tokens, (_value, path)=>{
-        return createVar(path.join('-').toLowerCase());
+        return `var(${createVar(path.join('-').toLowerCase())})`;
     });
 }
 function createGlobalThemeContract(tokens, mapFn) {
     return walkObject(tokens, (value, path)=>{
         const rawVarName = typeof mapFn === 'function' ? mapFn(value, path) : value;
-        const varName = typeof rawVarName === 'string' ? rawVarName.replace(/^\-\-/, '') : null;
+        const varName = typeof rawVarName === 'string' ? rawVarName.replace(/^--/, '') : null;
         if (typeof varName !== 'string' || varName !== cssesc(varName, {
             isIdentifier: true
         })) {
@@ -162,8 +162,8 @@ function createGlobalTheme(selector, arg2, arg3) {
     }
 }
 function createTheme(arg1, arg2) {
-    const themeClassName = `.${adapter.generateIdentifier(typeof arg2 === 'object' ? arg2 : arg1)}`;
-    const vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
+    const themeClassName = adapter.generateIdentifier(typeof arg2 === 'object' ? arg2 : arg1);
+    const vars = typeof arg2 === 'object' ? createGlobalTheme(`.${themeClassName}`, arg1, arg2) : createGlobalTheme(`.${themeClassName}`, arg1);
     return vars ? [
         themeClassName,
         vars

package/index.mjs

@@ -96,16 +96,16 @@ function renderDiff(orig, diff, nesting = 0) {
 }
 
 function createVar(name) {
-    if (!name) {
-        return `var(--${generateIdentifier(undefined)})`;
-    }
-    return `var(--${cssesc(name, {
+    return `--${cssesc(!name ? generateIdentifier(undefined) : name, {
         isIdentifier: true
-    })})`;
+    })}`;
 }
 function fallbackVar(...values) {
     let finalValue = '';
-    values.reverse().forEach((value)=>{
+    for (let value of values.reverse()){
+        if (/^--/.test(value)) {
+            value = `var(${value})`;
+        }
         if (finalValue === '') {
             finalValue = String(value);
         } else {
@@ -114,7 +114,7 @@ function fallbackVar(...values) {
             }
             finalValue = value.replace(/\)$/, `, ${finalValue})`);
         }
-    });
+    }
     return finalValue;
 }
 function assignVars(varContract, tokens) {
@@ -134,13 +134,13 @@ function assignVars(varContract, tokens) {
 
 function createThemeContract(tokens) {
     return walkObject(tokens, (_value, path)=>{
-        return createVar(path.join('-').toLowerCase());
+        return `var(${createVar(path.join('-').toLowerCase())})`;
     });
 }
 function createGlobalThemeContract(tokens, mapFn) {
     return walkObject(tokens, (value, path)=>{
         const rawVarName = typeof mapFn === 'function' ? mapFn(value, path) : value;
-        const varName = typeof rawVarName === 'string' ? rawVarName.replace(/^\-\-/, '') : null;
+        const varName = typeof rawVarName === 'string' ? rawVarName.replace(/^--/, '') : null;
         if (typeof varName !== 'string' || varName !== cssesc(varName, {
             isIdentifier: true
         })) {
@@ -160,8 +160,8 @@ function createGlobalTheme(selector, arg2, arg3) {
     }
 }
 function createTheme(arg1, arg2) {
-    const themeClassName = `.${generateIdentifier(typeof arg2 === 'object' ? arg2 : arg1)}`;
-    const vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
+    const themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg2 : arg1);
+    const vars = typeof arg2 === 'object' ? createGlobalTheme(`.${themeClassName}`, arg1, arg2) : createGlobalTheme(`.${themeClassName}`, arg1);
     return vars ? [
         themeClassName,
         vars

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navita/css",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Public API for Navita",
   "keywords": [
     "api",
@@ -21,7 +21,7 @@
     "deep-object-diff": "^1.1.9",
     "cssesc": "^3.0.0",
     "chalk": "^4.1.2",
-    "@navita/adapter": "0.0.8"
+    "@navita/adapter": "0.0.9"
   },
   "license": "MIT",
   "author": "Eagerpatch",