@mattsjones/css-core - npm Package Compare versions

Comparing version 0.0.14 to 0.0.15

adapter/package.json

@@ -7,3 +7,4 @@ {
     "./dist/mattsjones-css-core-adapter.esm.js": "./dist/mattsjones-css-core-adapter.browser.esm.js"
-  }
+  },
+  "sideEffects": false
 }

CHANGELOG.md

 # @mattsjones/css-core
 
+## 0.0.15
+
+### Patch Changes
+
+- 71d9595: Prevent new styles from being registered dynamically after initial boot to ensure that styles are statically extractible
+- 863419c: Mark utils and core as sideEffect free
+- 87525d9: Expose `createInlineTheme` as a separate entrypoint
+- bcfb7b0: Ensure CSS variables are always strings
+
 ## 0.0.14
@@ -4,0 +13,0 @@

dist/declarations/src/index.d.ts

@@ -0,2 +1,6 @@
+import './runtimeAdapter';
 export type { StyleRule, GlobalStyleRule, Adapter } from './types';
-export * from './api';
+export * from './identifier';
+export * from './theme';
+export * from './style';
+export * from './vars';

dist/declarations/src/runtimeAdapter.d.ts

@@ -1,2 +0,1 @@
-import type { Adapter } from './types';
-export declare const browserRuntimeAdapter: Adapter;
+export {};

dist/declarations/src/types.d.ts

@@ -9,3 +9,3 @@ import type { PropertiesFallback, AtRule } from 'csstype';
     vars?: {
-        [key: string]: string | number;
+        [key: string]: string;
     };
@@ -57,5 +57,12 @@ };
 }
+export declare type Contract = {
+    [key: string]: string | null | Contract;
+};
+export declare type Tokens = {
+    [key: string]: string | Tokens;
+};
 export declare type MapLeafNodes<Obj, LeafType> = {
     [Prop in keyof Obj]: Obj[Prop] extends Record<string | number, any> ? MapLeafNodes<Obj[Prop], LeafType> : LeafType;
 };
+export declare type ThemeVars<ThemeContract extends Contract> = MapLeafNodes<ThemeContract, string>;
 export {};

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

@@ -6,7 +6,8 @@ 'use strict';
 var cssesc = require('cssesc');
-var utils = require('./utils-655d9a10.browser.cjs.js');
+var validateSelector = require('./validateSelector-a362f6f9.browser.cjs.js');
+var utils = require('./utils-15df3072.browser.cjs.js');
 var adapter_dist_mattsjonesCssCoreAdapter = require('../adapter/dist/mattsjones-css-core-adapter.browser.cjs.js');
 var hash = require('@emotion/hash');
+var fileScope_dist_mattsjonesCssCoreFileScope = require('../fileScope/dist/mattsjones-css-core-fileScope.browser.cjs.js');
 var dedent = require('dedent');
-var fileScope_dist_mattsjonesCssCoreFileScope = require('../fileScope/dist/mattsjones-css-core-fileScope.browser.cjs.js');
 require('css-selector-parser');
@@ -155,3 +156,3 @@
       const transformedSelector = this.transformSelector(selector.replace(RegExp('&', 'g'), root.selector));
-      utils.validateSelector(transformedSelector, root.selector);
+      validateSelector.validateSelector(transformedSelector, root.selector);
       this.addRule({
@@ -337,2 +338,6 @@ conditions,
 
+{
+  adapter_dist_mattsjonesCssCoreAdapter.setAdapter(browserRuntimeAdapter);
+}
+
 function getShortFileName() {
@@ -349,7 +354,7 @@ const fileScope = fileScope_dist_mattsjonesCssCoreFileScope.getFileScope();
 
-const generateIdentifier = debugId => {
+function generateIdentifier(debugId) {
   const refCount = fileScope_dist_mattsjonesCssCoreFileScope.getAndIncrementRefCounter();
   const identifier = process.env.NODE_ENV !== 'production' && debugId ? `${getShortFileName()}_${debugId}__${hash__default['default'](fileScope_dist_mattsjonesCssCoreFileScope.getFileScope())}${refCount}` : `${hash__default['default'](fileScope_dist_mattsjonesCssCoreFileScope.getFileScope())}${refCount}`;
   return identifier.match(/^[0-9]/) ? `_${identifier}` : identifier;
-};
+}
 
@@ -381,2 +386,43 @@ function createVar(debugId) {
 }
+function assignVars(varContract, tokens) {
+  const varSetters = {};
+  /* TODO
+  - validate new variables arn't set
+  - validate arrays have the same length as contract
+  */
+
+  utils.walkObject(tokens, (value, path) => {
+    varSetters[utils.get(varContract, path)] = String(value);
+  });
+  return varSetters;
+}
+function createThemeVars(themeContract) {
+  return utils.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;
+  adapter_dist_mattsjonesCssCoreAdapter.appendCss({
+    type: 'global',
+    selector: selector,
+    rule: {
+      vars: assignVars(themeVars, tokens)
+    }
+  }, fileScope_dist_mattsjonesCssCoreFileScope.getFileScope());
+
+  if (shouldCreateVars) {
+    return themeVars;
+  }
+}
+function createTheme(arg1, arg2, arg3) {
+  const themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg3 : arg2);
+  adapter_dist_mattsjonesCssCoreAdapter.registerClassName(themeClassName);
+  const vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
+  return vars ? [themeClassName, vars] : themeClassName;
+}
+
 function style(rule, debugId) {
@@ -406,6 +452,6 @@ const className = generateIdentifier(debugId);
     throw new Error(dedent__default['default']`
-        This function creates and returns a hashed font-family name, so the "fontFamily" property should not be provided.
-
-        If you'd like to define a globally scoped custom font, you can use the "globalFontFace" function instead.
-      `);
+          This function creates and returns a hashed font-family name, so the "fontFamily" property should not be provided.
+  
+          If you'd like to define a globally scoped custom font, you can use the "globalFontFace" function instead.
+        `);
   }
@@ -471,68 +517,5 @@
 }
-function createThemeVars(themeContract) {
-  return utils.walkObject(themeContract, (_value, path) => {
-    return createVar(path.join('-'));
-  });
-}
-function assignVars(varContract, tokens) {
-  const varSetters = {};
-  /* TODO
-    - validate new variables arn't set
-    - validate arrays have the same length as contract
-  */
 
-  utils.walkObject(tokens, (value, path) => {
-    varSetters[utils.get(varContract, path)] = value;
-  });
-  return varSetters;
-}
-function createGlobalTheme(selector, arg2, arg3) {
-  const shouldCreateVars = Boolean(!arg3);
-  const themeVars = shouldCreateVars ? createThemeVars(arg2) : arg2;
-  const tokens = shouldCreateVars ? arg2 : arg3;
-  adapter_dist_mattsjonesCssCoreAdapter.appendCss({
-    type: 'global',
-    selector: selector,
-    rule: {
-      vars: assignVars(themeVars, tokens)
-    }
-  }, fileScope_dist_mattsjonesCssCoreFileScope.getFileScope());
-
-  if (shouldCreateVars) {
-    return themeVars;
-  }
-}
-function createTheme(arg1, arg2, arg3) {
-  const themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg3 : arg2);
-  adapter_dist_mattsjonesCssCoreAdapter.registerClassName(themeClassName);
-  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
-  */
-
-  utils.walkObject(tokens, (value, path) => {
-    const varName = utils.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;
-}
-
-{
-  adapter_dist_mattsjonesCssCoreAdapter.setAdapter(browserRuntimeAdapter);
-}
-
 exports.assignVars = assignVars;
 exports.createGlobalTheme = createGlobalTheme;
-exports.createInlineTheme = createInlineTheme;
 exports.createTheme = createTheme;
@@ -543,2 +526,3 @@ exports.createThemeVars = createThemeVars;
 exports.fontFace = fontFace;
+exports.generateIdentifier = generateIdentifier;
 exports.globalFontFace = globalFontFace;
@@ -545,0 +529,0 @@ exports.globalKeyframes = globalKeyframes;

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

 import cssesc from 'cssesc';
-import { o as omit, f as forEach, m as mapKeys, v as validateSelector, i as isEqual, w as walkObject, g as get } from './utils-cba7c8d6.browser.esm.js';
-import { registerClassName, appendCss, setAdapter } from '../adapter/dist/mattsjones-css-core-adapter.browser.esm.js';
+import { v as validateSelector } from './validateSelector-770f9fc8.browser.esm.js';
+import { o as omit, f as forEach, m as mapKeys, i as isEqual, w as walkObject, g as get } from './utils-0ffe4d39.browser.esm.js';
+import { setAdapter, appendCss, registerClassName } from '../adapter/dist/mattsjones-css-core-adapter.browser.esm.js';
 import hash from '@emotion/hash';
+import { getAndIncrementRefCounter, getFileScope } from '../fileScope/dist/mattsjones-css-core-fileScope.browser.esm.js';
 import dedent from 'dedent';
-import { getAndIncrementRefCounter, getFileScope } from '../fileScope/dist/mattsjones-css-core-fileScope.browser.esm.js';
 import 'css-selector-parser';
@@ -325,2 +326,6 @@
 
+{
+  setAdapter(browserRuntimeAdapter);
+}
+
 function getShortFileName() {
@@ -337,7 +342,7 @@ const fileScope = getFileScope();
 
-const generateIdentifier = debugId => {
+function generateIdentifier(debugId) {
   const refCount = getAndIncrementRefCounter();
   const identifier = process.env.NODE_ENV !== 'production' && debugId ? `${getShortFileName()}_${debugId}__${hash(getFileScope())}${refCount}` : `${hash(getFileScope())}${refCount}`;
   return identifier.match(/^[0-9]/) ? `_${identifier}` : identifier;
-};
+}
 
@@ -369,2 +374,43 @@ function createVar(debugId) {
 }
+function assignVars(varContract, tokens) {
+  const varSetters = {};
+  /* TODO
+  - validate new variables arn't set
+  - validate arrays have the same length as contract
+  */
+
+  walkObject(tokens, (value, path) => {
+    varSetters[get(varContract, path)] = String(value);
+  });
+  return varSetters;
+}
+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;
+  appendCss({
+    type: 'global',
+    selector: selector,
+    rule: {
+      vars: assignVars(themeVars, tokens)
+    }
+  }, getFileScope());
+
+  if (shouldCreateVars) {
+    return themeVars;
+  }
+}
+function createTheme(arg1, arg2, arg3) {
+  const themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg3 : arg2);
+  registerClassName(themeClassName);
+  const vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
+  return vars ? [themeClassName, vars] : themeClassName;
+}
+
 function style(rule, debugId) {
@@ -394,6 +440,6 @@ const className = generateIdentifier(debugId);
     throw new Error(dedent`
-        This function creates and returns a hashed font-family name, so the "fontFamily" property should not be provided.
-
-        If you'd like to define a globally scoped custom font, you can use the "globalFontFace" function instead.
-      `);
+          This function creates and returns a hashed font-family name, so the "fontFamily" property should not be provided.
+  
+          If you'd like to define a globally scoped custom font, you can use the "globalFontFace" function instead.
+        `);
   }
@@ -459,65 +505,3 @@
 }
-function createThemeVars(themeContract) {
-  return walkObject(themeContract, (_value, path) => {
-    return createVar(path.join('-'));
-  });
-}
-function assignVars(varContract, tokens) {
-  const varSetters = {};
-  /* TODO
-    - validate new variables arn't set
-    - validate arrays have the same length as contract
-  */
 
-  walkObject(tokens, (value, path) => {
-    varSetters[get(varContract, path)] = value;
-  });
-  return varSetters;
-}
-function createGlobalTheme(selector, arg2, arg3) {
-  const shouldCreateVars = Boolean(!arg3);
-  const themeVars = shouldCreateVars ? createThemeVars(arg2) : arg2;
-  const tokens = shouldCreateVars ? arg2 : arg3;
-  appendCss({
-    type: 'global',
-    selector: selector,
-    rule: {
-      vars: assignVars(themeVars, tokens)
-    }
-  }, getFileScope());
-
-  if (shouldCreateVars) {
-    return themeVars;
-  }
-}
-function createTheme(arg1, arg2, arg3) {
-  const themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg3 : arg2);
-  registerClassName(themeClassName);
-  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;
-}
-
-{
-  setAdapter(browserRuntimeAdapter);
-}
-
-export { assignVars, createGlobalTheme, createInlineTheme, createTheme, createThemeVars, createVar, fallbackVar, fontFace, globalFontFace, globalKeyframes, globalStyle, keyframes, mapToStyles, style };
+export { assignVars, createGlobalTheme, createTheme, createThemeVars, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalStyle, keyframes, mapToStyles, style };

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

@@ -6,7 +6,8 @@ 'use strict';
 var cssesc = require('cssesc');
-var utils = require('./utils-e55d05cd.cjs.dev.js');
+var validateSelector = require('./validateSelector-8efaca91.cjs.dev.js');
+var utils = require('./utils-c75cbf67.cjs.dev.js');
 var adapter_dist_mattsjonesCssCoreAdapter = require('../adapter/dist/mattsjones-css-core-adapter.cjs.dev.js');
 var hash = require('@emotion/hash');
+var fileScope_dist_mattsjonesCssCoreFileScope = require('../fileScope/dist/mattsjones-css-core-fileScope.cjs.dev.js');
 var dedent = require('dedent');
-var fileScope_dist_mattsjonesCssCoreFileScope = require('../fileScope/dist/mattsjones-css-core-fileScope.cjs.dev.js');
 require('css-selector-parser');
@@ -155,3 +156,3 @@
       const transformedSelector = this.transformSelector(selector.replace(RegExp('&', 'g'), root.selector));
-      utils.validateSelector(transformedSelector, root.selector);
+      validateSelector.validateSelector(transformedSelector, root.selector);
       this.addRule({
@@ -337,2 +338,6 @@ conditions,
 
+if (typeof window !== 'undefined') {
+  adapter_dist_mattsjonesCssCoreAdapter.setAdapter(browserRuntimeAdapter);
+}
+
 function getShortFileName() {
@@ -349,7 +354,7 @@ const fileScope = fileScope_dist_mattsjonesCssCoreFileScope.getFileScope();
 
-const generateIdentifier = debugId => {
+function generateIdentifier(debugId) {
   const refCount = fileScope_dist_mattsjonesCssCoreFileScope.getAndIncrementRefCounter();
   const identifier = process.env.NODE_ENV !== 'production' && debugId ? `${getShortFileName()}_${debugId}__${hash__default['default'](fileScope_dist_mattsjonesCssCoreFileScope.getFileScope())}${refCount}` : `${hash__default['default'](fileScope_dist_mattsjonesCssCoreFileScope.getFileScope())}${refCount}`;
   return identifier.match(/^[0-9]/) ? `_${identifier}` : identifier;
-};
+}
 
@@ -381,2 +386,43 @@ function createVar(debugId) {
 }
+function assignVars(varContract, tokens) {
+  const varSetters = {};
+  /* TODO
+  - validate new variables arn't set
+  - validate arrays have the same length as contract
+  */
+
+  utils.walkObject(tokens, (value, path) => {
+    varSetters[utils.get(varContract, path)] = String(value);
+  });
+  return varSetters;
+}
+function createThemeVars(themeContract) {
+  return utils.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;
+  adapter_dist_mattsjonesCssCoreAdapter.appendCss({
+    type: 'global',
+    selector: selector,
+    rule: {
+      vars: assignVars(themeVars, tokens)
+    }
+  }, fileScope_dist_mattsjonesCssCoreFileScope.getFileScope());
+
+  if (shouldCreateVars) {
+    return themeVars;
+  }
+}
+function createTheme(arg1, arg2, arg3) {
+  const themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg3 : arg2);
+  adapter_dist_mattsjonesCssCoreAdapter.registerClassName(themeClassName);
+  const vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
+  return vars ? [themeClassName, vars] : themeClassName;
+}
+
 function style(rule, debugId) {
@@ -406,6 +452,6 @@ const className = generateIdentifier(debugId);
     throw new Error(dedent__default['default']`
-        This function creates and returns a hashed font-family name, so the "fontFamily" property should not be provided.
-
-        If you'd like to define a globally scoped custom font, you can use the "globalFontFace" function instead.
-      `);
+          This function creates and returns a hashed font-family name, so the "fontFamily" property should not be provided.
+  
+          If you'd like to define a globally scoped custom font, you can use the "globalFontFace" function instead.
+        `);
   }
@@ -471,68 +517,5 @@
 }
-function createThemeVars(themeContract) {
-  return utils.walkObject(themeContract, (_value, path) => {
-    return createVar(path.join('-'));
-  });
-}
-function assignVars(varContract, tokens) {
-  const varSetters = {};
-  /* TODO
-    - validate new variables arn't set
-    - validate arrays have the same length as contract
-  */
 
-  utils.walkObject(tokens, (value, path) => {
-    varSetters[utils.get(varContract, path)] = value;
-  });
-  return varSetters;
-}
-function createGlobalTheme(selector, arg2, arg3) {
-  const shouldCreateVars = Boolean(!arg3);
-  const themeVars = shouldCreateVars ? createThemeVars(arg2) : arg2;
-  const tokens = shouldCreateVars ? arg2 : arg3;
-  adapter_dist_mattsjonesCssCoreAdapter.appendCss({
-    type: 'global',
-    selector: selector,
-    rule: {
-      vars: assignVars(themeVars, tokens)
-    }
-  }, fileScope_dist_mattsjonesCssCoreFileScope.getFileScope());
-
-  if (shouldCreateVars) {
-    return themeVars;
-  }
-}
-function createTheme(arg1, arg2, arg3) {
-  const themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg3 : arg2);
-  adapter_dist_mattsjonesCssCoreAdapter.registerClassName(themeClassName);
-  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
-  */
-
-  utils.walkObject(tokens, (value, path) => {
-    const varName = utils.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') {
-  adapter_dist_mattsjonesCssCoreAdapter.setAdapter(browserRuntimeAdapter);
-}
-
 exports.assignVars = assignVars;
 exports.createGlobalTheme = createGlobalTheme;
-exports.createInlineTheme = createInlineTheme;
 exports.createTheme = createTheme;
@@ -543,2 +526,3 @@ exports.createThemeVars = createThemeVars;
 exports.fontFace = fontFace;
+exports.generateIdentifier = generateIdentifier;
 exports.globalFontFace = globalFontFace;
@@ -545,0 +529,0 @@ exports.globalKeyframes = globalKeyframes;

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

@@ -6,7 +6,8 @@ 'use strict';
 var cssesc = require('cssesc');
-var utils = require('./utils-ddaa8dd7.cjs.prod.js');
+var validateSelector = require('./validateSelector-e62ae494.cjs.prod.js');
+var utils = require('./utils-7a28e4a3.cjs.prod.js');
 var adapter_dist_mattsjonesCssCoreAdapter = require('../adapter/dist/mattsjones-css-core-adapter.cjs.prod.js');
 var hash = require('@emotion/hash');
+var fileScope_dist_mattsjonesCssCoreFileScope = require('../fileScope/dist/mattsjones-css-core-fileScope.cjs.prod.js');
 var dedent = require('dedent');
-var fileScope_dist_mattsjonesCssCoreFileScope = require('../fileScope/dist/mattsjones-css-core-fileScope.cjs.prod.js');
 require('css-selector-parser');
@@ -155,3 +156,3 @@
       const transformedSelector = this.transformSelector(selector.replace(RegExp('&', 'g'), root.selector));
-      utils.validateSelector(transformedSelector, root.selector);
+      validateSelector.validateSelector(transformedSelector, root.selector);
       this.addRule({
@@ -337,7 +338,11 @@ conditions,
 
-const generateIdentifier = debugId => {
+if (typeof window !== 'undefined') {
+  adapter_dist_mattsjonesCssCoreAdapter.setAdapter(browserRuntimeAdapter);
+}
+
+function generateIdentifier(debugId) {
   const refCount = fileScope_dist_mattsjonesCssCoreFileScope.getAndIncrementRefCounter();
   const identifier = `${hash__default['default'](fileScope_dist_mattsjonesCssCoreFileScope.getFileScope())}${refCount}`;
   return identifier.match(/^[0-9]/) ? `_${identifier}` : identifier;
-};
+}
 
@@ -369,2 +374,43 @@ function createVar(debugId) {
 }
+function assignVars(varContract, tokens) {
+  const varSetters = {};
+  /* TODO
+  - validate new variables arn't set
+  - validate arrays have the same length as contract
+  */
+
+  utils.walkObject(tokens, (value, path) => {
+    varSetters[utils.get(varContract, path)] = String(value);
+  });
+  return varSetters;
+}
+function createThemeVars(themeContract) {
+  return utils.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;
+  adapter_dist_mattsjonesCssCoreAdapter.appendCss({
+    type: 'global',
+    selector: selector,
+    rule: {
+      vars: assignVars(themeVars, tokens)
+    }
+  }, fileScope_dist_mattsjonesCssCoreFileScope.getFileScope());
+
+  if (shouldCreateVars) {
+    return themeVars;
+  }
+}
+function createTheme(arg1, arg2, arg3) {
+  const themeClassName = generateIdentifier();
+  adapter_dist_mattsjonesCssCoreAdapter.registerClassName(themeClassName);
+  const vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
+  return vars ? [themeClassName, vars] : themeClassName;
+}
+
 function style(rule, debugId) {
@@ -394,6 +440,6 @@ const className = generateIdentifier();
     throw new Error(dedent__default['default']`
-        This function creates and returns a hashed font-family name, so the "fontFamily" property should not be provided.
-
-        If you'd like to define a globally scoped custom font, you can use the "globalFontFace" function instead.
-      `);
+          This function creates and returns a hashed font-family name, so the "fontFamily" property should not be provided.
+  
+          If you'd like to define a globally scoped custom font, you can use the "globalFontFace" function instead.
+        `);
   }
@@ -459,68 +505,5 @@
 }
-function createThemeVars(themeContract) {
-  return utils.walkObject(themeContract, (_value, path) => {
-    return createVar(path.join('-'));
-  });
-}
-function assignVars(varContract, tokens) {
-  const varSetters = {};
-  /* TODO
-    - validate new variables arn't set
-    - validate arrays have the same length as contract
-  */
 
-  utils.walkObject(tokens, (value, path) => {
-    varSetters[utils.get(varContract, path)] = value;
-  });
-  return varSetters;
-}
-function createGlobalTheme(selector, arg2, arg3) {
-  const shouldCreateVars = Boolean(!arg3);
-  const themeVars = shouldCreateVars ? createThemeVars(arg2) : arg2;
-  const tokens = shouldCreateVars ? arg2 : arg3;
-  adapter_dist_mattsjonesCssCoreAdapter.appendCss({
-    type: 'global',
-    selector: selector,
-    rule: {
-      vars: assignVars(themeVars, tokens)
-    }
-  }, fileScope_dist_mattsjonesCssCoreFileScope.getFileScope());
-
-  if (shouldCreateVars) {
-    return themeVars;
-  }
-}
-function createTheme(arg1, arg2, arg3) {
-  const themeClassName = generateIdentifier();
-  adapter_dist_mattsjonesCssCoreAdapter.registerClassName(themeClassName);
-  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
-  */
-
-  utils.walkObject(tokens, (value, path) => {
-    const varName = utils.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') {
-  adapter_dist_mattsjonesCssCoreAdapter.setAdapter(browserRuntimeAdapter);
-}
-
 exports.assignVars = assignVars;
 exports.createGlobalTheme = createGlobalTheme;
-exports.createInlineTheme = createInlineTheme;
 exports.createTheme = createTheme;
@@ -531,2 +514,3 @@ exports.createThemeVars = createThemeVars;
 exports.fontFace = fontFace;
+exports.generateIdentifier = generateIdentifier;
 exports.globalFontFace = globalFontFace;
@@ -533,0 +517,0 @@ exports.globalKeyframes = globalKeyframes;

dist/mattsjones-css-core.esm.js

 import cssesc from 'cssesc';
-import { o as omit, f as forEach, m as mapKeys, v as validateSelector, i as isEqual, w as walkObject, g as get } from './utils-d61c10ab.esm.js';
-import { registerClassName, appendCss, setAdapter } from '../adapter/dist/mattsjones-css-core-adapter.esm.js';
+import { v as validateSelector } from './validateSelector-64f2d9be.esm.js';
+import { o as omit, f as forEach, m as mapKeys, i as isEqual, w as walkObject, g as get } from './utils-5af4d550.esm.js';
+import { setAdapter, appendCss, registerClassName } from '../adapter/dist/mattsjones-css-core-adapter.esm.js';
 import hash from '@emotion/hash';
+import { getAndIncrementRefCounter, getFileScope } from '../fileScope/dist/mattsjones-css-core-fileScope.esm.js';
 import dedent from 'dedent';
-import { getAndIncrementRefCounter, getFileScope } from '../fileScope/dist/mattsjones-css-core-fileScope.esm.js';
 import 'css-selector-parser';
@@ -325,2 +326,6 @@
 
+if (typeof window !== 'undefined') {
+  setAdapter(browserRuntimeAdapter);
+}
+
 function getShortFileName() {
@@ -337,7 +342,7 @@ const fileScope = getFileScope();
 
-const generateIdentifier = debugId => {
+function generateIdentifier(debugId) {
   const refCount = getAndIncrementRefCounter();
   const identifier = process.env.NODE_ENV !== 'production' && debugId ? `${getShortFileName()}_${debugId}__${hash(getFileScope())}${refCount}` : `${hash(getFileScope())}${refCount}`;
   return identifier.match(/^[0-9]/) ? `_${identifier}` : identifier;
-};
+}
 
@@ -369,2 +374,43 @@ function createVar(debugId) {
 }
+function assignVars(varContract, tokens) {
+  const varSetters = {};
+  /* TODO
+  - validate new variables arn't set
+  - validate arrays have the same length as contract
+  */
+
+  walkObject(tokens, (value, path) => {
+    varSetters[get(varContract, path)] = String(value);
+  });
+  return varSetters;
+}
+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;
+  appendCss({
+    type: 'global',
+    selector: selector,
+    rule: {
+      vars: assignVars(themeVars, tokens)
+    }
+  }, getFileScope());
+
+  if (shouldCreateVars) {
+    return themeVars;
+  }
+}
+function createTheme(arg1, arg2, arg3) {
+  const themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg3 : arg2);
+  registerClassName(themeClassName);
+  const vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
+  return vars ? [themeClassName, vars] : themeClassName;
+}
+
 function style(rule, debugId) {
@@ -394,6 +440,6 @@ const className = generateIdentifier(debugId);
     throw new Error(dedent`
-        This function creates and returns a hashed font-family name, so the "fontFamily" property should not be provided.
-
-        If you'd like to define a globally scoped custom font, you can use the "globalFontFace" function instead.
-      `);
+          This function creates and returns a hashed font-family name, so the "fontFamily" property should not be provided.
+  
+          If you'd like to define a globally scoped custom font, you can use the "globalFontFace" function instead.
+        `);
   }
@@ -459,65 +505,3 @@
 }
-function createThemeVars(themeContract) {
-  return walkObject(themeContract, (_value, path) => {
-    return createVar(path.join('-'));
-  });
-}
-function assignVars(varContract, tokens) {
-  const varSetters = {};
-  /* TODO
-    - validate new variables arn't set
-    - validate arrays have the same length as contract
-  */
 
-  walkObject(tokens, (value, path) => {
-    varSetters[get(varContract, path)] = value;
-  });
-  return varSetters;
-}
-function createGlobalTheme(selector, arg2, arg3) {
-  const shouldCreateVars = Boolean(!arg3);
-  const themeVars = shouldCreateVars ? createThemeVars(arg2) : arg2;
-  const tokens = shouldCreateVars ? arg2 : arg3;
-  appendCss({
-    type: 'global',
-    selector: selector,
-    rule: {
-      vars: assignVars(themeVars, tokens)
-    }
-  }, getFileScope());
-
-  if (shouldCreateVars) {
-    return themeVars;
-  }
-}
-function createTheme(arg1, arg2, arg3) {
-  const themeClassName = generateIdentifier(typeof arg2 === 'object' ? arg3 : arg2);
-  registerClassName(themeClassName);
-  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') {
-  setAdapter(browserRuntimeAdapter);
-}
-
-export { assignVars, createGlobalTheme, createInlineTheme, createTheme, createThemeVars, createVar, fallbackVar, fontFace, globalFontFace, globalKeyframes, globalStyle, keyframes, mapToStyles, style };
+export { assignVars, createGlobalTheme, createTheme, createThemeVars, createVar, fallbackVar, fontFace, generateIdentifier, globalFontFace, globalKeyframes, globalStyle, keyframes, mapToStyles, style };

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

@@ -8,4 +8,3 @@ 'use strict';
 let refCounter = 0;
-const defaultFileScope = 'DEFAULT_FILE_SCOPE';
-const fileScopes = [defaultFileScope];
+const fileScopes = [];
 function setFileScope(newFileScope) {
@@ -21,2 +20,6 @@ refCounter = 0;
 function getFileScope() {
+  if (fileScopes.length === 0) {
+    throw new Error('New styles cannot be registered dynamically after initial boot. This is to ensure that styles are statically extractible.');
+  }
+
   return fileScopes[0];
@@ -23,0 +26,0 @@ }

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

 import { onEndFileScope } from '../../adapter/dist/mattsjones-css-core-adapter.browser.esm.js';
 
 let refCounter = 0;
-const defaultFileScope = 'DEFAULT_FILE_SCOPE';
-const fileScopes = [defaultFileScope];
+const fileScopes = [];
 function setFileScope(newFileScope) {
@@ -16,2 +15,6 @@ refCounter = 0;
 function getFileScope() {
+  if (fileScopes.length === 0) {
+    throw new Error('New styles cannot be registered dynamically after initial boot. This is to ensure that styles are statically extractible.');
+  }
+
   return fileScopes[0];
@@ -18,0 +21,0 @@ }

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

@@ -8,4 +8,3 @@ 'use strict';
 let refCounter = 0;
-const defaultFileScope = 'DEFAULT_FILE_SCOPE';
-const fileScopes = [defaultFileScope];
+const fileScopes = [];
 function setFileScope(newFileScope) {
@@ -21,2 +20,6 @@ refCounter = 0;
 function getFileScope() {
+  if (fileScopes.length === 0) {
+    throw new Error('New styles cannot be registered dynamically after initial boot. This is to ensure that styles are statically extractible.');
+  }
+
   return fileScopes[0];
@@ -23,0 +26,0 @@ }

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

@@ -8,4 +8,3 @@ 'use strict';
 let refCounter = 0;
-const defaultFileScope = 'DEFAULT_FILE_SCOPE';
-const fileScopes = [defaultFileScope];
+const fileScopes = [];
 function setFileScope(newFileScope) {
@@ -21,2 +20,6 @@ refCounter = 0;
 function getFileScope() {
+  if (fileScopes.length === 0) {
+    throw new Error('New styles cannot be registered dynamically after initial boot. This is to ensure that styles are statically extractible.');
+  }
+
   return fileScopes[0];
@@ -23,0 +26,0 @@ }

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

 import { onEndFileScope } from '../../adapter/dist/mattsjones-css-core-adapter.esm.js';
 
 let refCounter = 0;
-const defaultFileScope = 'DEFAULT_FILE_SCOPE';
-const fileScopes = [defaultFileScope];
+const fileScopes = [];
 function setFileScope(newFileScope) {
@@ -16,2 +15,6 @@ refCounter = 0;
 function getFileScope() {
+  if (fileScopes.length === 0) {
+    throw new Error('New styles cannot be registered dynamically after initial boot. This is to ensure that styles are statically extractible.');
+  }
+
   return fileScopes[0];
@@ -18,0 +21,0 @@ }

fileScope/package.json

@@ -7,3 +7,4 @@ {
     "./dist/mattsjones-css-core-fileScope.esm.js": "./dist/mattsjones-css-core-fileScope.browser.esm.js"
-  }
+  },
+  "sideEffects": false
 }

package.json

 {
   "name": "@mattsjones/css-core",
-  "version": "0.0.14",
+  "version": "0.0.15",
+  "sideEffects": true,
   "main": "dist/mattsjones-css-core.cjs.js",
@@ -15,3 +16,4 @@ "module": "dist/mattsjones-css-core.esm.js",
       "transformCss.ts",
-      "fileScope.ts"
+      "fileScope.ts",
+      "createInlineTheme.ts"
     ]
@@ -23,3 +25,4 @@ },
     "/transformCss",
-    "/fileScope"
+    "/fileScope",
+    "/createInlineTheme"
   ],
@@ -26,0 +29,0 @@ "author": "SEEK",

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

@@ -6,3 +6,4 @@ 'use strict';
 var cssesc = require('cssesc');
-var utils = require('../../dist/utils-655d9a10.browser.cjs.js');
+var validateSelector = require('../../dist/validateSelector-a362f6f9.browser.cjs.js');
+var utils = require('../../dist/utils-15df3072.browser.cjs.js');
 require('css-selector-parser');
@@ -150,3 +151,3 @@ require('dedent');
       const transformedSelector = this.transformSelector(selector.replace(RegExp('&', 'g'), root.selector));
-      utils.validateSelector(transformedSelector, root.selector);
+      validateSelector.validateSelector(transformedSelector, root.selector);
       this.addRule({
@@ -153,0 +154,0 @@ conditions,

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

 import cssesc from 'cssesc';
-import { o as omit, f as forEach, m as mapKeys, i as isEqual, v as validateSelector } from '../../dist/utils-cba7c8d6.browser.esm.js';
+import { v as validateSelector } from '../../dist/validateSelector-770f9fc8.browser.esm.js';
+import { o as omit, f as forEach, m as mapKeys, i as isEqual } from '../../dist/utils-0ffe4d39.browser.esm.js';
 import 'css-selector-parser';
@@ -4,0 +5,0 @@ import 'dedent';

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

@@ -6,3 +6,4 @@ 'use strict';
 var cssesc = require('cssesc');
-var utils = require('../../dist/utils-e55d05cd.cjs.dev.js');
+var validateSelector = require('../../dist/validateSelector-8efaca91.cjs.dev.js');
+var utils = require('../../dist/utils-c75cbf67.cjs.dev.js');
 require('css-selector-parser');
@@ -150,3 +151,3 @@ require('dedent');
       const transformedSelector = this.transformSelector(selector.replace(RegExp('&', 'g'), root.selector));
-      utils.validateSelector(transformedSelector, root.selector);
+      validateSelector.validateSelector(transformedSelector, root.selector);
       this.addRule({
@@ -153,0 +154,0 @@ conditions,

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

@@ -6,3 +6,4 @@ 'use strict';
 var cssesc = require('cssesc');
-var utils = require('../../dist/utils-ddaa8dd7.cjs.prod.js');
+var validateSelector = require('../../dist/validateSelector-e62ae494.cjs.prod.js');
+var utils = require('../../dist/utils-7a28e4a3.cjs.prod.js');
 require('css-selector-parser');
@@ -150,3 +151,3 @@ require('dedent');
       const transformedSelector = this.transformSelector(selector.replace(RegExp('&', 'g'), root.selector));
-      utils.validateSelector(transformedSelector, root.selector);
+      validateSelector.validateSelector(transformedSelector, root.selector);
       this.addRule({
@@ -153,0 +154,0 @@ conditions,

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

 import cssesc from 'cssesc';
-import { o as omit, f as forEach, m as mapKeys, i as isEqual, v as validateSelector } from '../../dist/utils-d61c10ab.esm.js';
+import { v as validateSelector } from '../../dist/validateSelector-64f2d9be.esm.js';
+import { o as omit, f as forEach, m as mapKeys, i as isEqual } from '../../dist/utils-5af4d550.esm.js';
 import 'css-selector-parser';
@@ -4,0 +5,0 @@ import 'dedent';

transformCss/package.json

@@ -7,3 +7,4 @@ {
     "./dist/mattsjones-css-core-transformCss.esm.js": "./dist/mattsjones-css-core-transformCss.browser.esm.js"
-  }
+  },
+  "sideEffects": false
 }

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

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

168418

increased by2.51%

Number of package files

64

increased by36.17%

Lines of code

4553

increased by1.38%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low supply chain risk alerts

14

increased by7.69%

No dependency changes