@navita/css 0.0.0

package/index.d.ts

@@ -0,0 +1,35 @@
+import { StyleRule, GlobalStyleRule, CSSKeyframes, 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 keyframes(rule: CSSKeyframes): 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 assignVars<VarContract extends Contract>(varContract: VarContract, tokens: MapLeafNodes<VarContract, string>): Record<CSSVarFunction, string>;
+
+declare class ClassList extends String {
+    classList: {
+        [key: string]: any;
+    };
+    constructor(str: string, classList: {
+        [key: string]: any;
+    });
+}
+
+declare const importMap: {
+    callee: string;
+    source: string;
+}[];
+
+export { ClassList, assignVars, createGlobalTheme, createGlobalThemeContract, createTheme, createThemeContract, globalStyle, importMap, keyframes, merge, style };

package/index.js

@@ -0,0 +1,198 @@
+'use strict';
+
+var core = require('@navita/core');
+var cssesc = require('cssesc');
+var chalk = require('chalk');
+var deepObjectDiff = require('deep-object-diff');
+
+function style(rule) {
+    return core.setCss(rule);
+}
+
+function globalStyle(selector, rule) {
+    core.setStaticCss(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(' ');
+}
+
+function keyframes(rule) {
+    return core.setKeyFrame(rule);
+}
+
+function walkObject(objectToWalk, transformFn, currentPath = []) {
+    const clonedObject = objectToWalk.constructor();
+    for(const key in objectToWalk){
+        const value = objectToWalk[key];
+        const newPath = [
+            ...currentPath,
+            key
+        ];
+        if (typeof value === 'string' || typeof value === 'number' || value == null) {
+            clonedObject[key] = transformFn(value, newPath);
+        } else if (typeof value === 'object' && !Array.isArray(value)) {
+            clonedObject[key] = walkObject(value, transformFn, newPath);
+        }
+    }
+    return clonedObject;
+}
+
+const normaliseObject = (obj)=>walkObject(obj, ()=>'');
+function validateContract(contract, tokens) {
+    const theDiff = deepObjectDiff.diff(normaliseObject(contract), normaliseObject(tokens));
+    const valid = Object.keys(theDiff).length === 0;
+    return {
+        valid,
+        diffString: valid ? '' : renderDiff(contract, theDiff)
+    };
+}
+function diffLine(value, nesting, type) {
+    const whitespace = [
+        ...Array(nesting).keys()
+    ].map(()=>'  ').join('');
+    const line = `${type ? type : ' '}${whitespace}${value}`;
+    {
+        if (type === '-') {
+            return chalk.red(line);
+        }
+        if (type === '+') {
+            return chalk.green(line);
+        }
+    }
+    return line;
+}
+function renderDiff(orig, diff, nesting = 0) {
+    const lines = [];
+    if (nesting === 0) {
+        lines.push(diffLine('{', 0));
+    }
+    const innerNesting = nesting + 1;
+    const keys = Object.keys(diff).sort();
+    for (const key of keys){
+        const value = diff[key];
+        if (!(key in orig)) {
+            lines.push(diffLine(`${key}: ...,`, innerNesting, '+'));
+        } else if (typeof value === 'object') {
+            lines.push(diffLine(`${key}: {`, innerNesting));
+            lines.push(renderDiff(orig[key], diff[key], innerNesting));
+            lines.push(diffLine('}', innerNesting));
+        } else {
+            lines.push(diffLine(`${key}: ...,`, innerNesting, '-'));
+        }
+    }
+    if (nesting === 0) {
+        lines.push(diffLine('}', 0));
+    }
+    return lines.join('\n');
+}
+
+function createVar(name) {
+    return `var(--${cssesc(name, {
+        isIdentifier: true
+    })})`;
+}
+function assignVars(varContract, tokens) {
+    const varSetters = {};
+    const { valid , diffString  } = validateContract(varContract, tokens);
+    if (!valid) {
+        throw new Error(`Tokens don't match contract.\n${diffString}`);
+    }
+    walkObject(tokens, (value, path)=>{
+        const cssVarWithoutVar = `--${cssesc(path.join('-').toLowerCase(), {
+            isIdentifier: true
+        })}`;
+        varSetters[cssVarWithoutVar] = String(value);
+    });
+    return varSetters;
+}
+
+function createThemeContract(tokens) {
+    return walkObject(tokens, (_value, path)=>{
+        return 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;
+        if (typeof varName !== 'string' || varName !== cssesc(varName, {
+            isIdentifier: true
+        })) {
+            throw new Error(`Invalid variable name for "${path.join('.')}": ${varName}`);
+        }
+        return `var(--${varName})`;
+    });
+}
+function createGlobalTheme(selector, arg2, arg3) {
+    const shouldCreateVars = Boolean(!arg3);
+    const themeVars = shouldCreateVars ? createThemeContract(arg2) : arg2;
+    const tokens = shouldCreateVars ? arg2 : arg3;
+    const temp = assignVars(themeVars, tokens);
+    core.setStaticCss(selector, temp);
+    // Todo: setStaticCss
+    if (shouldCreateVars) {
+        return themeVars;
+    }
+}
+function createTheme(arg1, arg2, arg3) {
+    const themeClassName = core.generateIdentifier(typeof arg2 === 'object' ? arg3 : arg2);
+    const vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
+    return vars ? [
+        themeClassName,
+        vars
+    ] : themeClassName;
+}
+
+class ClassList extends String {
+    constructor(str, classList){
+        super(str);
+        this.classList = classList;
+    }
+}
+
+const source = '@navita/css';
+const importMap = [
+    {
+        callee: "style",
+        source
+    },
+    {
+        callee: "globalStyle",
+        source
+    },
+    {
+        callee: "keyframes",
+        source
+    },
+    {
+        callee: "createThemeContract",
+        source
+    },
+    {
+        callee: "createGlobalThemeContract",
+        source
+    },
+    {
+        callee: "createGlobalTheme",
+        source
+    },
+    {
+        callee: "createTheme",
+        source
+    }
+];
+
+exports.ClassList = ClassList;
+exports.assignVars = assignVars;
+exports.createGlobalTheme = createGlobalTheme;
+exports.createGlobalThemeContract = createGlobalThemeContract;
+exports.createTheme = createTheme;
+exports.createThemeContract = createThemeContract;
+exports.globalStyle = globalStyle;
+exports.importMap = importMap;
+exports.keyframes = keyframes;
+exports.merge = merge;
+exports.style = style;

package/index.mjs

@@ -0,0 +1,186 @@
+import { setCss, setStaticCss, setKeyFrame, generateIdentifier } from '@navita/core';
+import cssesc from 'cssesc';
+import chalk from 'chalk';
+import { diff } from 'deep-object-diff';
+
+function style(rule) {
+    return setCss(rule);
+}
+
+function globalStyle(selector, rule) {
+    setStaticCss(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(' ');
+}
+
+function keyframes(rule) {
+    return setKeyFrame(rule);
+}
+
+function walkObject(objectToWalk, transformFn, currentPath = []) {
+    const clonedObject = objectToWalk.constructor();
+    for(const key in objectToWalk){
+        const value = objectToWalk[key];
+        const newPath = [
+            ...currentPath,
+            key
+        ];
+        if (typeof value === 'string' || typeof value === 'number' || value == null) {
+            clonedObject[key] = transformFn(value, newPath);
+        } else if (typeof value === 'object' && !Array.isArray(value)) {
+            clonedObject[key] = walkObject(value, transformFn, newPath);
+        }
+    }
+    return clonedObject;
+}
+
+const normaliseObject = (obj)=>walkObject(obj, ()=>'');
+function validateContract(contract, tokens) {
+    const theDiff = diff(normaliseObject(contract), normaliseObject(tokens));
+    const valid = Object.keys(theDiff).length === 0;
+    return {
+        valid,
+        diffString: valid ? '' : renderDiff(contract, theDiff)
+    };
+}
+function diffLine(value, nesting, type) {
+    const whitespace = [
+        ...Array(nesting).keys()
+    ].map(()=>'  ').join('');
+    const line = `${type ? type : ' '}${whitespace}${value}`;
+    {
+        if (type === '-') {
+            return chalk.red(line);
+        }
+        if (type === '+') {
+            return chalk.green(line);
+        }
+    }
+    return line;
+}
+function renderDiff(orig, diff, nesting = 0) {
+    const lines = [];
+    if (nesting === 0) {
+        lines.push(diffLine('{', 0));
+    }
+    const innerNesting = nesting + 1;
+    const keys = Object.keys(diff).sort();
+    for (const key of keys){
+        const value = diff[key];
+        if (!(key in orig)) {
+            lines.push(diffLine(`${key}: ...,`, innerNesting, '+'));
+        } else if (typeof value === 'object') {
+            lines.push(diffLine(`${key}: {`, innerNesting));
+            lines.push(renderDiff(orig[key], diff[key], innerNesting));
+            lines.push(diffLine('}', innerNesting));
+        } else {
+            lines.push(diffLine(`${key}: ...,`, innerNesting, '-'));
+        }
+    }
+    if (nesting === 0) {
+        lines.push(diffLine('}', 0));
+    }
+    return lines.join('\n');
+}
+
+function createVar(name) {
+    return `var(--${cssesc(name, {
+        isIdentifier: true
+    })})`;
+}
+function assignVars(varContract, tokens) {
+    const varSetters = {};
+    const { valid , diffString  } = validateContract(varContract, tokens);
+    if (!valid) {
+        throw new Error(`Tokens don't match contract.\n${diffString}`);
+    }
+    walkObject(tokens, (value, path)=>{
+        const cssVarWithoutVar = `--${cssesc(path.join('-').toLowerCase(), {
+            isIdentifier: true
+        })}`;
+        varSetters[cssVarWithoutVar] = String(value);
+    });
+    return varSetters;
+}
+
+function createThemeContract(tokens) {
+    return walkObject(tokens, (_value, path)=>{
+        return 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;
+        if (typeof varName !== 'string' || varName !== cssesc(varName, {
+            isIdentifier: true
+        })) {
+            throw new Error(`Invalid variable name for "${path.join('.')}": ${varName}`);
+        }
+        return `var(--${varName})`;
+    });
+}
+function createGlobalTheme(selector, arg2, arg3) {
+    const shouldCreateVars = Boolean(!arg3);
+    const themeVars = shouldCreateVars ? createThemeContract(arg2) : arg2;
+    const tokens = shouldCreateVars ? arg2 : arg3;
+    const temp = assignVars(themeVars, tokens);
+    setStaticCss(selector, temp);
+    // Todo: setStaticCss
+    if (shouldCreateVars) {
+        return themeVars;
+    }
+}
+function createTheme(arg1, arg2, arg3) {
+    const themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg3 : arg2);
+    const vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
+    return vars ? [
+        themeClassName,
+        vars
+    ] : themeClassName;
+}
+
+class ClassList extends String {
+    constructor(str, classList){
+        super(str);
+        this.classList = classList;
+    }
+}
+
+const source = '@navita/css';
+const importMap = [
+    {
+        callee: "style",
+        source
+    },
+    {
+        callee: "globalStyle",
+        source
+    },
+    {
+        callee: "keyframes",
+        source
+    },
+    {
+        callee: "createThemeContract",
+        source
+    },
+    {
+        callee: "createGlobalThemeContract",
+        source
+    },
+    {
+        callee: "createGlobalTheme",
+        source
+    },
+    {
+        callee: "createTheme",
+        source
+    }
+];
+
+export { ClassList, assignVars, createGlobalTheme, createGlobalThemeContract, createTheme, createThemeContract, globalStyle, importMap, keyframes, merge, style };

package/package.json

@@ -0,0 +1,19 @@
+{
+  "sideEffects": false,
+  "name": "@navita/css",
+  "version": "0.0.0",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js",
+      "types": "./index.d.ts"
+    }
+  },
+  "dependencies": {
+    "deep-object-diff": "^1.1.9",
+    "cssesc": "^3.0.0",
+    "chalk": "^4.1.2",
+    "@navita/core": "*",
+    "@navita/types": "*"
+  }
+}