@elementor/editor-styles-repository 0.1.1 → 0.3.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-styles-repository@0.1.1 build
+> @elementor/editor-styles-repository@0.3.0 build
 > tsup --config=../../tsup.build.ts
 
 CLI Building entry: src/index.ts
@@ -10,13 +10,13 @@
 CLI Cleaning output folder
 ESM Build start
 CJS Build start
-ESM dist/index.mjs     1.62 KB
-ESM dist/index.mjs.map 3.55 KB
-ESM ⚡️ Build success in 75ms
-CJS dist/index.js     2.74 KB
-CJS dist/index.js.map 3.59 KB
-CJS ⚡️ Build success in 76ms
+ESM dist/index.mjs     2.22 KB
+ESM dist/index.mjs.map 5.02 KB
+ESM ⚡️ Build success in 55ms
+CJS dist/index.js     3.50 KB
+CJS dist/index.js.map 5.07 KB
+CJS ⚡️ Build success in 56ms
 DTS Build start
-DTS ⚡️ Build success in 9578ms
-DTS dist/index.d.mts 519.00 B
-DTS dist/index.d.ts  519.00 B
+DTS ⚡️ Build success in 4336ms
+DTS dist/index.d.mts 990.00 B
+DTS dist/index.d.ts  990.00 B

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @elementor/editor-styles-repository
 
+## 0.3.0
+
+### Minor Changes
+
+- ed4260a: Introduce global classes styles provider and store
+
+## 0.2.0
+
+### Minor Changes
+
+- 6f2b17f: Introduce empty (local) style def for class selector.
+
+### Patch Changes
+
+- Updated dependencies [6f2b17f]
+  - @elementor/editor-elements@0.3.3
+  - @elementor/editor-styles@0.3.2
+
 ## 0.1.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,15 +1,23 @@
 import * as _elementor_editor_styles from '@elementor/editor-styles';
-import { StyleDefinitionsMap } from '@elementor/editor-styles';
+import { StyleDefinition } from '@elementor/editor-styles';
 
+type StyleProviderMeta = Record<string, unknown>;
 type StylesProvider = {
-    get: () => StyleDefinitionsMap;
+    key: string;
+    priority: number;
+    get: (meta?: StyleProviderMeta) => StyleDefinition[];
     subscribe: (callback: () => void) => () => void;
 };
 
 declare const stylesRepository: {
-    registerProvider: (key: string, provider: StylesProvider) => void;
-    all: () => _elementor_editor_styles.StyleDefinitionsMap;
+    all: (meta?: StyleProviderMeta) => _elementor_editor_styles.StyleDefinition[];
+    allByProvider: (meta?: StyleProviderMeta) => (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
+    register: (provider: StylesProvider) => void;
     subscribe: (cb: () => void) => () => void;
 };
 
-export { type StylesProvider, stylesRepository };
+declare function useAllStylesByProvider(meta?: StyleProviderMeta): (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
+
+declare const ELEMENTS_STYLES_PROVIDER_KEY = "elements";
+
+export { ELEMENTS_STYLES_PROVIDER_KEY, type StylesProvider, stylesRepository, useAllStylesByProvider };

package/dist/index.d.ts

@@ -1,15 +1,23 @@
 import * as _elementor_editor_styles from '@elementor/editor-styles';
-import { StyleDefinitionsMap } from '@elementor/editor-styles';
+import { StyleDefinition } from '@elementor/editor-styles';
 
+type StyleProviderMeta = Record<string, unknown>;
 type StylesProvider = {
-    get: () => StyleDefinitionsMap;
+    key: string;
+    priority: number;
+    get: (meta?: StyleProviderMeta) => StyleDefinition[];
     subscribe: (callback: () => void) => () => void;
 };
 
 declare const stylesRepository: {
-    registerProvider: (key: string, provider: StylesProvider) => void;
-    all: () => _elementor_editor_styles.StyleDefinitionsMap;
+    all: (meta?: StyleProviderMeta) => _elementor_editor_styles.StyleDefinition[];
+    allByProvider: (meta?: StyleProviderMeta) => (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
+    register: (provider: StylesProvider) => void;
     subscribe: (cb: () => void) => () => void;
 };
 
-export { type StylesProvider, stylesRepository };
+declare function useAllStylesByProvider(meta?: StyleProviderMeta): (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
+
+declare const ELEMENTS_STYLES_PROVIDER_KEY = "elements";
+
+export { ELEMENTS_STYLES_PROVIDER_KEY, type StylesProvider, stylesRepository, useAllStylesByProvider };

package/dist/index.js

@@ -18,26 +18,31 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  stylesRepository: () => stylesRepository
+var index_exports = {};
+__export(index_exports, {
+  ELEMENTS_STYLES_PROVIDER_KEY: () => ELEMENTS_STYLES_PROVIDER_KEY,
+  stylesRepository: () => stylesRepository,
+  useAllStylesByProvider: () => useAllStylesByProvider
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/utils/create-styles-repository.ts
 var createStylesRepository = () => {
-  const providers = /* @__PURE__ */ new Map();
-  const registerProvider = (key, provider) => {
-    providers.set(key, provider);
+  const providers = [];
+  const getProvidersByPriority = () => {
+    return providers.slice(0).sort((a, b) => a.priority > b.priority ? -1 : 1);
   };
-  const all = () => {
-    return Array.from(providers.values()).reduce((acc, provider) => {
-      const styles = provider.get();
-      return { ...acc, ...styles };
-    }, {});
+  const register = (provider) => {
+    providers.push(provider);
+  };
+  const allByProvider = (meta = {}) => {
+    return getProvidersByPriority().map((provider) => [provider.key, provider.get(meta)]);
+  };
+  const all = (meta = {}) => {
+    return getProvidersByPriority().flatMap((provider) => provider.get(meta));
   };
   const subscribe = (cb) => {
-    const unsubscribes = Array.from(providers.values()).map((provider) => {
+    const unsubscribes = providers.map((provider) => {
       return provider.subscribe(cb);
     });
     return () => {
@@ -45,8 +50,9 @@ var createStylesRepository = () => {
     };
   };
   return {
-    registerProvider,
     all,
+    allByProvider,
+    register,
     subscribe
   };
 };
@@ -54,17 +60,27 @@ var createStylesRepository = () => {
 // src/styles-repository.ts
 var stylesRepository = createStylesRepository();
 
+// src/hooks/use-all-styles-by-provider.ts
+var import_react = require("react");
+function useAllStylesByProvider(meta = {}) {
+  const [, rerender] = (0, import_react.useReducer)((prev) => !prev, false);
+  (0, import_react.useEffect)(() => stylesRepository.subscribe(rerender), []);
+  return stylesRepository.allByProvider(meta);
+}
+
 // src/elements-styles-provider.ts
 var import_editor_elements = require("@elementor/editor-elements");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var ELEMENTS_STYLES_PROVIDER_KEY = "elements";
 var elementsStylesProvider = {
-  get: () => {
-    const elements = (0, import_editor_elements.getElements)();
-    const entries = elements.flatMap((element) => {
-      const styles = element.model.get("styles");
-      return styles ? Object.entries(styles) : [];
-    });
-    return Object.fromEntries(entries);
+  key: ELEMENTS_STYLES_PROVIDER_KEY,
+  priority: 50,
+  get: (meta = {}) => {
+    let elements = (0, import_editor_elements.getElements)();
+    if ("elementId" in meta && meta.elementId) {
+      elements = elements.filter((element) => element.id === meta.elementId);
+    }
+    return elements.flatMap((element) => Object.values(element.model.get("styles") ?? {}));
   },
   subscribe: (cb) => {
     return (0, import_editor_v1_adapters.__privateListenTo)(
@@ -79,13 +95,15 @@ var elementsStylesProvider = {
 
 // src/init.ts
 function init() {
-  stylesRepository.registerProvider("elements", elementsStylesProvider);
+  stylesRepository.register(elementsStylesProvider);
 }
 
 // src/index.ts
 init();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  stylesRepository
+  ELEMENTS_STYLES_PROVIDER_KEY,
+  stylesRepository,
+  useAllStylesByProvider
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/elements-styles-provider.ts","../src/init.ts"],"sourcesContent":["export { type StylesProvider } from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\n\nimport { init } from './init';\n\ninit();\n","import { type StyleDefinitionsMap } from '@elementor/editor-styles';\n\nexport type StylesProvider = {\n\tget: () => StyleDefinitionsMap;\n\tsubscribe: ( callback: () => void ) => () => void;\n};\n\nexport const createStylesRepository = () => {\n\tconst providers = new Map< string, StylesProvider >();\n\n\tconst registerProvider = ( key: string, provider: StylesProvider ) => {\n\t\tproviders.set( key, provider );\n\t};\n\n\tconst all = () => {\n\t\treturn Array.from( providers.values() ).reduce< StyleDefinitionsMap >( ( acc, provider ) => {\n\t\t\tconst styles = provider.get();\n\n\t\t\treturn { ...acc, ...styles };\n\t\t}, {} );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = Array.from( providers.values() ).map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\treturn {\n\t\tregisterProvider,\n\t\tall,\n\t\tsubscribe,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\n","import { getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const elementsStylesProvider: StylesProvider = {\n\tget: () => {\n\t\tconst elements = getElements();\n\n\t\tconst entries = elements.flatMap( ( element ) => {\n\t\t\tconst styles = element.model.get( 'styles' );\n\n\t\t\treturn styles ? Object.entries( styles ) : [];\n\t\t} );\n\n\t\treturn Object.fromEntries( entries );\n\t},\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo(\n\t\t\t[\n\t\t\t\tcommandEndEvent( 'editor/documents/attach-preview' ),\n\t\t\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t\t],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.registerProvider( 'elements', elementsStylesProvider );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACOO,IAAM,yBAAyB,MAAM;AAC3C,QAAM,YAAY,oBAAI,IAA8B;AAEpD,QAAM,mBAAmB,CAAE,KAAa,aAA8B;AACrE,cAAU,IAAK,KAAK,QAAS;AAAA,EAC9B;AAEA,QAAM,MAAM,MAAM;AACjB,WAAO,MAAM,KAAM,UAAU,OAAO,CAAE,EAAE,OAA+B,CAAE,KAAK,aAAc;AAC3F,YAAM,SAAS,SAAS,IAAI;AAE5B,aAAO,EAAE,GAAG,KAAK,GAAG,OAAO;AAAA,IAC5B,GAAG,CAAC,CAAE;AAAA,EACP;AAEA,QAAM,YAAY,CAAE,OAAoB;AACvC,UAAM,eAAe,MAAM,KAAM,UAAU,OAAO,CAAE,EAAE,IAAK,CAAE,aAAc;AAC1E,aAAO,SAAS,UAAW,EAAG;AAAA,IAC/B,CAAE;AAEF,WAAO,MAAM;AACZ,mBAAa,QAAS,CAAE,gBAAiB,YAAY,CAAE;AAAA,IACxD;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;ACnCO,IAAM,mBAAmB,uBAAuB;;;ACFvD,6BAA4B;AAC5B,gCAA+D;AAIxD,IAAM,yBAAyC;AAAA,EACrD,KAAK,MAAM;AACV,UAAM,eAAW,oCAAY;AAE7B,UAAM,UAAU,SAAS,QAAS,CAAE,YAAa;AAChD,YAAM,SAAS,QAAQ,MAAM,IAAK,QAAS;AAE3C,aAAO,SAAS,OAAO,QAAS,MAAO,IAAI,CAAC;AAAA,IAC7C,CAAE;AAEF,WAAO,OAAO,YAAa,OAAQ;AAAA,EACpC;AAAA,EACA,WAAW,CAAE,OAAQ;AACpB,eAAO,0BAAAA;AAAA,MACN;AAAA,YACC,2CAAiB,iCAAkC;AAAA,YACnD,2CAAiB,gCAAiC;AAAA,MACnD;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;;;ACvBO,SAAS,OAAO;AACtB,mBAAiB,iBAAkB,YAAY,sBAAuB;AACvE;;;AJCA,KAAK;","names":["listenTo"]}
+{"version":3,"sources":["../src/index.ts","../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-all-styles-by-provider.ts","../src/elements-styles-provider.ts","../src/init.ts"],"sourcesContent":["export { type StylesProvider } from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n","import { type StyleDefinition } from '@elementor/editor-styles';\n\nexport type StyleProviderMeta = Record< string, unknown >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tget: ( meta?: StyleProviderMeta ) => StyleDefinition[];\n\tsubscribe: ( callback: () => void ) => () => void;\n};\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProvidersByPriority = () => {\n\t\treturn providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );\n\t};\n\n\tconst register = ( provider: StylesProvider ) => {\n\t\tproviders.push( provider );\n\t};\n\n\tconst allByProvider = ( meta: StyleProviderMeta = {} ) => {\n\t\treturn getProvidersByPriority().map( ( provider ) => [ provider.key, provider.get( meta ) ] as const );\n\t};\n\n\tconst all = ( meta: StyleProviderMeta = {} ) => {\n\t\treturn getProvidersByPriority().flatMap( ( provider ) => provider.get( meta ) );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = providers.map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\treturn {\n\t\tall,\n\t\tallByProvider,\n\t\tregister,\n\t\tsubscribe,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\n","import { useEffect, useReducer } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StyleProviderMeta } from '../utils/create-styles-repository';\n\nexport function useAllStylesByProvider( meta: StyleProviderMeta = {} ) {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.allByProvider( meta );\n}\n","import { getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';\n\nexport const elementsStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_STYLES_PROVIDER_KEY,\n\tpriority: 50,\n\tget: ( meta = {} ) => {\n\t\tlet elements = getElements();\n\n\t\tif ( 'elementId' in meta && meta.elementId ) {\n\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t}\n\n\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t},\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo(\n\t\t\t[\n\t\t\t\tcommandEndEvent( 'editor/documents/attach-preview' ),\n\t\t\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t\t],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACWO,IAAM,yBAAyB,MAAM;AAC3C,QAAM,YAA8B,CAAC;AAErC,QAAM,yBAAyB,MAAM;AACpC,WAAO,UAAU,MAAO,CAAE,EAAE,KAAM,CAAE,GAAG,MAAS,EAAE,WAAW,EAAE,WAAW,KAAK,CAAI;AAAA,EACpF;AAEA,QAAM,WAAW,CAAE,aAA8B;AAChD,cAAU,KAAM,QAAS;AAAA,EAC1B;AAEA,QAAM,gBAAgB,CAAE,OAA0B,CAAC,MAAO;AACzD,WAAO,uBAAuB,EAAE,IAAK,CAAE,aAAc,CAAE,SAAS,KAAK,SAAS,IAAK,IAAK,CAAE,CAAW;AAAA,EACtG;AAEA,QAAM,MAAM,CAAE,OAA0B,CAAC,MAAO;AAC/C,WAAO,uBAAuB,EAAE,QAAS,CAAE,aAAc,SAAS,IAAK,IAAK,CAAE;AAAA,EAC/E;AAEA,QAAM,YAAY,CAAE,OAAoB;AACvC,UAAM,eAAe,UAAU,IAAK,CAAE,aAAc;AACnD,aAAO,SAAS,UAAW,EAAG;AAAA,IAC/B,CAAE;AAEF,WAAO,MAAM;AACZ,mBAAa,QAAS,CAAE,gBAAiB,YAAY,CAAE;AAAA,IACxD;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;AC5CO,IAAM,mBAAmB,uBAAuB;;;ACFvD,mBAAsC;AAK/B,SAAS,uBAAwB,OAA0B,CAAC,GAAI;AACtE,QAAM,CAAE,EAAE,QAAS,QAAI,yBAAY,CAAE,SAAU,CAAE,MAAM,KAAM;AAE7D,8BAAW,MAAM,iBAAiB,UAAW,QAAS,GAAG,CAAC,CAAE;AAE5D,SAAO,iBAAiB,cAAe,IAAK;AAC7C;;;ACXA,6BAA4B;AAC5B,gCAA+D;AAIxD,IAAM,+BAA+B;AAErC,IAAM,yBAAyC;AAAA,EACrD,KAAK;AAAA,EACL,UAAU;AAAA,EACV,KAAK,CAAE,OAAO,CAAC,MAAO;AACrB,QAAI,eAAW,oCAAY;AAE3B,QAAK,eAAe,QAAQ,KAAK,WAAY;AAC5C,iBAAW,SAAS,OAAQ,CAAE,YAAa,QAAQ,OAAO,KAAK,SAAU;AAAA,IAC1E;AAEA,WAAO,SAAS,QAAS,CAAE,YAAa,OAAO,OAAQ,QAAQ,MAAM,IAAK,QAAS,KAAK,CAAC,CAAE,CAAE;AAAA,EAC9F;AAAA,EACA,WAAW,CAAE,OAAQ;AACpB,eAAO,0BAAAA;AAAA,MACN;AAAA,YACC,2CAAiB,iCAAkC;AAAA,YACnD,2CAAiB,gCAAiC;AAAA,MACnD;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;;;ACzBO,SAAS,OAAO;AACtB,mBAAiB,SAAU,sBAAuB;AACnD;;;ALIA,KAAK;","names":["listenTo"]}

package/dist/index.mjs

@@ -1,17 +1,20 @@
 // src/utils/create-styles-repository.ts
 var createStylesRepository = () => {
-  const providers = /* @__PURE__ */ new Map();
-  const registerProvider = (key, provider) => {
-    providers.set(key, provider);
+  const providers = [];
+  const getProvidersByPriority = () => {
+    return providers.slice(0).sort((a, b) => a.priority > b.priority ? -1 : 1);
   };
-  const all = () => {
-    return Array.from(providers.values()).reduce((acc, provider) => {
-      const styles = provider.get();
-      return { ...acc, ...styles };
-    }, {});
+  const register = (provider) => {
+    providers.push(provider);
+  };
+  const allByProvider = (meta = {}) => {
+    return getProvidersByPriority().map((provider) => [provider.key, provider.get(meta)]);
+  };
+  const all = (meta = {}) => {
+    return getProvidersByPriority().flatMap((provider) => provider.get(meta));
   };
   const subscribe = (cb) => {
-    const unsubscribes = Array.from(providers.values()).map((provider) => {
+    const unsubscribes = providers.map((provider) => {
       return provider.subscribe(cb);
     });
     return () => {
@@ -19,8 +22,9 @@ var createStylesRepository = () => {
     };
   };
   return {
-    registerProvider,
     all,
+    allByProvider,
+    register,
     subscribe
   };
 };
@@ -28,17 +32,27 @@ var createStylesRepository = () => {
 // src/styles-repository.ts
 var stylesRepository = createStylesRepository();
 
+// src/hooks/use-all-styles-by-provider.ts
+import { useEffect, useReducer } from "react";
+function useAllStylesByProvider(meta = {}) {
+  const [, rerender] = useReducer((prev) => !prev, false);
+  useEffect(() => stylesRepository.subscribe(rerender), []);
+  return stylesRepository.allByProvider(meta);
+}
+
 // src/elements-styles-provider.ts
 import { getElements } from "@elementor/editor-elements";
 import { __privateListenTo as listenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
+var ELEMENTS_STYLES_PROVIDER_KEY = "elements";
 var elementsStylesProvider = {
-  get: () => {
-    const elements = getElements();
-    const entries = elements.flatMap((element) => {
-      const styles = element.model.get("styles");
-      return styles ? Object.entries(styles) : [];
-    });
-    return Object.fromEntries(entries);
+  key: ELEMENTS_STYLES_PROVIDER_KEY,
+  priority: 50,
+  get: (meta = {}) => {
+    let elements = getElements();
+    if ("elementId" in meta && meta.elementId) {
+      elements = elements.filter((element) => element.id === meta.elementId);
+    }
+    return elements.flatMap((element) => Object.values(element.model.get("styles") ?? {}));
   },
   subscribe: (cb) => {
     return listenTo(
@@ -53,12 +67,14 @@ var elementsStylesProvider = {
 
 // src/init.ts
 function init() {
-  stylesRepository.registerProvider("elements", elementsStylesProvider);
+  stylesRepository.register(elementsStylesProvider);
 }
 
 // src/index.ts
 init();
 export {
-  stylesRepository
+  ELEMENTS_STYLES_PROVIDER_KEY,
+  stylesRepository,
+  useAllStylesByProvider
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/elements-styles-provider.ts","../src/init.ts","../src/index.ts"],"sourcesContent":["import { type StyleDefinitionsMap } from '@elementor/editor-styles';\n\nexport type StylesProvider = {\n\tget: () => StyleDefinitionsMap;\n\tsubscribe: ( callback: () => void ) => () => void;\n};\n\nexport const createStylesRepository = () => {\n\tconst providers = new Map< string, StylesProvider >();\n\n\tconst registerProvider = ( key: string, provider: StylesProvider ) => {\n\t\tproviders.set( key, provider );\n\t};\n\n\tconst all = () => {\n\t\treturn Array.from( providers.values() ).reduce< StyleDefinitionsMap >( ( acc, provider ) => {\n\t\t\tconst styles = provider.get();\n\n\t\t\treturn { ...acc, ...styles };\n\t\t}, {} );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = Array.from( providers.values() ).map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\treturn {\n\t\tregisterProvider,\n\t\tall,\n\t\tsubscribe,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\n","import { getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const elementsStylesProvider: StylesProvider = {\n\tget: () => {\n\t\tconst elements = getElements();\n\n\t\tconst entries = elements.flatMap( ( element ) => {\n\t\t\tconst styles = element.model.get( 'styles' );\n\n\t\t\treturn styles ? Object.entries( styles ) : [];\n\t\t} );\n\n\t\treturn Object.fromEntries( entries );\n\t},\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo(\n\t\t\t[\n\t\t\t\tcommandEndEvent( 'editor/documents/attach-preview' ),\n\t\t\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t\t],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.registerProvider( 'elements', elementsStylesProvider );\n}\n","export { type StylesProvider } from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\n\nimport { init } from './init';\n\ninit();\n"],"mappings":";AAOO,IAAM,yBAAyB,MAAM;AAC3C,QAAM,YAAY,oBAAI,IAA8B;AAEpD,QAAM,mBAAmB,CAAE,KAAa,aAA8B;AACrE,cAAU,IAAK,KAAK,QAAS;AAAA,EAC9B;AAEA,QAAM,MAAM,MAAM;AACjB,WAAO,MAAM,KAAM,UAAU,OAAO,CAAE,EAAE,OAA+B,CAAE,KAAK,aAAc;AAC3F,YAAM,SAAS,SAAS,IAAI;AAE5B,aAAO,EAAE,GAAG,KAAK,GAAG,OAAO;AAAA,IAC5B,GAAG,CAAC,CAAE;AAAA,EACP;AAEA,QAAM,YAAY,CAAE,OAAoB;AACvC,UAAM,eAAe,MAAM,KAAM,UAAU,OAAO,CAAE,EAAE,IAAK,CAAE,aAAc;AAC1E,aAAO,SAAS,UAAW,EAAG;AAAA,IAC/B,CAAE;AAEF,WAAO,MAAM;AACZ,mBAAa,QAAS,CAAE,gBAAiB,YAAY,CAAE;AAAA,IACxD;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;ACnCO,IAAM,mBAAmB,uBAAuB;;;ACFvD,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB,UAAU,uBAAuB;AAIxD,IAAM,yBAAyC;AAAA,EACrD,KAAK,MAAM;AACV,UAAM,WAAW,YAAY;AAE7B,UAAM,UAAU,SAAS,QAAS,CAAE,YAAa;AAChD,YAAM,SAAS,QAAQ,MAAM,IAAK,QAAS;AAE3C,aAAO,SAAS,OAAO,QAAS,MAAO,IAAI,CAAC;AAAA,IAC7C,CAAE;AAEF,WAAO,OAAO,YAAa,OAAQ;AAAA,EACpC;AAAA,EACA,WAAW,CAAE,OAAQ;AACpB,WAAO;AAAA,MACN;AAAA,QACC,gBAAiB,iCAAkC;AAAA,QACnD,gBAAiB,gCAAiC;AAAA,MACnD;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;;;ACvBO,SAAS,OAAO;AACtB,mBAAiB,iBAAkB,YAAY,sBAAuB;AACvE;;;ACCA,KAAK;","names":[]}
+{"version":3,"sources":["../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-all-styles-by-provider.ts","../src/elements-styles-provider.ts","../src/init.ts","../src/index.ts"],"sourcesContent":["import { type StyleDefinition } from '@elementor/editor-styles';\n\nexport type StyleProviderMeta = Record< string, unknown >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tget: ( meta?: StyleProviderMeta ) => StyleDefinition[];\n\tsubscribe: ( callback: () => void ) => () => void;\n};\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProvidersByPriority = () => {\n\t\treturn providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );\n\t};\n\n\tconst register = ( provider: StylesProvider ) => {\n\t\tproviders.push( provider );\n\t};\n\n\tconst allByProvider = ( meta: StyleProviderMeta = {} ) => {\n\t\treturn getProvidersByPriority().map( ( provider ) => [ provider.key, provider.get( meta ) ] as const );\n\t};\n\n\tconst all = ( meta: StyleProviderMeta = {} ) => {\n\t\treturn getProvidersByPriority().flatMap( ( provider ) => provider.get( meta ) );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = providers.map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\treturn {\n\t\tall,\n\t\tallByProvider,\n\t\tregister,\n\t\tsubscribe,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\n","import { useEffect, useReducer } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StyleProviderMeta } from '../utils/create-styles-repository';\n\nexport function useAllStylesByProvider( meta: StyleProviderMeta = {} ) {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.allByProvider( meta );\n}\n","import { getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';\n\nexport const elementsStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_STYLES_PROVIDER_KEY,\n\tpriority: 50,\n\tget: ( meta = {} ) => {\n\t\tlet elements = getElements();\n\n\t\tif ( 'elementId' in meta && meta.elementId ) {\n\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t}\n\n\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t},\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo(\n\t\t\t[\n\t\t\t\tcommandEndEvent( 'editor/documents/attach-preview' ),\n\t\t\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t\t],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n}\n","export { type StylesProvider } from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n"],"mappings":";AAWO,IAAM,yBAAyB,MAAM;AAC3C,QAAM,YAA8B,CAAC;AAErC,QAAM,yBAAyB,MAAM;AACpC,WAAO,UAAU,MAAO,CAAE,EAAE,KAAM,CAAE,GAAG,MAAS,EAAE,WAAW,EAAE,WAAW,KAAK,CAAI;AAAA,EACpF;AAEA,QAAM,WAAW,CAAE,aAA8B;AAChD,cAAU,KAAM,QAAS;AAAA,EAC1B;AAEA,QAAM,gBAAgB,CAAE,OAA0B,CAAC,MAAO;AACzD,WAAO,uBAAuB,EAAE,IAAK,CAAE,aAAc,CAAE,SAAS,KAAK,SAAS,IAAK,IAAK,CAAE,CAAW;AAAA,EACtG;AAEA,QAAM,MAAM,CAAE,OAA0B,CAAC,MAAO;AAC/C,WAAO,uBAAuB,EAAE,QAAS,CAAE,aAAc,SAAS,IAAK,IAAK,CAAE;AAAA,EAC/E;AAEA,QAAM,YAAY,CAAE,OAAoB;AACvC,UAAM,eAAe,UAAU,IAAK,CAAE,aAAc;AACnD,aAAO,SAAS,UAAW,EAAG;AAAA,IAC/B,CAAE;AAEF,WAAO,MAAM;AACZ,mBAAa,QAAS,CAAE,gBAAiB,YAAY,CAAE;AAAA,IACxD;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;AC5CO,IAAM,mBAAmB,uBAAuB;;;ACFvD,SAAS,WAAW,kBAAkB;AAK/B,SAAS,uBAAwB,OAA0B,CAAC,GAAI;AACtE,QAAM,CAAE,EAAE,QAAS,IAAI,WAAY,CAAE,SAAU,CAAE,MAAM,KAAM;AAE7D,YAAW,MAAM,iBAAiB,UAAW,QAAS,GAAG,CAAC,CAAE;AAE5D,SAAO,iBAAiB,cAAe,IAAK;AAC7C;;;ACXA,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB,UAAU,uBAAuB;AAIxD,IAAM,+BAA+B;AAErC,IAAM,yBAAyC;AAAA,EACrD,KAAK;AAAA,EACL,UAAU;AAAA,EACV,KAAK,CAAE,OAAO,CAAC,MAAO;AACrB,QAAI,WAAW,YAAY;AAE3B,QAAK,eAAe,QAAQ,KAAK,WAAY;AAC5C,iBAAW,SAAS,OAAQ,CAAE,YAAa,QAAQ,OAAO,KAAK,SAAU;AAAA,IAC1E;AAEA,WAAO,SAAS,QAAS,CAAE,YAAa,OAAO,OAAQ,QAAQ,MAAM,IAAK,QAAS,KAAK,CAAC,CAAE,CAAE;AAAA,EAC9F;AAAA,EACA,WAAW,CAAE,OAAQ;AACpB,WAAO;AAAA,MACN;AAAA,QACC,gBAAiB,iCAAkC;AAAA,QACnD,gBAAiB,gCAAiC;AAAA,MACnD;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;;;ACzBO,SAAS,OAAO;AACtB,mBAAiB,SAAU,sBAAuB;AACnD;;;ACIA,KAAK;","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-styles-repository",
   "description": "Elementor Editor Styles Repository",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -33,8 +33,11 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-elements": "0.3.2",
-    "@elementor/editor-styles": "0.3.1",
+    "@elementor/editor-elements": "0.3.3",
+    "@elementor/editor-styles": "0.3.2",
     "@elementor/editor-v1-adapters": "0.8.5"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
   }
 }

package/src/__tests__/elements-styles-provider.test.ts

@@ -6,8 +6,7 @@ import { elementsStylesProvider } from '../elements-styles-provider';
 jest.mock( '@elementor/editor-elements' );
 
 describe( 'elementsStylesProvider', () => {
-	it( 'should return all the styles attached to all the document elements', () => {
-		// Arrange.
+	beforeEach( () => {
 		jest.mocked( getElements ).mockReturnValue( [
 			createMockElement( {
 				model: {
@@ -27,15 +26,28 @@ describe( 'elementsStylesProvider', () => {
 				},
 			} ),
 		] );
+	} );
 
+	it( 'should return all the styles attached to all the document elements', () => {
 		// Act.
 		const styles = elementsStylesProvider.get();
 
 		// Assert.
-		expect( styles ).toEqual( {
-			's-1': expect.objectContaining( { id: 's-1' } ),
-			's-2': expect.objectContaining( { id: 's-2' } ),
-			's-3': expect.objectContaining( { id: 's-3' } ),
-		} );
+		expect( styles ).toEqual( [
+			expect.objectContaining( { id: 's-1' } ),
+			expect.objectContaining( { id: 's-2' } ),
+			expect.objectContaining( { id: 's-3' } ),
+		] );
+	} );
+
+	it( 'should return all styles filtered by element', () => {
+		// Act.
+		const styles = elementsStylesProvider.get( { elementId: '1' } );
+
+		// Assert.
+		expect( styles ).toEqual( [
+			expect.objectContaining( { id: 's-1' } ),
+			expect.objectContaining( { id: 's-2' } ),
+		] );
 	} );
 } );

package/src/elements-styles-provider.ts

@@ -3,17 +3,19 @@ import { __privateListenTo as listenTo, commandEndEvent } from '@elementor/edito
 
 import { type StylesProvider } from './utils/create-styles-repository';
 
-export const elementsStylesProvider: StylesProvider = {
-	get: () => {
-		const elements = getElements();
+export const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';
 
-		const entries = elements.flatMap( ( element ) => {
-			const styles = element.model.get( 'styles' );
+export const elementsStylesProvider: StylesProvider = {
+	key: ELEMENTS_STYLES_PROVIDER_KEY,
+	priority: 50,
+	get: ( meta = {} ) => {
+		let elements = getElements();
 
-			return styles ? Object.entries( styles ) : [];
-		} );
+		if ( 'elementId' in meta && meta.elementId ) {
+			elements = elements.filter( ( element ) => element.id === meta.elementId );
+		}
 
-		return Object.fromEntries( entries );
+		return elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );
 	},
 	subscribe: ( cb ) => {
 		return listenTo(

package/src/hooks/use-all-styles-by-provider.ts

@@ -0,0 +1,12 @@
+import { useEffect, useReducer } from 'react';
+
+import { stylesRepository } from '../styles-repository';
+import { type StyleProviderMeta } from '../utils/create-styles-repository';
+
+export function useAllStylesByProvider( meta: StyleProviderMeta = {} ) {
+	const [ , rerender ] = useReducer( ( prev ) => ! prev, false );
+
+	useEffect( () => stylesRepository.subscribe( rerender ), [] );
+
+	return stylesRepository.allByProvider( meta );
+}

package/src/index.ts

@@ -1,6 +1,9 @@
 export { type StylesProvider } from './utils/create-styles-repository';
 
 export { stylesRepository } from './styles-repository';
+export { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';
+
+export { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';
 
 import { init } from './init';
 

package/src/init.ts

@@ -2,5 +2,5 @@ import { elementsStylesProvider } from './elements-styles-provider';
 import { stylesRepository } from './styles-repository';
 
 export function init() {
-	stylesRepository.registerProvider( 'elements', elementsStylesProvider );
+	stylesRepository.register( elementsStylesProvider );
 }

package/src/utils/__tests__/create-styles-repository.test.ts

@@ -1,40 +1,48 @@
 import { createMockStyleDefinition } from 'test-utils';
-import { type StyleDefinitionsMap } from '@elementor/editor-styles';
+import { type StyleDefinition } from '@elementor/editor-styles';
 
 import { createStylesRepository, type StylesProvider } from '../create-styles-repository';
 
 const styleDef1 = createMockStyleDefinition( { props: { color: { $$type: 'color', value: '#dddddd' } } } );
 const styleDef2 = createMockStyleDefinition( { props: { color: { $$type: 'color', value: '#eeeeee' } } } );
+const styleDef3 = createMockStyleDefinition( { props: { color: { $$type: 'color', value: '#111111' } } } );
 
 describe( 'createStylesRepository', () => {
-	it( 'should register and get all styles from all providers', () => {
+	it( 'should get all the style defs from all providers ordered by priority', () => {
 		// Arrange
 		const repo = createStylesRepository();
 
-		repo.registerProvider( 'mock1', createMockProvider( { [ styleDef1.id ]: styleDef1 } ).provider );
-		repo.registerProvider( 'mock2', createMockProvider( { [ styleDef2.id ]: styleDef2 } ).provider );
+		repo.register( createMockProvider( 'mock1', 10, [ styleDef1 ] ).provider );
+		repo.register( createMockProvider( 'mock2', 20, [ styleDef2 ] ).provider );
 
 		// Assert
-		expect( repo.all() ).toEqual( {
-			[ styleDef1.id ]: styleDef1,
-			[ styleDef2.id ]: styleDef2,
-		} );
+		expect( repo.all() ).toEqual( [ styleDef2, styleDef1 ] );
+	} );
+
+	it( 'should get all the style defs grouped by providers', () => {
+		// Arrange
+		const repo = createStylesRepository();
+
+		repo.register( createMockProvider( 'mock1', 10, [ styleDef1 ] ).provider );
+		repo.register( createMockProvider( 'mock2', 20, [ styleDef2, styleDef3 ] ).provider );
+
+		// Assert
+		expect( repo.allByProvider() ).toEqual( [
+			[ 'mock2', [ styleDef2, styleDef3 ] ],
+			[ 'mock1', [ styleDef1 ] ],
+		] );
 	} );
 
 	it( 'should subscribe and unsubscribe to all style providers', () => {
 		// Arrange
 		const repo = createStylesRepository();
 
-		const { provider: mockStylesProvider1, notify: notify1 } = createMockProvider( {
-			[ styleDef1.id ]: styleDef1,
-		} );
+		const { provider: mockStylesProvider1, notify: notify1 } = createMockProvider( 'mock1', 10, [ styleDef1 ] );
 
-		const { provider: mockStylesProvider2, notify: notify2 } = createMockProvider( {
-			[ styleDef2.id ]: styleDef2,
-		} );
+		const { provider: mockStylesProvider2, notify: notify2 } = createMockProvider( 'mock2', 10, [ styleDef2 ] );
 
-		repo.registerProvider( 'mock1', mockStylesProvider1 );
-		repo.registerProvider( 'mock2', mockStylesProvider2 );
+		repo.register( mockStylesProvider1 );
+		repo.register( mockStylesProvider2 );
 
 		const cb = jest.fn();
 		const unsubscribe = repo.subscribe( cb );
@@ -62,7 +70,7 @@ describe( 'createStylesRepository', () => {
 	} );
 } );
 
-const createMockProvider = ( styleDefinitions: StyleDefinitionsMap ) => {
+const createMockProvider = ( key: string, priority: number, styleDefinitions: StyleDefinition[] ) => {
 	const subscribers = new Set< () => void >();
 
 	const notify = () => {
@@ -70,6 +78,8 @@ const createMockProvider = ( styleDefinitions: StyleDefinitionsMap ) => {
 	};
 
 	const provider: StylesProvider = {
+		key,
+		priority,
 		get: () => styleDefinitions,
 		subscribe: ( cb ) => {
 			subscribers.add( cb );

package/src/utils/create-styles-repository.ts

@@ -1,27 +1,35 @@
-import { type StyleDefinitionsMap } from '@elementor/editor-styles';
+import { type StyleDefinition } from '@elementor/editor-styles';
+
+export type StyleProviderMeta = Record< string, unknown >;
 
 export type StylesProvider = {
-	get: () => StyleDefinitionsMap;
+	key: string;
+	priority: number;
+	get: ( meta?: StyleProviderMeta ) => StyleDefinition[];
 	subscribe: ( callback: () => void ) => () => void;
 };
 
 export const createStylesRepository = () => {
-	const providers = new Map< string, StylesProvider >();
+	const providers: StylesProvider[] = [];
+
+	const getProvidersByPriority = () => {
+		return providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );
+	};
 
-	const registerProvider = ( key: string, provider: StylesProvider ) => {
-		providers.set( key, provider );
+	const register = ( provider: StylesProvider ) => {
+		providers.push( provider );
 	};
 
-	const all = () => {
-		return Array.from( providers.values() ).reduce< StyleDefinitionsMap >( ( acc, provider ) => {
-			const styles = provider.get();
+	const allByProvider = ( meta: StyleProviderMeta = {} ) => {
+		return getProvidersByPriority().map( ( provider ) => [ provider.key, provider.get( meta ) ] as const );
+	};
 
-			return { ...acc, ...styles };
-		}, {} );
+	const all = ( meta: StyleProviderMeta = {} ) => {
+		return getProvidersByPriority().flatMap( ( provider ) => provider.get( meta ) );
 	};
 
 	const subscribe = ( cb: () => void ) => {
-		const unsubscribes = Array.from( providers.values() ).map( ( provider ) => {
+		const unsubscribes = providers.map( ( provider ) => {
 			return provider.subscribe( cb );
 		} );
 
@@ -31,8 +39,9 @@ export const createStylesRepository = () => {
 	};
 
 	return {
-		registerProvider,
 		all,
+		allByProvider,
+		register,
 		subscribe,
 	};
 };