@mattsjones/css-core - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

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

@@ -6,3 +6,5 @@ 'use strict';
 let adapter = {
-  appendCss: () => {}
+  appendCss: () => {},
+  registerClassName: () => {},
+  getRegisteredClassNames: () => []
 };
@@ -15,4 +17,12 @@ const setAdapter = newAdapter => {
 };
+const registerClassName = (...props) => {
+  return adapter.registerClassName(...props);
+};
+const getRegisteredClassNames = (...props) => {
+  return adapter.getRegisteredClassNames(...props);
+};
 
 exports.appendCss = appendCss;
+exports.getRegisteredClassNames = getRegisteredClassNames;
+exports.registerClassName = registerClassName;
 exports.setAdapter = setAdapter;

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

 let adapter = {
-  appendCss: () => {}
+  appendCss: () => {},
+  registerClassName: () => {},
+  getRegisteredClassNames: () => []
 };
@@ -10,3 +12,9 @@ const setAdapter = newAdapter => {
 };
+const registerClassName = (...props) => {
+  return adapter.registerClassName(...props);
+};
+const getRegisteredClassNames = (...props) => {
+  return adapter.getRegisteredClassNames(...props);
+};
 
-export { appendCss, setAdapter };
+export { appendCss, getRegisteredClassNames, registerClassName, setAdapter };

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

@@ -6,3 +6,5 @@ 'use strict';
 let adapter = {
-  appendCss: () => {}
+  appendCss: () => {},
+  registerClassName: () => {},
+  getRegisteredClassNames: () => []
 };
@@ -15,4 +17,12 @@ const setAdapter = newAdapter => {
 };
+const registerClassName = (...props) => {
+  return adapter.registerClassName(...props);
+};
+const getRegisteredClassNames = (...props) => {
+  return adapter.getRegisteredClassNames(...props);
+};
 
 exports.appendCss = appendCss;
+exports.getRegisteredClassNames = getRegisteredClassNames;
+exports.registerClassName = registerClassName;
 exports.setAdapter = setAdapter;

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

@@ -6,3 +6,5 @@ 'use strict';
 let adapter = {
-  appendCss: () => {}
+  appendCss: () => {},
+  registerClassName: () => {},
+  getRegisteredClassNames: () => []
 };
@@ -15,4 +17,12 @@ const setAdapter = newAdapter => {
 };
+const registerClassName = (...props) => {
+  return adapter.registerClassName(...props);
+};
+const getRegisteredClassNames = (...props) => {
+  return adapter.getRegisteredClassNames(...props);
+};
 
 exports.appendCss = appendCss;
+exports.getRegisteredClassNames = getRegisteredClassNames;
+exports.registerClassName = registerClassName;
 exports.setAdapter = setAdapter;

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

 let adapter = {
-  appendCss: () => {}
+  appendCss: () => {},
+  registerClassName: () => {},
+  getRegisteredClassNames: () => []
 };
@@ -10,3 +12,9 @@ const setAdapter = newAdapter => {
 };
+const registerClassName = (...props) => {
+  return adapter.registerClassName(...props);
+};
+const getRegisteredClassNames = (...props) => {
+  return adapter.getRegisteredClassNames(...props);
+};
 
-export { appendCss, setAdapter };
+export { appendCss, getRegisteredClassNames, registerClassName, setAdapter };

dist/declarations/src/adapter.d.ts

 import type { Adapter } from './types';
 export declare const setAdapter: (newAdapter: Adapter) => void;
 export declare const appendCss: Adapter['appendCss'];
+export declare const registerClassName: Adapter['registerClassName'];
+export declare const getRegisteredClassNames: Adapter['getRegisteredClassNames'];

dist/declarations/src/api.d.ts

 import type { StyleRule } from './types';
 declare type MapLeafNodes<Obj, LeafType> = {
-    [Prop in keyof Obj]: Obj[Prop] extends object ? MapLeafNodes<Obj[Prop], LeafType> : LeafType;
+    [Prop in keyof Obj]: Obj[Prop] extends Record<string | number, any> ? MapLeafNodes<Obj[Prop], LeafType> : LeafType;
 };
 export declare function setFileScope(newFileScope: string): void;
+export declare function endFileScope(): void;
 export declare function createVar(debugId?: string): string;
@@ -11,8 +12,8 @@ export declare function style(rule: StyleRule, debugId?: string): string;
 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 createGlobalTheme<ThemeContract>(selector: string, themeContract: ThemeContract, tokens: MapLeafNodes<ThemeContract, string | number>): 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): {
+export declare function createTheme<ThemeContract>(themeContract: ThemeContract, tokens: MapLeafNodes<ThemeContract, string | number>, debugId?: string): string;
+export declare function createInlineTheme<ThemeContract>(themeVars: ThemeContract, tokens: MapLeafNodes<ThemeContract, string | number>): {
     [cssVarName: string]: string;
 };
 export {};

dist/declarations/src/types.d.ts

@@ -1,4 +0,4 @@
-import type { Properties } from 'csstype';
+import type { PropertiesFallback } from 'csstype';
 import type { SimplePseudos } from './transformCSS';
-declare type BasicCSSProperties = Properties<string | number>;
+declare type BasicCSSProperties = PropertiesFallback<string | number>;
 export interface CSSKeyframes {
@@ -40,3 +40,5 @@ [time: string]: BasicCSSProperties;
     appendCss: (css: CSS, fileScope: string) => void;
+    registerClassName: (className: string) => void;
+    getRegisteredClassNames: () => Array<string>;
 }
 export {};

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

@@ -5,3 +5,3 @@ 'use strict';
 
-var generateCss_dist_mattsjonesCssCoreGenerateCss = require('./generateCss-97f38441.browser.cjs.js');
+var generateCss_dist_mattsjonesCssCoreGenerateCss = require('./generateCss-d17b074f.browser.cjs.js');
 var adapter_dist_mattsjonesCssCoreAdapter = require('../adapter/dist/mattsjones-css-core-adapter.browser.cjs.js');
@@ -15,3 +15,5 @@ var hash = require('@emotion/hash');
 require('lodash/isEqual');
-require('lodash');
+require('lodash/mapKeys');
+require('css-selector-parser');
+require('dedent');
 
@@ -24,2 +26,3 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 let styleSheet;
+const localClassNames = new Set();
 
@@ -46,18 +49,42 @@ function getStylesheet() {
     }
-  }
+  },
+  registerClassName: className => {
+    localClassNames.add(className);
+  },
+  getRegisteredClassNames: () => Array.from(localClassNames)
 };
 
 let refCounter = 0;
-let fileScope = 'DEFAULT_FILE_SCOPE';
+const defaultFileScope = 'DEFAULT_FILE_SCOPE';
+const fileScopes = [defaultFileScope];
 function setFileScope(newFileScope) {
   refCounter = 0;
-  fileScope = newFileScope;
+  fileScopes.unshift(newFileScope);
 }
+function endFileScope() {
+  refCounter = 0;
+  fileScopes.splice(0, 1);
+}
 
-const createFileScopeId = debugId => {
-  if (process.env.NODE_ENV !== 'production' && debugId) {
-    return `${debugId}__${hash__default['default'](fileScope)}${refCounter++}`;
+function getFileScope() {
+  return fileScopes[0];
+}
+
+function getShortFileName() {
+  const fileScope = getFileScope();
+
+  if (fileScope !== defaultFileScope) {
+    const matches = fileScope.match(/.*\/(.*)\..*\..*$/);
+
+    if (matches && matches[1]) {
+      return matches[1];
+    }
   }
 
-  return `${hash__default['default'](fileScope)}${refCounter++}`;
+  return '';
+}
+
+const generateClassName = debugId => {
+  const className = process.env.NODE_ENV !== 'production' && debugId ? `${getShortFileName()}_${debugId}__${hash__default['default'](getFileScope())}${refCounter++}` : `${hash__default['default'](getFileScope())}${refCounter++}`;
+  return generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(className);
 };
@@ -86,14 +113,16 @@
 function createVar(debugId) {
-  // Dashify CSS var names to replicate postcss-js behaviour
+  const varName = process.env.NODE_ENV !== 'production' && debugId ? `${debugId}__${hash__default['default'](getFileScope())}${refCounter++}` : `${hash__default['default'](getFileScope())}${refCounter++}`; // Dashify CSS var names to replicate postcss-js behaviour
   // See https://github.com/postcss/postcss-js/blob/d5127d4278c133f333f1c66f990f3552a907128e/parser.js#L30
-  const cssVarName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeId(debugId)).replace(/([A-Z])/g, '-$1').toLowerCase();
+
+  const cssVarName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(varName).replace(/([A-Z])/g, '-$1').toLowerCase();
   return `var(--${cssVarName})`;
 }
 function style(rule, debugId) {
-  const styleRuleName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeId(debugId));
+  const className = generateClassName(debugId);
+  adapter_dist_mattsjonesCssCoreAdapter.registerClassName(className);
   adapter_dist_mattsjonesCssCoreAdapter.appendCss({
-    selector: `.${styleRuleName}`,
+    selector: className,
     rule
-  }, fileScope);
-  return styleRuleName;
+  }, getFileScope());
+  return className;
 }
@@ -119,7 +148,7 @@ function createThemeVars(themeContract) {
   adapter_dist_mattsjonesCssCoreAdapter.appendCss({
-    selector,
+    selector: selector,
     rule: {
       vars: varSetters
     }
-  }, fileScope);
+  }, getFileScope());
 
@@ -131,4 +160,5 @@ if (shouldCreateVars) {
 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);
+  const themeClassName = generateClassName(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;
@@ -165,3 +195,4 @@ }
 exports.createVar = createVar;
+exports.endFileScope = endFileScope;
 exports.setFileScope = setFileScope;
 exports.style = style;

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

@@ -1,3 +0,3 @@
-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 { g as generateCss, s as sanitiseIdent } from './generateCss-e637d1b8.browser.esm.js';
+import { registerClassName, appendCss, setAdapter } from '../adapter/dist/mattsjones-css-core-adapter.browser.esm.js';
 import hash from '@emotion/hash';
@@ -10,5 +10,8 @@ import get from 'lodash/get';
 import 'lodash/isEqual';
-import 'lodash';
+import 'lodash/mapKeys';
+import 'css-selector-parser';
+import 'dedent';
 
 let styleSheet;
+const localClassNames = new Set();
 
@@ -35,18 +38,42 @@ function getStylesheet() {
     }
-  }
+  },
+  registerClassName: className => {
+    localClassNames.add(className);
+  },
+  getRegisteredClassNames: () => Array.from(localClassNames)
 };
 
 let refCounter = 0;
-let fileScope = 'DEFAULT_FILE_SCOPE';
+const defaultFileScope = 'DEFAULT_FILE_SCOPE';
+const fileScopes = [defaultFileScope];
 function setFileScope(newFileScope) {
   refCounter = 0;
-  fileScope = newFileScope;
+  fileScopes.unshift(newFileScope);
 }
+function endFileScope() {
+  refCounter = 0;
+  fileScopes.splice(0, 1);
+}
 
-const createFileScopeId = debugId => {
-  if (process.env.NODE_ENV !== 'production' && debugId) {
-    return `${debugId}__${hash(fileScope)}${refCounter++}`;
+function getFileScope() {
+  return fileScopes[0];
+}
+
+function getShortFileName() {
+  const fileScope = getFileScope();
+
+  if (fileScope !== defaultFileScope) {
+    const matches = fileScope.match(/.*\/(.*)\..*\..*$/);
+
+    if (matches && matches[1]) {
+      return matches[1];
+    }
   }
 
-  return `${hash(fileScope)}${refCounter++}`;
+  return '';
+}
+
+const generateClassName = debugId => {
+  const className = process.env.NODE_ENV !== 'production' && debugId ? `${getShortFileName()}_${debugId}__${hash(getFileScope())}${refCounter++}` : `${hash(getFileScope())}${refCounter++}`;
+  return sanitiseIdent(className);
 };
@@ -75,14 +102,16 @@
 function createVar(debugId) {
-  // Dashify CSS var names to replicate postcss-js behaviour
+  const varName = process.env.NODE_ENV !== 'production' && debugId ? `${debugId}__${hash(getFileScope())}${refCounter++}` : `${hash(getFileScope())}${refCounter++}`; // Dashify CSS var names to replicate postcss-js behaviour
   // See https://github.com/postcss/postcss-js/blob/d5127d4278c133f333f1c66f990f3552a907128e/parser.js#L30
-  const cssVarName = sanitiseIdent(createFileScopeId(debugId)).replace(/([A-Z])/g, '-$1').toLowerCase();
+
+  const cssVarName = sanitiseIdent(varName).replace(/([A-Z])/g, '-$1').toLowerCase();
   return `var(--${cssVarName})`;
 }
 function style(rule, debugId) {
-  const styleRuleName = sanitiseIdent(createFileScopeId(debugId));
+  const className = generateClassName(debugId);
+  registerClassName(className);
   appendCss({
-    selector: `.${styleRuleName}`,
+    selector: className,
     rule
-  }, fileScope);
-  return styleRuleName;
+  }, getFileScope());
+  return className;
 }
@@ -108,7 +137,7 @@ function createThemeVars(themeContract) {
   appendCss({
-    selector,
+    selector: selector,
     rule: {
       vars: varSetters
     }
-  }, fileScope);
+  }, getFileScope());
 
@@ -120,4 +149,5 @@ if (shouldCreateVars) {
 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);
+  const themeClassName = generateClassName(typeof arg2 === 'object' ? arg3 : arg2);
+  registerClassName(themeClassName);
+  const vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
   return vars ? [themeClassName, vars] : themeClassName;
@@ -149,2 +179,2 @@ }
 
-export { createGlobalTheme, createInlineTheme, createTheme, createThemeVars, createVar, setFileScope, style };
+export { createGlobalTheme, createInlineTheme, createTheme, createThemeVars, createVar, endFileScope, setFileScope, style };

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

@@ -5,3 +5,3 @@ 'use strict';
 
-var generateCss_dist_mattsjonesCssCoreGenerateCss = require('./generateCss-2023ead3.cjs.dev.js');
+var generateCss_dist_mattsjonesCssCoreGenerateCss = require('./generateCss-2815bb5c.cjs.dev.js');
 var adapter_dist_mattsjonesCssCoreAdapter = require('../adapter/dist/mattsjones-css-core-adapter.cjs.dev.js');
@@ -15,3 +15,5 @@ var hash = require('@emotion/hash');
 require('lodash/isEqual');
-require('lodash');
+require('lodash/mapKeys');
+require('css-selector-parser');
+require('dedent');
 
@@ -24,2 +26,3 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 let styleSheet;
+const localClassNames = new Set();
 
@@ -46,18 +49,42 @@ function getStylesheet() {
     }
-  }
+  },
+  registerClassName: className => {
+    localClassNames.add(className);
+  },
+  getRegisteredClassNames: () => Array.from(localClassNames)
 };
 
 let refCounter = 0;
-let fileScope = 'DEFAULT_FILE_SCOPE';
+const defaultFileScope = 'DEFAULT_FILE_SCOPE';
+const fileScopes = [defaultFileScope];
 function setFileScope(newFileScope) {
   refCounter = 0;
-  fileScope = newFileScope;
+  fileScopes.unshift(newFileScope);
 }
+function endFileScope() {
+  refCounter = 0;
+  fileScopes.splice(0, 1);
+}
 
-const createFileScopeId = debugId => {
-  if (process.env.NODE_ENV !== 'production' && debugId) {
-    return `${debugId}__${hash__default['default'](fileScope)}${refCounter++}`;
+function getFileScope() {
+  return fileScopes[0];
+}
+
+function getShortFileName() {
+  const fileScope = getFileScope();
+
+  if (fileScope !== defaultFileScope) {
+    const matches = fileScope.match(/.*\/(.*)\..*\..*$/);
+
+    if (matches && matches[1]) {
+      return matches[1];
+    }
   }
 
-  return `${hash__default['default'](fileScope)}${refCounter++}`;
+  return '';
+}
+
+const generateClassName = debugId => {
+  const className = process.env.NODE_ENV !== 'production' && debugId ? `${getShortFileName()}_${debugId}__${hash__default['default'](getFileScope())}${refCounter++}` : `${hash__default['default'](getFileScope())}${refCounter++}`;
+  return generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(className);
 };
@@ -86,14 +113,16 @@
 function createVar(debugId) {
-  // Dashify CSS var names to replicate postcss-js behaviour
+  const varName = process.env.NODE_ENV !== 'production' && debugId ? `${debugId}__${hash__default['default'](getFileScope())}${refCounter++}` : `${hash__default['default'](getFileScope())}${refCounter++}`; // Dashify CSS var names to replicate postcss-js behaviour
   // See https://github.com/postcss/postcss-js/blob/d5127d4278c133f333f1c66f990f3552a907128e/parser.js#L30
-  const cssVarName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeId(debugId)).replace(/([A-Z])/g, '-$1').toLowerCase();
+
+  const cssVarName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(varName).replace(/([A-Z])/g, '-$1').toLowerCase();
   return `var(--${cssVarName})`;
 }
 function style(rule, debugId) {
-  const styleRuleName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeId(debugId));
+  const className = generateClassName(debugId);
+  adapter_dist_mattsjonesCssCoreAdapter.registerClassName(className);
   adapter_dist_mattsjonesCssCoreAdapter.appendCss({
-    selector: `.${styleRuleName}`,
+    selector: className,
     rule
-  }, fileScope);
-  return styleRuleName;
+  }, getFileScope());
+  return className;
 }
@@ -119,7 +148,7 @@ function createThemeVars(themeContract) {
   adapter_dist_mattsjonesCssCoreAdapter.appendCss({
-    selector,
+    selector: selector,
     rule: {
       vars: varSetters
     }
-  }, fileScope);
+  }, getFileScope());
 
@@ -131,4 +160,5 @@ if (shouldCreateVars) {
 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);
+  const themeClassName = generateClassName(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;
@@ -165,3 +195,4 @@ }
 exports.createVar = createVar;
+exports.endFileScope = endFileScope;
 exports.setFileScope = setFileScope;
 exports.style = style;

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

@@ -5,3 +5,3 @@ 'use strict';
 
-var generateCss_dist_mattsjonesCssCoreGenerateCss = require('./generateCss-a4e6453b.cjs.prod.js');
+var generateCss_dist_mattsjonesCssCoreGenerateCss = require('./generateCss-df5d010f.cjs.prod.js');
 var adapter_dist_mattsjonesCssCoreAdapter = require('../adapter/dist/mattsjones-css-core-adapter.cjs.prod.js');
@@ -15,3 +15,5 @@ var hash = require('@emotion/hash');
 require('lodash/isEqual');
-require('lodash');
+require('lodash/mapKeys');
+require('css-selector-parser');
+require('dedent');
 
@@ -24,2 +26,3 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 let styleSheet;
+const localClassNames = new Set();
 
@@ -46,15 +49,28 @@ function getStylesheet() {
     }
-  }
+  },
+  registerClassName: className => {
+    localClassNames.add(className);
+  },
+  getRegisteredClassNames: () => Array.from(localClassNames)
 };
 
 let refCounter = 0;
-let fileScope = 'DEFAULT_FILE_SCOPE';
+const defaultFileScope = 'DEFAULT_FILE_SCOPE';
+const fileScopes = [defaultFileScope];
 function setFileScope(newFileScope) {
   refCounter = 0;
-  fileScope = newFileScope;
+  fileScopes.unshift(newFileScope);
 }
+function endFileScope() {
+  refCounter = 0;
+  fileScopes.splice(0, 1);
+}
 
-const createFileScopeId = debugId => {
+function getFileScope() {
+  return fileScopes[0];
+}
 
-  return `${hash__default['default'](fileScope)}${refCounter++}`;
+const generateClassName = debugId => {
+  const className = `${hash__default['default'](getFileScope())}${refCounter++}`;
+  return generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(className);
 };
@@ -83,14 +99,16 @@
 function createVar(debugId) {
-  // Dashify CSS var names to replicate postcss-js behaviour
+  const varName = `${hash__default['default'](getFileScope())}${refCounter++}`; // Dashify CSS var names to replicate postcss-js behaviour
   // See https://github.com/postcss/postcss-js/blob/d5127d4278c133f333f1c66f990f3552a907128e/parser.js#L30
-  const cssVarName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeId()).replace(/([A-Z])/g, '-$1').toLowerCase();
+
+  const cssVarName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(varName).replace(/([A-Z])/g, '-$1').toLowerCase();
   return `var(--${cssVarName})`;
 }
 function style(rule, debugId) {
-  const styleRuleName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeId());
+  const className = generateClassName();
+  adapter_dist_mattsjonesCssCoreAdapter.registerClassName(className);
   adapter_dist_mattsjonesCssCoreAdapter.appendCss({
-    selector: `.${styleRuleName}`,
+    selector: className,
     rule
-  }, fileScope);
-  return styleRuleName;
+  }, getFileScope());
+  return className;
 }
@@ -116,7 +134,7 @@ function createThemeVars(themeContract) {
   adapter_dist_mattsjonesCssCoreAdapter.appendCss({
-    selector,
+    selector: selector,
     rule: {
       vars: varSetters
     }
-  }, fileScope);
+  }, getFileScope());
 
@@ -128,4 +146,5 @@ if (shouldCreateVars) {
 function createTheme(arg1, arg2, arg3) {
-  const themeClassName = generateCss_dist_mattsjonesCssCoreGenerateCss.sanitiseIdent(createFileScopeId());
-  const vars = typeof arg2 === 'object' ? createGlobalTheme(`.${themeClassName}`, arg1, arg2) : createGlobalTheme(`.${themeClassName}`, arg1);
+  const themeClassName = generateClassName();
+  adapter_dist_mattsjonesCssCoreAdapter.registerClassName(themeClassName);
+  const vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
   return vars ? [themeClassName, vars] : themeClassName;
@@ -162,3 +181,4 @@ }
 exports.createVar = createVar;
+exports.endFileScope = endFileScope;
 exports.setFileScope = setFileScope;
 exports.style = style;

dist/mattsjones-css-core.esm.js

@@ -1,3 +0,3 @@
-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 { g as generateCss, s as sanitiseIdent } from './generateCss-0e810b9b.esm.js';
+import { registerClassName, appendCss, setAdapter } from '../adapter/dist/mattsjones-css-core-adapter.esm.js';
 import hash from '@emotion/hash';
@@ -10,5 +10,8 @@ import get from 'lodash/get';
 import 'lodash/isEqual';
-import 'lodash';
+import 'lodash/mapKeys';
+import 'css-selector-parser';
+import 'dedent';
 
 let styleSheet;
+const localClassNames = new Set();
 
@@ -35,18 +38,42 @@ function getStylesheet() {
     }
-  }
+  },
+  registerClassName: className => {
+    localClassNames.add(className);
+  },
+  getRegisteredClassNames: () => Array.from(localClassNames)
 };
 
 let refCounter = 0;
-let fileScope = 'DEFAULT_FILE_SCOPE';
+const defaultFileScope = 'DEFAULT_FILE_SCOPE';
+const fileScopes = [defaultFileScope];
 function setFileScope(newFileScope) {
   refCounter = 0;
-  fileScope = newFileScope;
+  fileScopes.unshift(newFileScope);
 }
+function endFileScope() {
+  refCounter = 0;
+  fileScopes.splice(0, 1);
+}
 
-const createFileScopeId = debugId => {
-  if (process.env.NODE_ENV !== 'production' && debugId) {
-    return `${debugId}__${hash(fileScope)}${refCounter++}`;
+function getFileScope() {
+  return fileScopes[0];
+}
+
+function getShortFileName() {
+  const fileScope = getFileScope();
+
+  if (fileScope !== defaultFileScope) {
+    const matches = fileScope.match(/.*\/(.*)\..*\..*$/);
+
+    if (matches && matches[1]) {
+      return matches[1];
+    }
   }
 
-  return `${hash(fileScope)}${refCounter++}`;
+  return '';
+}
+
+const generateClassName = debugId => {
+  const className = process.env.NODE_ENV !== 'production' && debugId ? `${getShortFileName()}_${debugId}__${hash(getFileScope())}${refCounter++}` : `${hash(getFileScope())}${refCounter++}`;
+  return sanitiseIdent(className);
 };
@@ -75,14 +102,16 @@
 function createVar(debugId) {
-  // Dashify CSS var names to replicate postcss-js behaviour
+  const varName = process.env.NODE_ENV !== 'production' && debugId ? `${debugId}__${hash(getFileScope())}${refCounter++}` : `${hash(getFileScope())}${refCounter++}`; // Dashify CSS var names to replicate postcss-js behaviour
   // See https://github.com/postcss/postcss-js/blob/d5127d4278c133f333f1c66f990f3552a907128e/parser.js#L30
-  const cssVarName = sanitiseIdent(createFileScopeId(debugId)).replace(/([A-Z])/g, '-$1').toLowerCase();
+
+  const cssVarName = sanitiseIdent(varName).replace(/([A-Z])/g, '-$1').toLowerCase();
   return `var(--${cssVarName})`;
 }
 function style(rule, debugId) {
-  const styleRuleName = sanitiseIdent(createFileScopeId(debugId));
+  const className = generateClassName(debugId);
+  registerClassName(className);
   appendCss({
-    selector: `.${styleRuleName}`,
+    selector: className,
     rule
-  }, fileScope);
-  return styleRuleName;
+  }, getFileScope());
+  return className;
 }
@@ -108,7 +137,7 @@ function createThemeVars(themeContract) {
   appendCss({
-    selector,
+    selector: selector,
     rule: {
       vars: varSetters
     }
-  }, fileScope);
+  }, getFileScope());
 
@@ -120,4 +149,5 @@ if (shouldCreateVars) {
 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);
+  const themeClassName = generateClassName(typeof arg2 === 'object' ? arg3 : arg2);
+  registerClassName(themeClassName);
+  const vars = typeof arg2 === 'object' ? createGlobalTheme(themeClassName, arg1, arg2) : createGlobalTheme(themeClassName, arg1);
   return vars ? [themeClassName, vars] : themeClassName;
@@ -149,2 +179,2 @@ }
 
-export { createGlobalTheme, createInlineTheme, createTheme, createThemeVars, createVar, setFileScope, style };
+export { createGlobalTheme, createInlineTheme, createTheme, createThemeVars, createVar, endFileScope, 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-97f38441.browser.cjs.js');
+var generateCss_dist_mattsjonesCssCoreGenerateCss = require('../../dist/generateCss-d17b074f.browser.cjs.js');
 require('@emotion/hash');
@@ -13,3 +13,6 @@ require('lodash/each');
 require('lodash/isEqual');
-require('lodash');
+require('lodash/mapKeys');
+require('css-selector-parser');
+require('dedent');
+require('../../adapter/dist/mattsjones-css-core-adapter.browser.cjs.js');
 
@@ -16,0 +19,0 @@

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

 import 'postcss-js';
 import 'postcss';
-export { g as generateCss } from '../../dist/generateCss-8fd46c7f.browser.esm.js';
+export { g as generateCss } from '../../dist/generateCss-e637d1b8.browser.esm.js';
 import '@emotion/hash';
@@ -8,2 +8,5 @@ import 'lodash/each';
 import 'lodash/isEqual';
-import 'lodash';
+import 'lodash/mapKeys';
+import 'css-selector-parser';
+import 'dedent';
+import '../../adapter/dist/mattsjones-css-core-adapter.browser.esm.js';

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

@@ -7,3 +7,3 @@ 'use strict';
 require('postcss');
-var generateCss_dist_mattsjonesCssCoreGenerateCss = require('../../dist/generateCss-2023ead3.cjs.dev.js');
+var generateCss_dist_mattsjonesCssCoreGenerateCss = require('../../dist/generateCss-2815bb5c.cjs.dev.js');
 require('@emotion/hash');
@@ -13,3 +13,6 @@ require('lodash/each');
 require('lodash/isEqual');
-require('lodash');
+require('lodash/mapKeys');
+require('css-selector-parser');
+require('dedent');
+require('../../adapter/dist/mattsjones-css-core-adapter.cjs.dev.js');
 
@@ -16,0 +19,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-a4e6453b.cjs.prod.js');
+var generateCss_dist_mattsjonesCssCoreGenerateCss = require('../../dist/generateCss-df5d010f.cjs.prod.js');
 require('@emotion/hash');
@@ -13,3 +13,6 @@ require('lodash/each');
 require('lodash/isEqual');
-require('lodash');
+require('lodash/mapKeys');
+require('css-selector-parser');
+require('dedent');
+require('../../adapter/dist/mattsjones-css-core-adapter.cjs.prod.js');
 
@@ -16,0 +19,0 @@

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

 import 'postcss-js';
 import 'postcss';
-export { g as generateCss } from '../../dist/generateCss-7fbb5c05.esm.js';
+export { g as generateCss } from '../../dist/generateCss-0e810b9b.esm.js';
 import '@emotion/hash';
@@ -8,2 +8,5 @@ import 'lodash/each';
 import 'lodash/isEqual';
-import 'lodash';
+import 'lodash/mapKeys';
+import 'css-selector-parser';
+import 'dedent';
+import '../../adapter/dist/mattsjones-css-core-adapter.esm.js';

package.json

 {
   "name": "@mattsjones/css-core",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "main": "dist/mattsjones-css-core.cjs.js",
@@ -26,2 +26,3 @@ "module": "dist/mattsjones-css-core.esm.js",
     "@emotion/hash": "^0.8.0",
+    "css-selector-parser": "^1.4.1",
     "csstype": "^3.0.7",
@@ -28,0 +29,0 @@ "dedent": "^0.7.0",

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

Improved metrics

Total package byte prevSize

92270

increased by29.92%

Number of package files

38

increased by2.7%

Lines of code

2232

increased by25.89%

Worsened metrics

Dependency count

7

increased by16.67%

Number of low supply chain risk alerts

12

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedcss-selector-parser@^1.4.1

• + Addedcss-selector-parser@1.4.1(transitive)