diff --git a/src/react/hooks/paragon/useParagonThemeCore.js b/src/react/hooks/paragon/useParagonThemeCore.js index 5dc3e902c..1dced0ad5 100644 --- a/src/react/hooks/paragon/useParagonThemeCore.js +++ b/src/react/hooks/paragon/useParagonThemeCore.js @@ -130,9 +130,11 @@ const useParagonThemeCore = ({ } else { existingCoreThemeLink.rel = 'stylesheet'; existingCoreThemeLink.removeAttribute('as'); + existingCoreThemeLink.dataset.paragonThemeCore = true; if (brandCoreLink) { brandCoreLink.rel = 'stylesheet'; brandCoreLink.removeAttribute('as'); + brandCoreLink.dataset.brandThemeCore = true; } setIsParagonThemeCoreLoaded(true); setIsBrandThemeCoreLoaded(true); diff --git a/src/react/hooks/paragon/useParagonThemeCore.test.js b/src/react/hooks/paragon/useParagonThemeCore.test.js index 1eecf876c..4de881aca 100644 --- a/src/react/hooks/paragon/useParagonThemeCore.test.js +++ b/src/react/hooks/paragon/useParagonThemeCore.test.js @@ -86,6 +86,24 @@ describe('useParagonThemeCore', () => { expect(document.querySelector('link').href).toBe(`${getConfig().BASE_URL}/${PARAGON_THEME.paragon.themeUrls.core.fileName}`); }); + it('should not create a new link if the core theme is already loaded', () => { + document.head.innerHTML = ''; + const coreConfig = { + themeCore: { + urls: { + default: 'https://cdn.jsdelivr.net/npm/@edx/paragon@$21.0.0/dist/core.min.css', + }, + }, + onLoad: themeOnLoad, + }; + + renderHook(() => useParagonThemeCore(coreConfig)); + const themeCoreLinks = document.head.querySelectorAll('link'); + expect(themeCoreLinks.length).toBe(1); + expect(themeCoreLinks[0].rel).toContain('stylesheet'); + expect(themeCoreLinks[0]).not.toHaveAttribute('as', 'style'); + }); + it('should not create any core link if can not find themeCore urls definition', () => { const coreConfig = { themeCore: {