@mattsjones/css-core - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/declarations/src/api.d.ts

 import type { StyleRule } from './types';
-declare type PartialAlternateContract<T> = {
-    [P in keyof T]?: T[P] extends Record<string | number, unknown> ? PartialAlternateContract<T[P]> : T[P];
-};
 declare type MapLeafNodes<Obj, LeafType> = {
     [Prop in keyof Obj]: Obj[Prop] extends object ? MapLeafNodes<Obj[Prop], LeafType> : LeafType;
 };
-declare type Primitive = string | number | boolean;
-declare type WalkableValue = Primitive | WalkableObject | WalkableArray;
-interface WalkableObject {
-    [index: string]: WalkableValue;
-    [index: number]: WalkableValue;
-}
-interface WalkableArray extends Array<WalkableValue> {
-}
-declare type Walkable = WalkableObject | WalkableArray;
 export declare function setFileScope(newFileScope: string): void;
-export declare function style(rule: StyleRule): string;
-export declare function defineVars<VarContract extends Walkable>(varContract: VarContract): {
-    className: string;
-    vars: MapLeafNodes<VarContract, string>;
-    alternate: <AltVarContract extends PartialAlternateContract<VarContract>>(altVarContract: AltVarContract) => string;
+export declare function createVar(debugId?: string): string;
+export declare function style(rule: StyleRule, debugId?: string): string;
+declare type ThemeVars<ThemeContract> = MapLeafNodes<ThemeContract, string>;
+export declare function createThemeVars<ThemeContract>(themeContract: ThemeContract): ThemeVars<ThemeContract>;
+export declare function createGlobalTheme<ThemeContract>(selector: string, tokens: ThemeContract): ThemeVars<ThemeContract>;
+export declare function createGlobalTheme<Tokens>(selector: string, themeContract: ThemeVars<Tokens>, tokens: Tokens): void;
+export declare function createTheme<ThemeContract>(tokens: ThemeContract, debugId?: string): [className: string, vars: ThemeVars<ThemeContract>];
+export declare function createTheme<Tokens>(themeContract: ThemeVars<Tokens>, tokens: Tokens, debugId?: string): string;
+export declare function createInlineTheme<Tokens>(themeVars: ThemeVars<Tokens>, tokens: Tokens): {
+    [cssVarName: string]: string;
 };
 export {};

dist/declarations/src/types.d.ts

@@ -8,2 +8,5 @@ import type { Properties } from 'csstype';
 export declare type CSSProperties = BasicCSSProperties & {
+    vars?: {
+        [key: string]: string | number;
+    };
     '@keyframes'?: CSSKeyframes | string;
@@ -10,0 +13,0 @@ };

dist/mattsjones-css-core.browser.cjs.js

@@ -5,6 +5,6 @@ 'use strict';
 
-var generateCss_dist_mattsjonesCssCoreGenerateCss = require('./generateCss-b30cf9cc.browser.cjs.js');
+var generateCss_dist_mattsjonesCssCoreGenerateCss = require('./generateCss-97f38441.browser.cjs.js');
 var adapter_dist_mattsjonesCssCoreAdapter = require('../adapter/dist/mattsjones-css-core-adapter.browser.cjs.js');
 var hash = require('@emotion/hash');
-var deepMerge = require('deepmerge');
+var get = require('lodash/get');
 require('postcss-js');
@@ -15,2 +15,3 @@ require('postcss');
 require('lodash/isEqual');
+require('lodash');
 
@@ -20,3 +21,3 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 var hash__default = /*#__PURE__*/_interopDefault(hash);
-var deepMerge__default = /*#__PURE__*/_interopDefault(deepMerge);
+var get__default = /*#__PURE__*/_interopDefault(get);
 
@@ -55,7 +56,12 @@ let styleSheet;
 
-const createFileScopeIdent = () => {
-  return `${hash__default['default'](fileScope)}_${refCounter++}`;
+const createFileScopeId = debugId => {
+  if (process.env.NODE_ENV !== 'production' && debugId) {
+    return `${debugId}__${hash__default['default'](fileScope)}${refCounter++}`;
+  }
+
+  return `${hash__default['default'](fileScope)}${refCounter++}`;
 };
 
 const walkObject = (obj, fn, path = []) => {
+  // @ts-expect-error
   const clone = obj.constructor();
@@ -69,4 +75,6 @@
       clone[key] = value ? walkObject(value, fn, currentPath) : value;
+    } else if (typeof value === 'string' || typeof value === 'number') {
+      clone[key] = fn(value, currentPath);
     } else {
-      clone[key] = fn(value, currentPath.join('-'));
+      console.warn(`Skipping invalid key "${currentPath.join('.')}". Should be a string, number or object. Received: "${typeof value}"`);
     }
@@ -78,4 +86,8 @@ }
 
-function style(rule) {
-  const styleRuleName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeIdent());
+function createVar(debugId) {
+  const cssVarName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeId(debugId));
+  return `var(--${cssVarName})`;
+}
+function style(rule, debugId) {
+  const styleRuleName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeId(debugId));
   adapter_dist_mattsjonesCssCoreAdapter.appendCss({
@@ -87,42 +99,56 @@ selector: `.${styleRuleName}`,
 }
-function defineVars(varContract) {
-  const varContractHash = createFileScopeIdent();
-  const rootVarsClassName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(varContractHash);
-  const cssVars = {};
-  const vars = walkObject(varContract, (value, path) => {
-    const cssVarName = `--${hash__default['default'](varContractHash + path)}`;
-    cssVars[cssVarName] = value;
-    return `var(${cssVarName})`;
+function createThemeVars(themeContract) {
+  return walkObject(themeContract, (_value, path) => {
+    return createVar(path.join('-'));
   });
+}
+function createGlobalTheme(selector, arg2, arg3) {
+  const shouldCreateVars = Boolean(!arg3);
+  const themeVars = shouldCreateVars ? createThemeVars(arg2) : arg2;
+  const tokens = shouldCreateVars ? arg2 : arg3;
+  const varSetters = {};
+  /* TODO 
+    - validate new variables arn't set
+    - validate arrays have the same length as contract
+  */
+
+  walkObject(tokens, (value, path) => {
+    varSetters[get__default['default'](themeVars, path)] = value;
+  });
   adapter_dist_mattsjonesCssCoreAdapter.appendCss({
-    selector: `:root, .${rootVarsClassName}`,
-    rule: cssVars
+    selector,
+    rule: {
+      vars: varSetters
+    }
   }, fileScope);
-  return {
-    className: rootVarsClassName,
-    vars,
-    alternate: altVarContract => {
-      // @ts-expect-error // Revisit types here, maybe even library itself
-      const mergedContract = deepMerge__default['default'](varContract, altVarContract);
-      const altVarContractHash = createFileScopeIdent();
-      const altVarsClassName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(altVarContractHash);
-      const altCssVars = {};
-      /* TODO 
-        - validate new variables arn't set
-        - validate arrays have the same length as contract
-      */
 
-      walkObject(mergedContract, (value, path) => {
-        const cssVarName = `--${hash__default['default'](varContractHash + path)}`;
-        altCssVars[cssVarName] = value;
-      });
-      adapter_dist_mattsjonesCssCoreAdapter.appendCss({
-        selector: `.${altVarsClassName}`,
-        rule: altCssVars
-      }, fileScope);
-      return altVarsClassName;
-    }
-  };
+  if (shouldCreateVars) {
+    return themeVars;
+  }
 }
+function createTheme(arg1, arg2, arg3) {
+  const themeClassName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeId(typeof arg2 === 'object' ? arg3 : arg2));
+  const vars = typeof arg2 === 'object' ? createGlobalTheme(`.${themeClassName}`, arg1, arg2) : createGlobalTheme(`.${themeClassName}`, arg1);
+  return vars ? [themeClassName, vars] : themeClassName;
+}
+function createInlineTheme(themeVars, tokens) {
+  const styles = {};
+  /* TODO 
+    - validate new variables arn't set
+    - validate arrays have the same length as contract
+  */
 
+  walkObject(tokens, (value, path) => {
+    const varName = get__default['default'](themeVars, path);
+    styles[varName.substring(4, varName.length - 1)] = String(value);
+  });
+  Object.defineProperty(styles, 'toString', {
+    value: function () {
+      return Object.keys(this).map(key => `${key}:${this[key]}`).join(';');
+    },
+    writable: false
+  });
+  return styles;
+}
+
 {
@@ -132,4 +158,8 @@ adapter_dist_mattsjonesCssCoreAdapter.setAdapter(browserRuntimeAdapter);
 
-exports.defineVars = defineVars;
+exports.createGlobalTheme = createGlobalTheme;
+exports.createInlineTheme = createInlineTheme;
+exports.createTheme = createTheme;
+exports.createThemeVars = createThemeVars;
+exports.createVar = createVar;
 exports.setFileScope = setFileScope;
 exports.style = style;

dist/mattsjones-css-core.browser.esm.js

@@ -1,5 +0,5 @@
-import { g as generateCss, s as sanitiseIdent } from './generateCss-ff9e789b.browser.esm.js';
+import { g as generateCss, s as sanitiseIdent } from './generateCss-8fd46c7f.browser.esm.js';
 import { appendCss, setAdapter } from '../adapter/dist/mattsjones-css-core-adapter.browser.esm.js';
 import hash from '@emotion/hash';
-import deepMerge from 'deepmerge';
+import get from 'lodash/get';
 import 'postcss-js';
@@ -10,2 +10,3 @@ import 'postcss';
 import 'lodash/isEqual';
+import 'lodash';
 
@@ -44,7 +45,12 @@ let styleSheet;
 
-const createFileScopeIdent = () => {
-  return `${hash(fileScope)}_${refCounter++}`;
+const createFileScopeId = debugId => {
+  if (process.env.NODE_ENV !== 'production' && debugId) {
+    return `${debugId}__${hash(fileScope)}${refCounter++}`;
+  }
+
+  return `${hash(fileScope)}${refCounter++}`;
 };
 
 const walkObject = (obj, fn, path = []) => {
+  // @ts-expect-error
   const clone = obj.constructor();
@@ -58,4 +64,6 @@
       clone[key] = value ? walkObject(value, fn, currentPath) : value;
+    } else if (typeof value === 'string' || typeof value === 'number') {
+      clone[key] = fn(value, currentPath);
     } else {
-      clone[key] = fn(value, currentPath.join('-'));
+      console.warn(`Skipping invalid key "${currentPath.join('.')}". Should be a string, number or object. Received: "${typeof value}"`);
     }
@@ -67,4 +75,8 @@ }
 
-function style(rule) {
-  const styleRuleName = sanitiseIdent(createFileScopeIdent());
+function createVar(debugId) {
+  const cssVarName = sanitiseIdent(createFileScopeId(debugId));
+  return `var(--${cssVarName})`;
+}
+function style(rule, debugId) {
+  const styleRuleName = sanitiseIdent(createFileScopeId(debugId));
   appendCss({
@@ -76,42 +88,56 @@ selector: `.${styleRuleName}`,
 }
-function defineVars(varContract) {
-  const varContractHash = createFileScopeIdent();
-  const rootVarsClassName = sanitiseIdent(varContractHash);
-  const cssVars = {};
-  const vars = walkObject(varContract, (value, path) => {
-    const cssVarName = `--${hash(varContractHash + path)}`;
-    cssVars[cssVarName] = value;
-    return `var(${cssVarName})`;
+function createThemeVars(themeContract) {
+  return walkObject(themeContract, (_value, path) => {
+    return createVar(path.join('-'));
   });
+}
+function createGlobalTheme(selector, arg2, arg3) {
+  const shouldCreateVars = Boolean(!arg3);
+  const themeVars = shouldCreateVars ? createThemeVars(arg2) : arg2;
+  const tokens = shouldCreateVars ? arg2 : arg3;
+  const varSetters = {};
+  /* TODO 
+    - validate new variables arn't set
+    - validate arrays have the same length as contract
+  */
+
+  walkObject(tokens, (value, path) => {
+    varSetters[get(themeVars, path)] = value;
+  });
   appendCss({
-    selector: `:root, .${rootVarsClassName}`,
-    rule: cssVars
+    selector,
+    rule: {
+      vars: varSetters
+    }
   }, fileScope);
-  return {
-    className: rootVarsClassName,
-    vars,
-    alternate: altVarContract => {
-      // @ts-expect-error // Revisit types here, maybe even library itself
-      const mergedContract = deepMerge(varContract, altVarContract);
-      const altVarContractHash = createFileScopeIdent();
-      const altVarsClassName = sanitiseIdent(altVarContractHash);
-      const altCssVars = {};
-      /* TODO 
-        - validate new variables arn't set
-        - validate arrays have the same length as contract
-      */
 
-      walkObject(mergedContract, (value, path) => {
-        const cssVarName = `--${hash(varContractHash + path)}`;
-        altCssVars[cssVarName] = value;
-      });
-      appendCss({
-        selector: `.${altVarsClassName}`,
-        rule: altCssVars
-      }, fileScope);
-      return altVarsClassName;
-    }
-  };
+  if (shouldCreateVars) {
+    return themeVars;
+  }
 }
+function createTheme(arg1, arg2, arg3) {
+  const themeClassName = sanitiseIdent(createFileScopeId(typeof arg2 === 'object' ? arg3 : arg2));
+  const vars = typeof arg2 === 'object' ? createGlobalTheme(`.${themeClassName}`, arg1, arg2) : createGlobalTheme(`.${themeClassName}`, arg1);
+  return vars ? [themeClassName, vars] : themeClassName;
+}
+function createInlineTheme(themeVars, tokens) {
+  const styles = {};
+  /* TODO 
+    - validate new variables arn't set
+    - validate arrays have the same length as contract
+  */
 
+  walkObject(tokens, (value, path) => {
+    const varName = get(themeVars, path);
+    styles[varName.substring(4, varName.length - 1)] = String(value);
+  });
+  Object.defineProperty(styles, 'toString', {
+    value: function () {
+      return Object.keys(this).map(key => `${key}:${this[key]}`).join(';');
+    },
+    writable: false
+  });
+  return styles;
+}
+
 {
@@ -121,2 +147,2 @@ setAdapter(browserRuntimeAdapter);
 
-export { defineVars, setFileScope, style };
+export { createGlobalTheme, createInlineTheme, createTheme, createThemeVars, createVar, setFileScope, style };

dist/mattsjones-css-core.cjs.dev.js

@@ -5,6 +5,6 @@ 'use strict';
 
-var generateCss_dist_mattsjonesCssCoreGenerateCss = require('./generateCss-f66bc75a.cjs.dev.js');
+var generateCss_dist_mattsjonesCssCoreGenerateCss = require('./generateCss-2023ead3.cjs.dev.js');
 var adapter_dist_mattsjonesCssCoreAdapter = require('../adapter/dist/mattsjones-css-core-adapter.cjs.dev.js');
 var hash = require('@emotion/hash');
-var deepMerge = require('deepmerge');
+var get = require('lodash/get');
 require('postcss-js');
@@ -15,2 +15,3 @@ require('postcss');
 require('lodash/isEqual');
+require('lodash');
 
@@ -20,3 +21,3 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 var hash__default = /*#__PURE__*/_interopDefault(hash);
-var deepMerge__default = /*#__PURE__*/_interopDefault(deepMerge);
+var get__default = /*#__PURE__*/_interopDefault(get);
 
@@ -55,7 +56,12 @@ let styleSheet;
 
-const createFileScopeIdent = () => {
-  return `${hash__default['default'](fileScope)}_${refCounter++}`;
+const createFileScopeId = debugId => {
+  if (process.env.NODE_ENV !== 'production' && debugId) {
+    return `${debugId}__${hash__default['default'](fileScope)}${refCounter++}`;
+  }
+
+  return `${hash__default['default'](fileScope)}${refCounter++}`;
 };
 
 const walkObject = (obj, fn, path = []) => {
+  // @ts-expect-error
   const clone = obj.constructor();
@@ -69,4 +75,6 @@
       clone[key] = value ? walkObject(value, fn, currentPath) : value;
+    } else if (typeof value === 'string' || typeof value === 'number') {
+      clone[key] = fn(value, currentPath);
     } else {
-      clone[key] = fn(value, currentPath.join('-'));
+      console.warn(`Skipping invalid key "${currentPath.join('.')}". Should be a string, number or object. Received: "${typeof value}"`);
     }
@@ -78,4 +86,8 @@ }
 
-function style(rule) {
-  const styleRuleName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeIdent());
+function createVar(debugId) {
+  const cssVarName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeId(debugId));
+  return `var(--${cssVarName})`;
+}
+function style(rule, debugId) {
+  const styleRuleName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeId(debugId));
   adapter_dist_mattsjonesCssCoreAdapter.appendCss({
@@ -87,42 +99,56 @@ selector: `.${styleRuleName}`,
 }
-function defineVars(varContract) {
-  const varContractHash = createFileScopeIdent();
-  const rootVarsClassName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(varContractHash);
-  const cssVars = {};
-  const vars = walkObject(varContract, (value, path) => {
-    const cssVarName = `--${hash__default['default'](varContractHash + path)}`;
-    cssVars[cssVarName] = value;
-    return `var(${cssVarName})`;
+function createThemeVars(themeContract) {
+  return walkObject(themeContract, (_value, path) => {
+    return createVar(path.join('-'));
   });
+}
+function createGlobalTheme(selector, arg2, arg3) {
+  const shouldCreateVars = Boolean(!arg3);
+  const themeVars = shouldCreateVars ? createThemeVars(arg2) : arg2;
+  const tokens = shouldCreateVars ? arg2 : arg3;
+  const varSetters = {};
+  /* TODO 
+    - validate new variables arn't set
+    - validate arrays have the same length as contract
+  */
+
+  walkObject(tokens, (value, path) => {
+    varSetters[get__default['default'](themeVars, path)] = value;
+  });
   adapter_dist_mattsjonesCssCoreAdapter.appendCss({
-    selector: `:root, .${rootVarsClassName}`,
-    rule: cssVars
+    selector,
+    rule: {
+      vars: varSetters
+    }
   }, fileScope);
-  return {
-    className: rootVarsClassName,
-    vars,
-    alternate: altVarContract => {
-      // @ts-expect-error // Revisit types here, maybe even library itself
-      const mergedContract = deepMerge__default['default'](varContract, altVarContract);
-      const altVarContractHash = createFileScopeIdent();
-      const altVarsClassName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(altVarContractHash);
-      const altCssVars = {};
-      /* TODO 
-        - validate new variables arn't set
-        - validate arrays have the same length as contract
-      */
 
-      walkObject(mergedContract, (value, path) => {
-        const cssVarName = `--${hash__default['default'](varContractHash + path)}`;
-        altCssVars[cssVarName] = value;
-      });
-      adapter_dist_mattsjonesCssCoreAdapter.appendCss({
-        selector: `.${altVarsClassName}`,
-        rule: altCssVars
-      }, fileScope);
-      return altVarsClassName;
-    }
-  };
+  if (shouldCreateVars) {
+    return themeVars;
+  }
 }
+function createTheme(arg1, arg2, arg3) {
+  const themeClassName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeId(typeof arg2 === 'object' ? arg3 : arg2));
+  const vars = typeof arg2 === 'object' ? createGlobalTheme(`.${themeClassName}`, arg1, arg2) : createGlobalTheme(`.${themeClassName}`, arg1);
+  return vars ? [themeClassName, vars] : themeClassName;
+}
+function createInlineTheme(themeVars, tokens) {
+  const styles = {};
+  /* TODO 
+    - validate new variables arn't set
+    - validate arrays have the same length as contract
+  */
 
+  walkObject(tokens, (value, path) => {
+    const varName = get__default['default'](themeVars, path);
+    styles[varName.substring(4, varName.length - 1)] = String(value);
+  });
+  Object.defineProperty(styles, 'toString', {
+    value: function () {
+      return Object.keys(this).map(key => `${key}:${this[key]}`).join(';');
+    },
+    writable: false
+  });
+  return styles;
+}
+
 if (typeof window !== 'undefined') {
@@ -132,4 +158,8 @@ adapter_dist_mattsjonesCssCoreAdapter.setAdapter(browserRuntimeAdapter);
 
-exports.defineVars = defineVars;
+exports.createGlobalTheme = createGlobalTheme;
+exports.createInlineTheme = createInlineTheme;
+exports.createTheme = createTheme;
+exports.createThemeVars = createThemeVars;
+exports.createVar = createVar;
 exports.setFileScope = setFileScope;
 exports.style = style;

dist/mattsjones-css-core.cjs.prod.js

@@ -5,6 +5,6 @@ 'use strict';
 
-var generateCss_dist_mattsjonesCssCoreGenerateCss = require('./generateCss-1f8b5dad.cjs.prod.js');
+var generateCss_dist_mattsjonesCssCoreGenerateCss = require('./generateCss-a4e6453b.cjs.prod.js');
 var adapter_dist_mattsjonesCssCoreAdapter = require('../adapter/dist/mattsjones-css-core-adapter.cjs.prod.js');
 var hash = require('@emotion/hash');
-var deepMerge = require('deepmerge');
+var get = require('lodash/get');
 require('postcss-js');
@@ -15,2 +15,3 @@ require('postcss');
 require('lodash/isEqual');
+require('lodash');
 
@@ -20,3 +21,3 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 var hash__default = /*#__PURE__*/_interopDefault(hash);
-var deepMerge__default = /*#__PURE__*/_interopDefault(deepMerge);
+var get__default = /*#__PURE__*/_interopDefault(get);
 
@@ -55,7 +56,9 @@ let styleSheet;
 
-const createFileScopeIdent = () => {
-  return `${hash__default['default'](fileScope)}_${refCounter++}`;
+const createFileScopeId = debugId => {
+
+  return `${hash__default['default'](fileScope)}${refCounter++}`;
 };
 
 const walkObject = (obj, fn, path = []) => {
+  // @ts-expect-error
   const clone = obj.constructor();
@@ -69,4 +72,6 @@
       clone[key] = value ? walkObject(value, fn, currentPath) : value;
+    } else if (typeof value === 'string' || typeof value === 'number') {
+      clone[key] = fn(value, currentPath);
     } else {
-      clone[key] = fn(value, currentPath.join('-'));
+      console.warn(`Skipping invalid key "${currentPath.join('.')}". Should be a string, number or object. Received: "${typeof value}"`);
     }
@@ -78,4 +83,8 @@ }
 
-function style(rule) {
-  const styleRuleName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeIdent());
+function createVar(debugId) {
+  const cssVarName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeId());
+  return `var(--${cssVarName})`;
+}
+function style(rule, debugId) {
+  const styleRuleName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeId());
   adapter_dist_mattsjonesCssCoreAdapter.appendCss({
@@ -87,42 +96,56 @@ selector: `.${styleRuleName}`,
 }
-function defineVars(varContract) {
-  const varContractHash = createFileScopeIdent();
-  const rootVarsClassName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(varContractHash);
-  const cssVars = {};
-  const vars = walkObject(varContract, (value, path) => {
-    const cssVarName = `--${hash__default['default'](varContractHash + path)}`;
-    cssVars[cssVarName] = value;
-    return `var(${cssVarName})`;
+function createThemeVars(themeContract) {
+  return walkObject(themeContract, (_value, path) => {
+    return createVar(path.join('-'));
   });
+}
+function createGlobalTheme(selector, arg2, arg3) {
+  const shouldCreateVars = Boolean(!arg3);
+  const themeVars = shouldCreateVars ? createThemeVars(arg2) : arg2;
+  const tokens = shouldCreateVars ? arg2 : arg3;
+  const varSetters = {};
+  /* TODO 
+    - validate new variables arn't set
+    - validate arrays have the same length as contract
+  */
+
+  walkObject(tokens, (value, path) => {
+    varSetters[get__default['default'](themeVars, path)] = value;
+  });
   adapter_dist_mattsjonesCssCoreAdapter.appendCss({
-    selector: `:root, .${rootVarsClassName}`,
-    rule: cssVars
+    selector,
+    rule: {
+      vars: varSetters
+    }
   }, fileScope);
-  return {
-    className: rootVarsClassName,
-    vars,
-    alternate: altVarContract => {
-      // @ts-expect-error // Revisit types here, maybe even library itself
-      const mergedContract = deepMerge__default['default'](varContract, altVarContract);
-      const altVarContractHash = createFileScopeIdent();
-      const altVarsClassName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(altVarContractHash);
-      const altCssVars = {};
-      /* TODO 
-        - validate new variables arn't set
-        - validate arrays have the same length as contract
-      */
 
-      walkObject(mergedContract, (value, path) => {
-        const cssVarName = `--${hash__default['default'](varContractHash + path)}`;
-        altCssVars[cssVarName] = value;
-      });
-      adapter_dist_mattsjonesCssCoreAdapter.appendCss({
-        selector: `.${altVarsClassName}`,
-        rule: altCssVars
-      }, fileScope);
-      return altVarsClassName;
-    }
-  };
+  if (shouldCreateVars) {
+    return themeVars;
+  }
 }
+function createTheme(arg1, arg2, arg3) {
+  const themeClassName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeId());
+  const vars = typeof arg2 === 'object' ? createGlobalTheme(`.${themeClassName}`, arg1, arg2) : createGlobalTheme(`.${themeClassName}`, arg1);
+  return vars ? [themeClassName, vars] : themeClassName;
+}
+function createInlineTheme(themeVars, tokens) {
+  const styles = {};
+  /* TODO 
+    - validate new variables arn't set
+    - validate arrays have the same length as contract
+  */
 
+  walkObject(tokens, (value, path) => {
+    const varName = get__default['default'](themeVars, path);
+    styles[varName.substring(4, varName.length - 1)] = String(value);
+  });
+  Object.defineProperty(styles, 'toString', {
+    value: function () {
+      return Object.keys(this).map(key => `${key}:${this[key]}`).join(';');
+    },
+    writable: false
+  });
+  return styles;
+}
+
 if (typeof window !== 'undefined') {
@@ -132,4 +155,8 @@ adapter_dist_mattsjonesCssCoreAdapter.setAdapter(browserRuntimeAdapter);
 
-exports.defineVars = defineVars;
+exports.createGlobalTheme = createGlobalTheme;
+exports.createInlineTheme = createInlineTheme;
+exports.createTheme = createTheme;
+exports.createThemeVars = createThemeVars;
+exports.createVar = createVar;
 exports.setFileScope = setFileScope;
 exports.style = style;

dist/mattsjones-css-core.esm.js

@@ -1,5 +0,5 @@
-import { g as generateCss, s as sanitiseIdent } from './generateCss-a9e3515b.esm.js';
+import { g as generateCss, s as sanitiseIdent } from './generateCss-7fbb5c05.esm.js';
 import { appendCss, setAdapter } from '../adapter/dist/mattsjones-css-core-adapter.esm.js';
 import hash from '@emotion/hash';
-import deepMerge from 'deepmerge';
+import get from 'lodash/get';
 import 'postcss-js';
@@ -10,2 +10,3 @@ import 'postcss';
 import 'lodash/isEqual';
+import 'lodash';
 
@@ -44,7 +45,12 @@ let styleSheet;
 
-const createFileScopeIdent = () => {
-  return `${hash(fileScope)}_${refCounter++}`;
+const createFileScopeId = debugId => {
+  if (process.env.NODE_ENV !== 'production' && debugId) {
+    return `${debugId}__${hash(fileScope)}${refCounter++}`;
+  }
+
+  return `${hash(fileScope)}${refCounter++}`;
 };
 
 const walkObject = (obj, fn, path = []) => {
+  // @ts-expect-error
   const clone = obj.constructor();
@@ -58,4 +64,6 @@
       clone[key] = value ? walkObject(value, fn, currentPath) : value;
+    } else if (typeof value === 'string' || typeof value === 'number') {
+      clone[key] = fn(value, currentPath);
     } else {
-      clone[key] = fn(value, currentPath.join('-'));
+      console.warn(`Skipping invalid key "${currentPath.join('.')}". Should be a string, number or object. Received: "${typeof value}"`);
     }
@@ -67,4 +75,8 @@ }
 
-function style(rule) {
-  const styleRuleName = sanitiseIdent(createFileScopeIdent());
+function createVar(debugId) {
+  const cssVarName = sanitiseIdent(createFileScopeId(debugId));
+  return `var(--${cssVarName})`;
+}
+function style(rule, debugId) {
+  const styleRuleName = sanitiseIdent(createFileScopeId(debugId));
   appendCss({
@@ -76,42 +88,56 @@ selector: `.${styleRuleName}`,
 }
-function defineVars(varContract) {
-  const varContractHash = createFileScopeIdent();
-  const rootVarsClassName = sanitiseIdent(varContractHash);
-  const cssVars = {};
-  const vars = walkObject(varContract, (value, path) => {
-    const cssVarName = `--${hash(varContractHash + path)}`;
-    cssVars[cssVarName] = value;
-    return `var(${cssVarName})`;
+function createThemeVars(themeContract) {
+  return walkObject(themeContract, (_value, path) => {
+    return createVar(path.join('-'));
   });
+}
+function createGlobalTheme(selector, arg2, arg3) {
+  const shouldCreateVars = Boolean(!arg3);
+  const themeVars = shouldCreateVars ? createThemeVars(arg2) : arg2;
+  const tokens = shouldCreateVars ? arg2 : arg3;
+  const varSetters = {};
+  /* TODO 
+    - validate new variables arn't set
+    - validate arrays have the same length as contract
+  */
+
+  walkObject(tokens, (value, path) => {
+    varSetters[get(themeVars, path)] = value;
+  });
   appendCss({
-    selector: `:root, .${rootVarsClassName}`,
-    rule: cssVars
+    selector,
+    rule: {
+      vars: varSetters
+    }
   }, fileScope);
-  return {
-    className: rootVarsClassName,
-    vars,
-    alternate: altVarContract => {
-      // @ts-expect-error // Revisit types here, maybe even library itself
-      const mergedContract = deepMerge(varContract, altVarContract);
-      const altVarContractHash = createFileScopeIdent();
-      const altVarsClassName = sanitiseIdent(altVarContractHash);
-      const altCssVars = {};
-      /* TODO 
-        - validate new variables arn't set
-        - validate arrays have the same length as contract
-      */
 
-      walkObject(mergedContract, (value, path) => {
-        const cssVarName = `--${hash(varContractHash + path)}`;
-        altCssVars[cssVarName] = value;
-      });
-      appendCss({
-        selector: `.${altVarsClassName}`,
-        rule: altCssVars
-      }, fileScope);
-      return altVarsClassName;
-    }
-  };
+  if (shouldCreateVars) {
+    return themeVars;
+  }
 }
+function createTheme(arg1, arg2, arg3) {
+  const themeClassName = sanitiseIdent(createFileScopeId(typeof arg2 === 'object' ? arg3 : arg2));
+  const vars = typeof arg2 === 'object' ? createGlobalTheme(`.${themeClassName}`, arg1, arg2) : createGlobalTheme(`.${themeClassName}`, arg1);
+  return vars ? [themeClassName, vars] : themeClassName;
+}
+function createInlineTheme(themeVars, tokens) {
+  const styles = {};
+  /* TODO 
+    - validate new variables arn't set
+    - validate arrays have the same length as contract
+  */
 
+  walkObject(tokens, (value, path) => {
+    const varName = get(themeVars, path);
+    styles[varName.substring(4, varName.length - 1)] = String(value);
+  });
+  Object.defineProperty(styles, 'toString', {
+    value: function () {
+      return Object.keys(this).map(key => `${key}:${this[key]}`).join(';');
+    },
+    writable: false
+  });
+  return styles;
+}
+
 if (typeof window !== 'undefined') {
@@ -121,2 +147,2 @@ setAdapter(browserRuntimeAdapter);
 
-export { defineVars, setFileScope, style };
+export { createGlobalTheme, createInlineTheme, createTheme, createThemeVars, createVar, setFileScope, style };

generateCss/dist/mattsjones-css-core-generateCss.browser.cjs.js

@@ -7,3 +7,3 @@ 'use strict';
 require('postcss');
-var generateCss_dist_mattsjonesCssCoreGenerateCss = require('../../dist/generateCss-b30cf9cc.browser.cjs.js');
+var generateCss_dist_mattsjonesCssCoreGenerateCss = require('../../dist/generateCss-97f38441.browser.cjs.js');
 require('@emotion/hash');
@@ -13,2 +13,3 @@ require('lodash/each');
 require('lodash/isEqual');
+require('lodash');
 
@@ -15,0 +16,0 @@

generateCss/dist/mattsjones-css-core-generateCss.browser.esm.js

 import 'postcss-js';
 import 'postcss';
-export { g as generateCss } from '../../dist/generateCss-ff9e789b.browser.esm.js';
+export { g as generateCss } from '../../dist/generateCss-8fd46c7f.browser.esm.js';
 import '@emotion/hash';
@@ -8,1 +8,2 @@ import 'lodash/each';
 import 'lodash/isEqual';
+import 'lodash';

generateCss/dist/mattsjones-css-core-generateCss.cjs.dev.js

@@ -7,3 +7,3 @@ 'use strict';
 require('postcss');
-var generateCss_dist_mattsjonesCssCoreGenerateCss = require('../../dist/generateCss-f66bc75a.cjs.dev.js');
+var generateCss_dist_mattsjonesCssCoreGenerateCss = require('../../dist/generateCss-2023ead3.cjs.dev.js');
 require('@emotion/hash');
@@ -13,2 +13,3 @@ require('lodash/each');
 require('lodash/isEqual');
+require('lodash');
 
@@ -15,0 +16,0 @@

generateCss/dist/mattsjones-css-core-generateCss.cjs.prod.js

@@ -7,3 +7,3 @@ 'use strict';
 require('postcss');
-var generateCss_dist_mattsjonesCssCoreGenerateCss = require('../../dist/generateCss-1f8b5dad.cjs.prod.js');
+var generateCss_dist_mattsjonesCssCoreGenerateCss = require('../../dist/generateCss-a4e6453b.cjs.prod.js');
 require('@emotion/hash');
@@ -13,2 +13,3 @@ require('lodash/each');
 require('lodash/isEqual');
+require('lodash');
 
@@ -15,0 +16,0 @@

generateCss/dist/mattsjones-css-core-generateCss.esm.js

 import 'postcss-js';
 import 'postcss';
-export { g as generateCss } from '../../dist/generateCss-a9e3515b.esm.js';
+export { g as generateCss } from '../../dist/generateCss-7fbb5c05.esm.js';
 import '@emotion/hash';
@@ -8,1 +8,2 @@ import 'lodash/each';
 import 'lodash/isEqual';
+import 'lodash';

package.json

 {
   "name": "@mattsjones/css-core",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "dist/mattsjones-css-core.cjs.js",
@@ -28,3 +28,2 @@ "module": "dist/mattsjones-css-core.esm.js",
     "dedent": "^0.7.0",
-    "deepmerge": "^4.2.2",
     "lodash": "^4.17.21",
@@ -31,0 +30,0 @@ "postcss": "^8.2.7",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

69977

increased by10.24%

Dependency count

6

decreased by-14.29%

Lines of code

1763

increased by13.89%

Worsened metrics

Number of low supply chain risk alerts

8

increased by100%

Dependency changes

• - Removeddeepmerge@^4.2.2

• - Removeddeepmerge@4.3.1(transitive)