@navita/css 0.0.0 → 0.0.2

package/index.d.ts

@@ -1,29 +1,33 @@
-import { StyleRule, GlobalStyleRule, CSSKeyframes, NullableTokens, ThemeVars, Tokens, Contract, MapLeafNodes, CSSVarFunction } from '@navita/types';
+import { StyleRule, GlobalStyleRule, CSSKeyframes, FontFaceRule, NullableTokens, ThemeVars, Tokens, Contract, MapLeafNodes, CSSVarFunction } from '@navita/types';
 
 declare function style(rule: StyleRule): string;
 
 declare function globalStyle(selector: string, rule: GlobalStyleRule): void;
 
-declare function merge(...classNames: (string | boolean)[]): string;
+declare function merge(...classNames: (string | false | void | null | 0 | '')[]): string;
 
 declare function keyframes(rule: CSSKeyframes): string;
 
+declare function fontFace(rule: FontFaceRule | FontFaceRule[]): string;
+
 declare function createThemeContract<ThemeTokens extends NullableTokens>(tokens: ThemeTokens): ThemeVars<ThemeTokens>;
 declare function createGlobalThemeContract<ThemeTokens extends Tokens>(tokens: ThemeTokens): ThemeVars<ThemeTokens>;
 declare function createGlobalThemeContract<ThemeTokens extends NullableTokens>(tokens: ThemeTokens, mapFn: (value: string | null, path: Array<string>) => string): ThemeVars<ThemeTokens>;
 declare function createGlobalTheme<ThemeTokens extends Tokens>(selector: string, tokens: ThemeTokens): ThemeVars<ThemeTokens>;
 declare function createGlobalTheme<ThemeContract extends Contract>(selector: string, themeContract: ThemeContract, tokens: MapLeafNodes<ThemeContract, string>): void;
 declare function createTheme<ThemeTokens extends Tokens>(tokens: ThemeTokens, debugId?: string): [className: string, vars: ThemeVars<ThemeTokens>];
-declare function createTheme<ThemeContract extends Contract>(themeContract: ThemeContract, tokens: MapLeafNodes<ThemeContract, string>, debugId?: string): string;
+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 assignVars<VarContract extends Contract>(varContract: VarContract, tokens: MapLeafNodes<VarContract, string>): Record<CSSVarFunction, string>;
 
 declare class ClassList extends String {
     classList: {
-        [key: string]: any;
+        [key: string]: string[];
     };
     constructor(str: string, classList: {
-        [key: string]: any;
+        [key: string]: string[];
     });
 }
 
@@ -32,4 +36,4 @@ declare const importMap: {
     source: string;
 }[];
 
-export { ClassList, assignVars, createGlobalTheme, createGlobalThemeContract, createTheme, createThemeContract, globalStyle, importMap, keyframes, merge, style };
+export { ClassList, assignVars, createGlobalTheme, createGlobalThemeContract, createTheme, createThemeContract, createVar, fallbackVar, fontFace, globalStyle, importMap, keyframes, merge, style };

package/index.js

@@ -1,26 +1,34 @@
 'use strict';
 
-var core = require('@navita/core');
+var adapter = require('@navita/adapter');
 var cssesc = require('cssesc');
 var chalk = require('chalk');
 var deepObjectDiff = require('deep-object-diff');
 
 function style(rule) {
-    return core.setCss(rule);
+    return adapter.addCss(rule);
 }
 
 function globalStyle(selector, rule) {
-    core.setStaticCss(selector, rule);
+    adapter.addStaticCss(selector, rule);
 }
 
 function merge(...classNames) {
-    return [
-        ...new Map(classNames.filter(Boolean).reverse().flatMap((className)=>className.split(' ')).map((className)=>className.split('-')).reverse())
-    ].map((className)=>className.filter(Boolean).join('-')).join(' ');
+    const input = classNames.filter(Boolean).join(' ').split(' ');
+    const output = {};
+    for (const className of input){
+        const [property] = className.split(/\d+$/);
+        output[property] = className;
+    }
+    return Object.values(output).join(' ');
 }
 
 function keyframes(rule) {
-    return core.setKeyFrame(rule);
+    return adapter.addKeyframe(rule);
+}
+
+function fontFace(rule) {
+    return adapter.addFontFace(rule);
 }
 
 function walkObject(objectToWalk, transformFn, currentPath = []) {
@@ -90,10 +98,27 @@ function renderDiff(orig, diff, nesting = 0) {
 }
 
 function createVar(name) {
+    if (!name) {
+        return `var(--${adapter.generateIdentifier(undefined)})`;
+    }
     return `var(--${cssesc(name, {
         isIdentifier: true
     })})`;
 }
+function fallbackVar(...values) {
+    let finalValue = '';
+    values.reverse().forEach((value)=>{
+        if (finalValue === '') {
+            finalValue = String(value);
+        } else {
+            if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
+                throw new Error(`Invalid variable name: ${value}`);
+            }
+            finalValue = value.replace(/\)$/, `, ${finalValue})`);
+        }
+    });
+    return finalValue;
+}
 function assignVars(varContract, tokens) {
     const varSetters = {};
     const { valid , diffString  } = validateContract(varContract, tokens);
@@ -131,14 +156,13 @@ function createGlobalTheme(selector, arg2, arg3) {
     const themeVars = shouldCreateVars ? createThemeContract(arg2) : arg2;
     const tokens = shouldCreateVars ? arg2 : arg3;
     const temp = assignVars(themeVars, tokens);
-    core.setStaticCss(selector, temp);
-    // Todo: setStaticCss
+    adapter.addStaticCss(selector, temp);
     if (shouldCreateVars) {
         return themeVars;
     }
 }
-function createTheme(arg1, arg2, arg3) {
-    const themeClassName = core.generateIdentifier(typeof arg2 === 'object' ? arg3 : arg2);
+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);
     return vars ? [
         themeClassName,
@@ -167,6 +191,10 @@ const importMap = [
         callee: "keyframes",
         source
     },
+    {
+        callee: "fontFace",
+        source
+    },
     {
         callee: "createThemeContract",
         source
@@ -182,6 +210,14 @@ const importMap = [
     {
         callee: "createTheme",
         source
+    },
+    {
+        callee: "createVar",
+        source
+    },
+    {
+        callee: "fallbackVar",
+        source
     }
 ];
 
@@ -191,6 +227,9 @@ exports.createGlobalTheme = createGlobalTheme;
 exports.createGlobalThemeContract = createGlobalThemeContract;
 exports.createTheme = createTheme;
 exports.createThemeContract = createThemeContract;
+exports.createVar = createVar;
+exports.fallbackVar = fallbackVar;
+exports.fontFace = fontFace;
 exports.globalStyle = globalStyle;
 exports.importMap = importMap;
 exports.keyframes = keyframes;

package/index.mjs

@@ -1,24 +1,32 @@
-import { setCss, setStaticCss, setKeyFrame, generateIdentifier } from '@navita/core';
+import { addCss, addStaticCss, addKeyframe, addFontFace, generateIdentifier } from '@navita/adapter';
 import cssesc from 'cssesc';
 import chalk from 'chalk';
 import { diff } from 'deep-object-diff';
 
 function style(rule) {
-    return setCss(rule);
+    return addCss(rule);
 }
 
 function globalStyle(selector, rule) {
-    setStaticCss(selector, rule);
+    addStaticCss(selector, rule);
 }
 
 function merge(...classNames) {
-    return [
-        ...new Map(classNames.filter(Boolean).reverse().flatMap((className)=>className.split(' ')).map((className)=>className.split('-')).reverse())
-    ].map((className)=>className.filter(Boolean).join('-')).join(' ');
+    const input = classNames.filter(Boolean).join(' ').split(' ');
+    const output = {};
+    for (const className of input){
+        const [property] = className.split(/\d+$/);
+        output[property] = className;
+    }
+    return Object.values(output).join(' ');
 }
 
 function keyframes(rule) {
-    return setKeyFrame(rule);
+    return addKeyframe(rule);
+}
+
+function fontFace(rule) {
+    return addFontFace(rule);
 }
 
 function walkObject(objectToWalk, transformFn, currentPath = []) {
@@ -88,10 +96,27 @@ function renderDiff(orig, diff, nesting = 0) {
 }
 
 function createVar(name) {
+    if (!name) {
+        return `var(--${generateIdentifier(undefined)})`;
+    }
     return `var(--${cssesc(name, {
         isIdentifier: true
     })})`;
 }
+function fallbackVar(...values) {
+    let finalValue = '';
+    values.reverse().forEach((value)=>{
+        if (finalValue === '') {
+            finalValue = String(value);
+        } else {
+            if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
+                throw new Error(`Invalid variable name: ${value}`);
+            }
+            finalValue = value.replace(/\)$/, `, ${finalValue})`);
+        }
+    });
+    return finalValue;
+}
 function assignVars(varContract, tokens) {
     const varSetters = {};
     const { valid , diffString  } = validateContract(varContract, tokens);
@@ -129,14 +154,13 @@ function createGlobalTheme(selector, arg2, arg3) {
     const themeVars = shouldCreateVars ? createThemeContract(arg2) : arg2;
     const tokens = shouldCreateVars ? arg2 : arg3;
     const temp = assignVars(themeVars, tokens);
-    setStaticCss(selector, temp);
-    // Todo: setStaticCss
+    addStaticCss(selector, temp);
     if (shouldCreateVars) {
         return themeVars;
     }
 }
-function createTheme(arg1, arg2, arg3) {
-    const themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg3 : arg2);
+function createTheme(arg1, arg2) {
+    const themeClassName = `.${generateIdentifier(typeof arg2 === 'object' ? arg2 : arg1)}`;
     const vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
     return vars ? [
         themeClassName,
@@ -165,6 +189,10 @@ const importMap = [
         callee: "keyframes",
         source
     },
+    {
+        callee: "fontFace",
+        source
+    },
     {
         callee: "createThemeContract",
         source
@@ -180,7 +208,15 @@ const importMap = [
     {
         callee: "createTheme",
         source
+    },
+    {
+        callee: "createVar",
+        source
+    },
+    {
+        callee: "fallbackVar",
+        source
     }
 ];
 
-export { ClassList, assignVars, createGlobalTheme, createGlobalThemeContract, createTheme, createThemeContract, globalStyle, importMap, keyframes, merge, style };
+export { ClassList, assignVars, createGlobalTheme, createGlobalThemeContract, createTheme, createThemeContract, createVar, fallbackVar, fontFace, globalStyle, importMap, keyframes, merge, style };

package/package.json

@@ -1,7 +1,10 @@
 {
-  "sideEffects": false,
   "name": "@navita/css",
-  "version": "0.0.0",
+  "version": "0.0.2",
+  "license": "MIT",
+  "private": false,
+  "sideEffects": false,
+  "types": "src/index.ts",
   "exports": {
     ".": {
       "import": "./index.mjs",
@@ -10,10 +13,10 @@
     }
   },
   "dependencies": {
+    "@navita/adapter": "*",
+    "@navita/types": "*",
     "deep-object-diff": "^1.1.9",
     "cssesc": "^3.0.0",
-    "chalk": "^4.1.2",
-    "@navita/core": "*",
-    "@navita/types": "*"
+    "chalk": "^4.1.2"
   }
 }